This can be compared with the Mobile Web mechanisms, which use adaptive web design (primarily for the classic UI).

AEM realizes responsive layout for your pages using a combination of mechanisms:

Layout Container component
This component provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can be used as the default parsys for your page and/or made available to authors in the component browser.

Both.
You can have the layout container as standard for the page, while allowing the user to add further layout containers within this; for example, to achieve column control.

Layout Mode
Once the layout container is positioned on your page you can use the Layout mode to position content within the responsive grid.

Emulator
This allows you to create and edit responsive websites that rearrange the layout according to device/window size by resizing components interactively. The user can then see how the content will be rendered using the Emulator.

Uzmanību!

Although the Layout Container component is available in the classic UI, its full functionality is only available in the touch-enabled UI.

Activate Layout Mode for your Site

Configure the Breakpoints

On the page template, from where the settings will be copied to any pages created with that template.

On the page node, from where the settings will be inherited by any child pages.

Define a title and a width:

The title describes the generic device grouping, with orientation if required; 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.

Piezīme.

If you are setting up a new project:

you need to add breakpoints to the templates.

If you are migrating an existing project (with existing content) you need to:

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.

Configuring Breakpoints using CRXDE Lite

Using CRXDE Lite (or equivalent), navigate to either:

Your template definition.

The jcr:content node of your page.

Under jcr:content create the node:

Name: cq:responsive

Type: nt:unstructured

Under this create the node:

Name: breakpoints

Type: nt:unstructured

Under the breakpoints node you can create any number of breakpoints. Each definition is a single node with the following properties:

Name: <descriptive name>

Type: nt:unstructured

Title: String<descriptive title seen in Emulator>

Width: Decimal<value of breakpoint>

Configuring Breakpoints using XML

Breakpoints are located inside the <jcr:content> section of the .context.html under the appropriate template (or content) folder.

Styling Considerations

Components held within a responsive container will be resized (together with their respective HTML DOM elements) according to the responsive grid size. Therefore, in these circumstances, it is recommended to avoid (or update) definitions of fixed width (contained) DOM elements.

For example:

Before:

width=100px

After:

max-width=100px

Resizing and Adaptive Image Compliance

Any resizing of a component within the grid will trigger the following listeners as appropriate:

beforeedit

beforechildedit

afteredit

afterchildedit

To properly resize and update the content of an adaptive image included in a responsive grid, you need to add an afterEdit set to REFRESH_PAGE listener into the EditConfig file of every contained component.

The adaptive image mechanism is made available via a script that controls selection of the correct image for the current size of the window. It activates after the DOM is ready or when receiving a dedicated event. Currently the page must be refreshed to properly reflect the result of the user's action.

Uzmanību!

Custom stylesheet clientlibs must be loaded as part of the header for them to work properly on author as well as publish.

Enable the Layout Container Component for Page

These tasks allow authors to drag instances of the Layout Container component onto the page.

Enable the Layout Container Component for Page Editing

To allow authors to add further responsive grids to the content pages you need to enable the Layout Container component for your page. You can do this using either: