How to Implement a Responsive Layout in AEM part 1

What Is A Responsive Layout?
We, and more importantly our customers, want responsive web pages. A responsive web page negates the need to have separate web pages (and content) for desktop computers, tablets, mobile phones, and all their various screen sizes and aspect ratios. Managing such a project on a non-responsive site is a nightmare both for us and our customers so instead we make responsive web pages. However, this is no trivial task. The CSS files for such projects can become very complex and time-consuming to create. Furthermore, small changes to a page’s layout is often an expensive and time-consuming task. Luckily there is now a better way. As of version 6.1, Adobe Experience Manager (AEM) has some amazing new features that will not only make the designing, creation, and revisioning of responsive web pages much faster and easier, but it will also allow our customers to have much more freedom when it comes to the layout of their web pages. And by doing so, it will save both time and money.

Exploring key new features
What are these new features? First, there is a component called a responsive grid. Simply put, the responsive grid component is a fancy parsys component. It is sometimes called a layout container. You can find more information on Adobe’s site, here. It is an amazing component that is vastly superior to the default paragraph system that came before it. Second, there is a new mode for the Touch UI interface, called the Layouting mode. This mode gives the user a simple and user-friendly way to edit the content of the layout container(s). The last important new feature to talk about here are the new breakpoints. These extend the function of the AEM device emulators as well as provide a way to define exactly when each layout setting should be used. These new features will be covered in more detail later on in this series.

How the features work together for a responsive layout
In order to achieve the full potential of the responsive layout we must utilize breakpoints, emulators, layout containers, and the Layouting mode. Each of these elements will be explained throughout the course of this series. This all provides a paragraph system that allows you (or an author) to position components within a responsive grid. This grid can rearrange the layout of content according to the device/window size and orientation. The component is used in conjunction with the Layouting mode, which allows a developer (or an author) to create and edit your responsive layout to be dependent on the device on which it is viewed. It provides a horizontal snap to grid, the ability to place components into the grid side by side, and define when they should collapse and/or reflow. Predefined breakpoints (e.g., phone, tablet) allow you to define the required behavior of content for the related device/orientation. For example, you can customize the component size, or even whether the component can be seen on specific devices. The user can then see how the content will be rendered for specific devices using the Emulator, as shown below for the Classic UI as well as for the Touch UI.

Emulator Classic UI

Emulator Touch UI

As a simple example, we could create a page that when displayed on a large screen, such as a desktop, would have a navigation menu on the left, ads on the right, and a rather complex (but beautiful) arrangement of content in the center. This theoretical page, for the sake of this example, looks great, however, on a smaller screen such as a phone or tablet, this layout would just be too messy and the content too small. Luckily, this layout can be configured to display the content differently in these cases. For the tablet, we might forgo the navigation bar that was in the left column of the desktop version allowing more room for the main content. And for the phones, we could lay out all of the components into a single column with the ads at the bottom of the page. And, as an added bonus, let’s have different ads when in the mobile version.

In another example, as pictured below, the same page does not need to be rewritten for each device, nor must it look the same on each device. Thus giving the author the convenience of separate mobile, tablet, and desktop sites without having to maintain separate content or pages for three different sites. Our customers will love how easy this system is for them to use. Once in Layouting mode, it is as easy as 1, 2, 3.

First, select the component that you would like to resize. Resize the content components using the blue dots. Resizing will always snap to the grid. When resizing, the background grid will be shown to aid alignment.

Second, if the component should be the start of a new row of components, only select the “Float To New Line” button. It is the one that looks like three sheets of paper stacked upon each other with a downward arrow next to them. If there isn’t enough space left for a particular component in a row, it will automatically move to a new line. This button just forces the component to a new line if needed.

Third, if the component should be hidden (while within screen sizes defined by the current breakpoint being used) simply click the “Hide Component” button, which looks like an eye with a “NO” symbol next to it. Don’t worry if you hide a component by mistake, hidden components can be unhidden by selecting the responsive grid component, selecting the “Unhide” button, and then clicking the desired component or “Show All”. If needed, there is also a “Revert Breakpoint Layout” button; this button looks like an arched arrow over a line. It resets the layout back to default (for the current breakpoint being used).

Another convenient feature of the responsive grid component is that its “Parent” button not only provides a way to select itself when in Edit mode, but also allows you to select one of its parents. These parents typically are one of the following: a responsive grid container (component), a column controller, or a parsys component. However, this is not a comprehensive list. This “Parent” button works the same way in the Layouting mode and the Design mode.

The power of columns
Speaking of the Design mode, there is a very powerful feature that we have not yet discussed. At the top of the edit design dialog box there is a field called “Columns”. This allows you to adjust the number of subdivisions (columns) that are available in each column (responsive grid components). This gives you the ability to size components to just the right size. The number of columns is limited to between one and twelve. Optionally, the Prototype Responsive Page Layout package contains a folder called “optionals”. The optionals folder contains optional modified versions of files, components, and client libraries normally found in this libs folder. The purpose of this folder is to allow for more advanced customization of your responsive layout system, and more information on this folder will be available in a later blog post. This folder contains a responsive grid component that can replace the one found at /libs/wcm/foundation/components/responsivegrid. Take care to “Save All” in CRXDE Lite in between these steps, as well as after. This replacement uses a dropdown selector instead of a text field for the “Columns” design option. This ensures that the user and/or author can only use valid inputs that won’t break the functionality of the Layouting mode.

How to Implement a Responsive Layout
The following instructions are to implement the responsive layout to a new or existing project in Adobe Experience Manager 6.1. Some of these steps aren’t needed in AEM 6.2. If you are inclined to try out the layouting system, you can simply follow steps 2-6 below after downloading the package here from Github. These packages contain some sample content. Otherwise, you can follow all the steps below to create a new project with the Layouting mode enabled or enable the Layouting mode on an existing project.

Tip: Click “Save All” in CRXDE Lite after each step.

1. Create a new site (if needed). Referred henceforth as [new_project].
   1. Information on how to do this can be found here and here.
2. Download one of the responsive page packages.
   1. Download the current version of “Prototype Responsive Page Layout-1.5.zip”.
      1. The use of this package by default is recommended.
   2. Download the current version of “Prototype Responsive Page Layout No Emu-1.5.zip” if you don’t want the custom emulators.
   3. Download the current version of “Prototype Responsive Page Layout Optional Pack 1-1.5.zip” if you want some of the more popular optionals enabled by default.
3. Go to the CRXDE Lite package manager. (http://localhost:[port_being_used]/crx/packmgr/index.jsp).
4. Upload the package into CRXDE Lite via the package manager.
   1. By clicking the “Upload Package” button.
   2. Choose the package downloaded in step 2.
5. Install the package via the package manager.
   1. Select the package uploaded in step 4.
   2. Click the “Install” button.
6. Return to CRXDE Lite.
   1. By clicking the “Develop” button.
   2. Navigating to http://localhost:4502/crx/de/index.jsp or to http://localhost:[port_being_used]/crx/de/index.jsp if applicable.
   3. Return to CRXDE Lite via an open tab. (This option is only applicable if you opened the package manager in a new tab.)
      1. Refresh CRXDE Lite if needed (if open in a separate tab from the package manager).
         
7. Copy and paste the contents of the folder at /apps/aem-prototypes/components/ to the /apps/[new_project]/components folder.
8. Change the “categories” property of the /apps/aem-prototypes/components/clientlibs folder to “[new_project]-components”.
9. Copy and paste the file /apps/aem-prototypes/global.jsp to the /apps/[new_project]/ folder.
10. Copy and paste the folder /apps/aem-prototypes/config to the /apps/[new_project] folder.
11. Change the “mobile.resourceTypes” property of the /apps/[new_project]/config/ com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-prototypeconfig node from “aem-prototypes/components/page_responsive_sightly, aem-prototypes/components/page_responsive” to “[new_project]/components/page_responsive_sightly, [new_project]/components/page_responsive”.
    1. Any other page components should also be included in this list.
12. Create a folder entitled “templates” inside the /apps/[new_project] folder (if needed).
13. Copy and paste the node /apps/aem-prototypes/templates/page_responsive to the apps/[new_project]/templates/ folder.
14. Change the “cq:designPath” property of the /apps/[new_project]/templates/page_responsive/jcr:content node from “/etc/designs/aem-prototypes” to “/etc/designs/[new_project]”.
15. Change the “sling:resourceType” property of the /apps/[new_project]/templates/page_responsive/jcr:content node from “aem-prototypes/components/page_responsive” to “[new_project]/components/page_responsive”.
16. Change the “allowedPaths” property of the /apps/[new_project]/templates/page_responsive node if needed.
17. Change the “jcr:description” property of the /apps/[new_project]/templates/page_responsive node if needed (recommended).
18. Change the “jcr:title” property of the /apps/[new_project]/templates/page_responsive node if needed (highly recommended).
19. Copy and paste the node /etc/clientlibs/aem-prototypes into the folder /etc/clientlibs, unless the folder /etc/clientlibs/[new_project] already exists.
    1. If the folder /etc/clientlibs/[new_project] does not already exist:
       1. Copy and paste the node /etc/clientlibs/aem-prototypes into the folder /etc/clientlibs.
          1. Note: Pasted node will be named “Copy of aem-prototypes”.
       2. Rename node /etc/clientlibs/Copy of aem-prototypes to /etc/clientlibs/[new_project].
    2. If the folder /etc/clientlibs/[new_project] already exists:
       1. Copy and paste the contents of /etc/clientlibs/aem-prototypes into /etc/clientlibs/[new_project].
20. Change the “categories” property of the /etc/clientlibs/[new_project]/main folder to “apps.[new_project].main”.
21. Copy and paste the node /etc/designs/aem-prototypes into the folder /etc/designs.
    1. Note: Pasted node will be named “Copy of aem-prototypes”.
22. Rename node /etc/designs/Copy of aem-prototypes to /etc/designs/[new_project].
23. Change the “categories” property of the /etc/designs/[new_project]/clientlibs folder to “apps.[new_project]”.
24. Change the “categories” property of the /etc/designs/[new_project]/clientlibs–all folder to “apps.[new_project].all”.
25. Edit the following files in the /apps/[new_project]/components/page_responsive/ node by replacing the statement “<%@include file=”/apps/aem-prototypes/global.jsp” %>” with “<%@include file=”/apps/[new_project]/global.jsp” %>”:
    1. “body.jsp”
       1. Can be edited to include components outside the responsive layout system.
    2. “content.jsp”
       1. Can be edited to hard code or to otherwise customize the responsive layout overall structure. More information can be found in part three of this series.
    3. “footer.jsp”
       1. Can be edited to include a custom footer component.
    4. “Head.jsp”
       1. Can be edited to include additional client libraries and scripts.
    5. “header.jsp”
       1. Can be edited to include a custom header component.
26. Edit all files in the /apps/[new_project]/components/responsive_column_control/ node whose filename ends with “col.jsp” by replacing the statement “<%@include file=”/apps/aem-prototypes/global.jsp” %>” with “<%@include file=”/apps/[new_project]/global.jsp” %>”.
    1. These files are:
       1. “12col.jsp”
       2. “2x2x2x2x2x2col.jsp”
       3. “3x3x3x3col.jsp”
       4. “3x3x6col.jsp”
       5. “3x6x3col.jsp”
       6. “3x9col.jsp”
       7. “4x4x4col.jsp”
       8. “4x8col.jsp”
       9. “6x3x3col.jsp”
       10. “6x6col.jsp”
       11. “8x4col.jsp”
       12. “9x3col.jsp”
27. The files associated with the sightly components (package version 1.4 and later) within the folder /apps/[new_project]/components/ do not need to be modified.
28. The “componentGroup” property of each node can be changed in order to be included within the same group as other components within your project.
    1. This is accomplished by selecting the component node within CRXDE Lite, and then double clicking on the componentGroup property and altering the text to reflect the desired group.
29. Edit the file /apps/[new_project]/components/page_responsive/headlibs.jsp if other clientlibs are needed.
30. Edit the file /apps/[new_project]/components/page_responsive/clientlibs.html if other clientlibs are needed.
31. Edit the file /apps/[new_project]/components/page_responsive/head.jsp by replacing the statement “<cq:includeClientLib categories=”apps.aem-prototypes”/>” with “<cq:includeClientLib categories=”apps.[new_Project]”/>”.
    1. Add the statement “<cq:includeClientLib categories=”apps.[new_project].main”/>” right after the statement “<cq:includeClientLib categories=”apps.[new_project]”/>”.
32. Edit the file /apps/[new_project]/components/page_responsive_sightly/head.html by replacing the statement “<meta data-sly-call=”${clientLib.all @ categories=’apps.aem-prototypes.main, apps.aem-prototypes, aem-prototypes-components’}” data-sly-unwrap />” with “<meta data-sly-call=”${clientLib.all @ categories=’apps.[new_project].main, apps.[new_project], [new_project]-components’}” data-sly-unwrap />”.
33. Copy the folder /apps/aem-prototypes/components/emulators to the folder /apps/[new_project]/components along with its contents.
    1. Skip step 33 if using the “No Emu” package version, or if the custom emulators are undesirable.
34. Create a new page in AEM for [new_project] using the page_responsive template. Further details on how to do this can be found here. This new page will henceforth be referred to as [new_page].
35. Return to CRXDE Lite.
36. For pages not using the page_responsive template:
    1. Copy and paste the /content/aem-prototypes/jcr:content/cq:responsive node into the /content/[new_page]/jcr:content node.
    2. Configure this node as needed. More information can be found here.
    3. Child pages will automatically inherit these responsive capabilities from its parent.
       1. If such inheritance is desirable:
          1. Use the page_responsive_child or page_responsive_child_sightly templates for child pages.
       2. In most cases, only the root page will need to be set up this way.
       3. There is practically no harm in configuring all child pages separately.
37. For the new page created in step 34:
    1. Select the /content/[new_page]/jcr:content node.
       1. Configure this node as needed. More information can be found here.
       2. Child pages will automatically inherit these responsive capabilities from its parent.
          1. If such inheritance is desirable:
             1. Use the page_responsive_child template for child pages.
          2. In most cases, only the root page will need to be set up this way.
          3. There is no harm in configuring all child pages separately.
38. For pages not using the templates using the page_responsive or page_responsive_sightly components:
    1. Add the following property to the /content/[new_page]/jcr:content node:
       1. Name: “cq:deviceGroups”.
       2. Type: “String[]”.
       3. Value: “/etc/mobile/groups/responsive”.
          1. Additional emulators can be added to this group. Information on how to accomplish this as well as for information on how to remove emulators from this group can be found here.
          2. The package comes with two custom emulators (phone and tablet). In order to use these, they must be added to the responsive mobile group.
       4. Note: This property can be copy and pasted from the /content/aem-prototypes/jcr:content node.
       5. Child pages will automatically inherit this group from its parent.
          1. If such inheritance is desirable:
             1. Use the page_responsive_child or page_responsive_child_sightly templates for child pages.
          2. In most cases, only the root page will need to be set up this way.
          3. There is no harm in configuring all child pages separately.
39. Open the new page.
40. Add and layout content as needed. More information can be found here and here.

In conclusion, you now have the necessary knowledge to experiment with and utilize this new and powerful feature of Adobe Experience Manager. You should now be able to add this functionality to an existing project, to a new project, or extend this project further. In a future article, we will discuss some helpful components and customizations that will enhance your experience when using this responsive layouting system. Subscribe to ensure you receive our follow-up articles in your inbox.