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.

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

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.

NOTE
If you are setting up a new project:
  • add breakpoints to the templates.
If you are migrating an existing project (with existing content), you must:
  • 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.