Configuring the Responsive Emulator
This task lets you see the responsive Emulator on your site.
Register your Page Components for Emulation
To enable the emulator to support your pages, you must register your page components. See Registering Page Components for Simulation.
Specify the Device Groups
To specify the device groups that appear in the Devices list of the emulator see Specifying the Device Groups.
Link your Site to the Specified Device Groups
To include the emulator, link your site to the device groups. See Adding the Devices List (for both the classic and touch-optimized UI).
Activate Layout Mode for your Site
These procedures are used to enable the Layout mode on your site.
Configure the Breakpoints
-
Are used in responsive design.
-
Can be defined:
- On the page template, from where the settings are copied to any pages created with that template.
- On the page node, from where the settings are inherited by any child pages.
-
Define a title and a width:
- The title describes the generic device grouping, with orientation if necessary; for example, phone, tablet, tabletlandscape.
- The width defines the maximum width in pixels for that generic device grouping. For example, if the breakpoint phone has a width of 768 then that it the maximum width of the layout used for a phone device.
-
Are visible as markers at the top of the page editor when you are using the emulator.
-
Are inherited from the parent node hierarchy and can be overridden at will.
-
There is a default (out-of-the-box) breakpoint which covers everything above the last configured breakpoint.
They can be defined using CRXDE Lite or XML.
- add breakpoints to the templates.
-
add breakpoints to the templates
-
add the same breakpoints to the existing pages
As inheritance is in operation you can limit this to the root page of your content.