How to Implement a Responsive Layout in AEM part 3

Creating Different Page Templates for Use with the Responsive Grid Component

Welcome to part 3 of our series titled “How to Implement a Responsive Layout in AEM”. If you haven’t read the previous article please do so before reading this article.

There are times when you might want to have a particular page template with the layout hard coded to it. For example, when the same layout is being used across many pages and there is no foreseeable reason to change the layout structure of the page (at least not very often). In such cases, it would become tedious to set up the layout on each page via the column controller. When this is the case, you can easily alter the default template or simply create another template based on the default one. Information on how to do this can be found here.

It is possible to make nested responsive grid components within your page template. With that being said, the naming convention of the responsive grid components is very important. Nested responsive grid components must have unique names (much the same as the parsys component and for the same reasons). More information about this can be found in this slide deck from Gabriel Walt. Also take care that your responsive grid components have unique names from their sibling components, not doing so will result in many problems. The column controller (since its responsive grids are contained within the component) does not have these problems. It isn’t often necessary to nest column controllers, as many column structures can be made within the responsive grid in the Layouting mode, therefore, it is important to understand how the layout will change when moving to and from various device sizes. For example, in the image to the left, there is a title, followed by some text, followed by two columns of promotional tiles. The desktop and tablet views of this part of the page may well be the same; however, this layout isn’t particularly suited for a mobile device. A single column structure (the default for the responsive grid) is much more appropriate. This single column structure will be quite different depending on how the initial layout was constructed.

If a single responsive grid was used the element structure would look like this:

• Title
• Text
• Asset Management Block
• Wealth Management Block
• Life Sciences Block
• Insurance Block
• Entertainment Block
• Nonprofit Block

If a nested column controller was used, then the element structure would look like this:

• Title
• Text
• Asset Management Block
• Life Sciences Block
• Entertainment Block
• Wealth Management Block
• Insurance Block
• Nonprofit Block

Notice that the order of the elements is different. This is because the nested columns are collapsed first as a group and then by node order within each responsive grid within the column controller, whereas the other simply collapses according to their node order within the responsive grid.

The scripts in the examples below are identical to the ones used within the column controller. Therefore, if you are changing or creating a template you will need to do one of the following: copy and paste any scripts used into the page component the template is using, write new versions of the scripts and include them within the page component, or write the content that would be contained within the scripts within the file /apps/aem-prototypes/components/page_responsive/content.jsp or /apps/aem-prototypes/components/page_responsive_sightly/content.html instead of making the include call.

The following examples are concerned with the inclusion of the rows of the responsive layout design. All examples concerning the rows of the layout are variations of the following files: /apps/aem-prototypes/components/page_responsive/content.jsp and /apps/aem-prototypes/components/page_responsive_sightly/content.html.
Note: Portions of these files have been omitted for brevity and readability.

Note: The file content.jsp is shown above.
Note: The file content.html is shown below.

This page layout creates two rows. The first row (top) contains only one responsive grid that spans all twelve columns. The second row (bottom) contains two responsive grid components, the first of these spans eight columns and the latter four columns.

Note: The file content.jsp is shown above.
Note: The file content.html is shown below.

This version creates three rows. The first row (top) contains only one responsive grid that spans all twelve columns. The second row (middle) contains two responsive grid components, the first of these spans eight columns and the latter four columns. The last row (bottom) contains only one responsive grid component that spans all twelve columns, just like the first row. Even though there is no functional difference between the first row and the last, two different scripts are used. This is because the two responsive grid components created by these scripts cannot have the same name and function correctly. If the same script or name is used, the latter responsive grid component will simply duplicate (visually) the content in the first and likely not function in any meaningful way. The writing of these scripts such as 12col_b.jsp and 12col_b.html will be covered later in this section of the document.

Note: The file content.jsp is shown above.
Note: The file content.html is shown below.

This version contains three rows and is very similar to the previous example; however, the second row is distinctly different. The second row contains a regular parsys component.

Next time in this series we will learn how to create new and custom column scripts for use with the responsive grid component. It will provide you with the knowledge necessary to create any column layout you might need.

Part 1, Part 2, Part 3, Part 4, Part 5