Layout Definitions, Device Emulation, and Breakpoints

When you are creating your website content you want to ensure that your content is displayed appropriate to the device being used to view it.

AEM allows you to define layouts dependent on the width of the device:

  • The emulator enables you to emulate these layouts on a range of devices. In addition to the device type, the orientation, selected by the Rotate device option, can impact the breakpoint selected as the width changes.

  • Breakpoints are the points which separate the layout definitions.

    • They effectively define the maximum width (in pixels) of any device using a specific layout.
    • The breakpoints are usually valid for a selection of devices, dependent on the width of their displays.
    • The range of a breakpoint extends left until the next breakpoint.
    • You cannot select the breakpoint specifically, selecting a device and orientation will automatically select the appropriate breakpoint.

The device Desktop, which does not have a specific width, relates to the default breakpoint (i.e. everything above the last configured breakpoint).

NOTE
It would be possible to define breakpoints for every individual device, but this would drastically increase the effort required for layout definition and maintenance.

When using the emulator, you select a specific device for emulation and layout definition and the related breakpoint will be highlighted too. Any layout changes that you make will be applicable for other devices to which the breakpoint applies, i.e. any devices positioned to the left of the active breakpoint marker, but before the next breakpoint marker.

For example, when you select the device iPhone 6 Plus (defined with a width of 540 pixels) for emulation and layout, the breakpoint Phone (defined as 768 pixels) will be activated too. Any layout changes you make for the iPhone 6 will be applicable to other devices under the Phones breakpoint, such as iPhone 5 (defined as 320 pixels).

screen_shot_2018-03-23at084058

Selecting a Device to Emulate

  1. Open the required page for editing. For example:

    http://localhost:4502/editor.html/content/we-retail/us/en/experience.html

  2. Select the Emulator icon from the top toolbar:

  3. The emulator toolbar will open.

    screen_shot_2018-03-23at084551

    The emulator toolbar displays additional layout options:

    • Rotate device - Allows you to rotate a deivce from vertical (portrait) orientation to horizontal (landscape) orientation and vice-versa.

    • Select Device - Define a specific device to emulate from a list (see next step for details)

  4. To select a specific device to emulate you can either:

    • Use the Select Device icon and select from a drop-down selector.
    • Tap/click on the device indicator in the emulator toolbar.

    screen_shot_2018-03-23at084818

  5. Once a specific device has been selected you can:

    • See the active marker for the selected device, such as iPad.
    • See the active marker for the appropriate breakpoint such as Tablet.

    screen_shot_2018-03-23at084932

    • The blue dotted line represents the fold for the selected device (here an iPhone 6).

    screen_shot_2018-03-23at084947

    • The fold can also be considered the page line break (not to be confused with the breakpoints) for the content. This is displayed for convenience to show what part of the content the user will see on the device before scrolling.
    • The line for the fold will not be shown if the height of the device being emulated is higher than the screen size.
    • The fold is shown for the author’s convenience and is not shown on the published page.

Adding a Layout Container and its Content (Edit mode)

A Layout Container is a paragraph system that:

  • Contains other components.
  • Defines the layout.
  • Responds to changes.
NOTE
If not already available, the Layout Container must be explicitly activated for a paragraph system/page (for example, by using Design mode).
  1. The Layout Container is available as a standard component in the Components Browser. From here you can drag it to the required location on the page after which you will see the Drag Components here placeholder.

  2. You can then add components to the layout container. These components will hold the actual content:

    screen_shot_2018-03-23at085500

Selecting and Taking Action on a Layout Container (Edit mode)

As with other components, you can select and then take action on (cut, copy, delete) a Layout Container (when in Edit mode):

CAUTION
As a layout container is a paragraph system, deleting the component will delete both the layout grid and all the components (and their content) held within the container.
  1. If you mouseover or tap the grid placeholder, the action menu is displayed.

    screen_shot_2018-03-23at085357

    You need to select the Parent option.

  2. If the layout component is nested, selecting the Parent option presents a drop-down selection, allowing you to select the nested layout container or its parent(s).

    When you mouse over the container names in the drop-down, their outlines will be displayed on the page.

    • The lowest nested layout container will be outlined in black.
    • The next-lowest nested layout container will be in a dark grey.
    • Every successive container will be lin a lighter shade of grey.

    screen_shot_2018-03-23at085636

  3. This will highlight the entire grid with its content. The action toolbar will be shown, from where you can select an action such as Delete.

    screen_shot_2018-03-23at085724

Defining Layouts (Layout mode)

NOTE
You can define a separate layout for each breakpoint (as determined by emulated device type and orientation).

To configure the layout of a responsive grid implemented with the Layout Container you need to use the Layout mode.

Layout mode can be started in two ways.

  • By using the mode menu in the toolbar and choosing Layout mode

    • Select the Layout mode just as you would switch to Edit mode or Targeting mode.
    • Layout mode remains persistent and you do not leave Layout mode until you select another mode via the mode selector.
  • When editing an individual component.

    • By using the Layout option in the component’s quick action menu, you can switch to Layout mode.
    • Layout mode persists while editing the component and reverts to Edit mode once focus changes to another component.

When in layout mode you can perform various actions on a grid:

  • Resize the content components using the blue dots. Resizing will always snap-to-grid. When resizing the background grid will be shown to aid alignment:

    screen_shot_2018-03-23at090140

    NOTE
    Proportions and ratios will be maintained when components such as Images are resized.
  • Click/tap on a content component, the toolbar allows you to:

    • Parent

      Allows you to select the entire layout container component for taking action on the whole.

    • Float to new line

      The component will be moved to a new line, dependent on the space available within the grid.

    • Hide component

      The component will be made invisible (it can be restored from the toolbar of the layout container).

    screen_shot_2018-03-23at090246

  • In Layout mode you can tap/click on the Drag components here to select the entire component. This will show the toolbar for this mode.

    The toolbar will have different options depending on the state of the layout component and the components belonging to it. For example:

    • Parent - Select the parent component.

    • Show hidden components - Reveal all or individual components. The number indicates how many hidden components there currently are. The the counter shows how many components are hidden.

    • Revert breakpoint layout - Revert to the default layout. This means that no customized layout will be imposed.

    • Float to new line - Move the component up a position if spacing allows.

    screen_shot_2018-03-23at090829

    • Hide component - Hide the current component.

    NOTE
    In the above example the float and hide actions are available because this Layout Container is nested within a parent Layout Container.
    • Unhide components
      Select the parent components to show the action toolbar with the Show hidden components option. In this example, two components are hidden.

    screen_shot_2018-03-23at091200

    Selecting the Show hidden components option will display in blue the components that are currently hidden in their original positions.

    screen_shot_2018-03-23at091224

    Selecting Restore all will unhide all hidden components.

Experience Manager