Understanding Responsive Layout

For an AEM site’s content author some of the day to day activities involve, creating a page, making changes to an existing page and publishing your changes to an external user. An external user could be accessing your organizations website from any device. It could be from a desktop, a tablet device or a mobile device. Content authors often need to reuse content across different devices. How many times have you had a web page look just fine on your desktop but go haywire on mobile? If your website isn’t optimized for every platform and device, you risk delivering an inconsistent online experience. With AEM sites, you can create responsive content for different devices and preview them with our “what you see is what you get” interface before pushing your changes live. In this video let me show you how to create responsive content using the page editors, layout mode and layout container. From the AEM homepage navigate to AEM site’s console and open the Weekend sample site. Let’s browse through the site’s content hierarchy to find a sample page. Select the page and click on the edit icon from top toolbar. You can now see the page open in edit mode.

Select the emulator option and you can notice the device groups like desktop, iPad, iPhone and other mobile devices added to the page editors screen. Also make a note of the scale that gets added right beneath the device group indicating various break points for each device group. When you’re in the emulator option, you also have an opportunity to alter content to your page from the side panel using the asset finder or component finder. You can either add a new component or edit an existing content but still preview the contents look and feel for different device groups. Let’s click on the content tree option and understand the component structure for our page. Note that under the pages route node, we have a carousel component with an image component embedded, a layout container containing a title and a text component. Click on the text component and let’s add another image component to the layout container component.

Using the asset finder, let’s add an asset to this image component.

Now let’s uncheck the emulator option from your page editor UI and switch the page mode from edit to layout. You can notice the toggle side panel is no longer available for content authors to add new content but the emulator is still available. AEM allows you to have a responsive layout for your pages by using the layout container component. The layout container provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout, according to the device or window size and format. The component is used in conjunction with the layout mode which allows you to create and edit responsive design dependent on the device. Click on the carousel image component and you do not see any additional component configurations available in the layout mode. The carousel component is not part of a layout container component. Click on the title component and you can now see a component settings option available when you are in the layout mode. When we check the content tree for our page we notice that the text and title component was embedded inside a layout container, enabling additional configuration when you are in the layout mode. Also you can resize a component using the blue dot or the resize handles. You can also see additional component configuration in the layout mode. If you want to know the pattern container of a specific component you can select the pattern icon for the component and it highlights the pattern container. If you would like to move your component to the next line, you can use the float to a new line option. You can also decide not to show individual components for a specific device group using the hide icon. Let’s do a quick recap. When a page is in the layout mode, components that are contained inside a layout container can be resized. AEM allows you to have a responsive layout for your pages by using the layout container component. For desktop view port, let’s resize the image and center align it.

Let’s select the iPad device group and change the screen layout from portrait to landscape using the rotate device option. You can also select a specific screen size using the device selector dropdown. Let’s pick a mobile device and click on the image component and hide it. This change is applied only for the device group in which you have decided to hide the component and will still be visible for other device groups. You can also unhide the component by selecting the layout container and it displays the hidden components and indicate the number of hidden components inside this container. Select the show hidden components option and it displays the hidden components and highlights them. You can unhide the components by selecting them individually by clicking on the unhide icon for each component or you can use the restore all option. Let’s keep the image component hidden for mobile devices and do a quick preview of our responsive page. Click on the preview option and then click through the device groups to preview the responsive content changes made to our AEM site’s page. AEM also provides an in-place, responsive layout editing option for components in the edit mode. Select a component and you should be able to see the layout option listed as one of the component configurations available. Click on the layout option and you can notice the layout mode component configurations are available within the edit mode. I hope this video helps you to create responsive content for your site pages using the page editors layout mode. -