![Page 1: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/1.jpg)
Adobe Experience ManagerAdobe Experience Manager
Adobe Experience Manager 6.1: Responsive Websites & Grid-Based LayoutsDamien Antipa, Senior UX Engineer Twitter: @visiongeist
Gabriel Walt, Product Manager Twitter: @gabrielwalt
https://www.slideshare.net/GabrielWalt/aem-responsive
![Page 2: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/2.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Agenda
Responsive Websites & Grid-Based Layouts:
1. Overview 2. Edit Responsive Layouts 3. Setup Responsive Editing 4. Develop for the Grid
![Page 3: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/3.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Overview
![Page 4: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/4.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Adaptive vs ResponsiveAdaptive The server response will change to adapt to a defined set of screen size. ➔ Server-side device detection through a database of user-agents ➔ Consequence: Different URLs for different devices
Responsive The design will fluidly change and respond to fit any screen size. ➔ Client-side feature detection through media queries ➔ Consequence: Same content delivered to all visitors
![Page 5: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/5.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Making Content ResponsiveTraditional workflow • A designer mocks the different breakpoints • A developer implements the mocks
for a specific template • The author picks that template
and fills the content
Responsive layout editing • The author fills the content • The author can adapt the layout
![Page 6: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/6.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Edit Responsive Layouts
![Page 7: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/7.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Layouting
![Page 8: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/8.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Floating
1 2 3 4
5 6 7 8
1 2
3 4
3 4
1
2
2
![Page 9: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/9.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Floating
1 2 3 4
5
6 7 8
1
2
3
1 2
3
4 5
6
![Page 10: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/10.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Breaking
1
2
3
1 2 3 4
5 6 7 8
1 2
3 4
5 6
![Page 11: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/11.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Nesting
1
2
3
4
5
6
1 2 3
5
4
1
2
3
4
![Page 12: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/12.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Hiding
1
2
3
4
5
6
1 3
5
4
4
5
6
![Page 13: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/13.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Setup Responsive Editing
![Page 14: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/14.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
0. Enable the Responsive Emulator
Register page components for simulation ➔ List the sling:resourceType of your pages in an OSGi config for com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider
Specify the device groups ➔ On jcr:content node of the site root, add the following property:jcr:content[nt:unstructured] @cq:deviceGroups=["/etc/mobile/groups/responsive"]
![Page 15: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/15.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
1. Enable the Layouting ModeSpecify the breakpoints ➔ On jcr:content node of the site root, add following node structure:jcr:content[nt:unstructured] cq:responsive[nt:unstructured] breakpoints[nt:unstructured] phone[nt:unstructured] @title="Smaller Screen" @width=650 tablet[nt:unstructured] @title="Tablet" @width=1200
![Page 16: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/16.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
2. Enable the Responsive Grid
Use the responsive paragraph system ➔ Replace the parsys with the responsive one:@resourceType="wcm/foundation/components/responsivegrid"
Include the responsive stylesheet ➔ Copy the following file into your client library:/etc/designs/geometrixx-media/clientlibs/css/grid.less
➔ Adapt the breakpoints and the number of columns to your needs
![Page 17: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/17.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
3. Configure the Parsys Design Mode
Enable Layout Nesting ➔ In the General group of allowed components:
Authorize the Layout Container component
Define the number of columns ➔ If your parsys doesn’t exactly take 12 columns:
Set a value for the Columns input field
![Page 18: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/18.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Develop for the Grid
![Page 19: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/19.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
A Project’s Grid Configuration@import (once) "/etc/clientlibs/wcm/foundation/grid/grid_base.less";
/* maximum amount of grid cells to be provided */ @max_col: 12;
.aem-Grid { .generate-grid(default, @max_col); }
/* smaller screen (phone) breakpoint */ @media (max-width: 650px) { .aem-Grid { .generate-grid(phone, @max_col); } }
/* tablet breakpoint */ @media (min-width: 651px) and (max-width: 1200px) { .aem-Grid { .generate-grid(tablet, @max_col); } }
![Page 20: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/20.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Persistence in JCR Content
The component size is saved on the resource node jcr:content[nt:unstructured] parsys[nt:unstructured] image[cq:Component] @sling:resourceType="wcm/foundation/components/image" ... cq:responsive[nt:unstructured] default[nt:unstructured] @width=4 phone[nt:unstructured] @width=12
![Page 21: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/21.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
The Grid Markup<div class="aem-Grid aem-Grid--12"> <div class="aem-GridColumn aem-GridColumn—default--2"> Col 1 </div> <div class="aem-GridColumn aem-GridColumn—default--8"> Col 2 </div> <div class="aem-GridColumn aem-GridColumn—default--2"> Col 3 </div> </div>
![Page 22: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/22.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
The Grid Markup
![Page 23: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/23.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Floating Rendering<div class="aem-Grid aem-Grid--12"> <div class="aem-GridColumn aem-GridColumn—default--2"> Col 1 </div> <div class="aem-GridColumn aem-GridColumn—default--8"> Col 2 </div> <div class="aem-GridColumn aem-GridColumn—default--2"> Col 3 </div> <div class="aem-GridColumn aem-GridColumn—default--6"> Col 4 </div> </div>
![Page 24: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/24.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Floating Rendering
![Page 25: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/25.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Leverage Breakpoints<div class="aem-Grid aem-Grid--12"> <div class="aem-GridColumn aem-GridColumn—default--2 aem-GridColumn—phone--12"> Col 1 </div> <div class="aem-GridColumn aem-GridColumn—default--8 aem-GridColumn—phone--6"> Col 2 </div> <div class="aem-GridColumn aem-GridColumn—default--2 aem-GridColumn—phone--6"> Col 3 </div> </div>
/* grid.less smaller screen breakpoint */ @media (max-width: 650px) { .aem-Grid { .generate-grid(phone, @max_col); } }
![Page 26: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/26.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Leverage Breakpoints
![Page 27: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/27.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
<div class="aem-Grid aem-Grid--12"> <div class="aem-GridColumn aem-GridColumn—default--4 aem-GridColumn—phone--hide"> Col 1 </div> <div class="aem-GridColumn aem-GridColumn—default--4"> Col 2 </div> <div class="aem-GridColumn aem-GridColumn—default--4 aem-GridColumn—phone--newline"> Col 3 </div> </div>
➔ hide item
➔ force new line
Custom Behaviour
![Page 28: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/28.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Custom Behaviour
![Page 29: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/29.jpg)
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
<div class="aem-Grid aem-Grid--12">
<div class="aem-GridColumn aem-GridColumn--default--4"> Parent Col 2 </div> </div>
<div class="aem-GridColumn aem-GridColumn--default--8"> <div class="aem-Grid aem-Grid--8"> <div class="aem-GridColumn aem-GridColumn--default--4"> Child Col 1 </div> <div class="aem-GridColumn aem-GridColumn--default--4"> Child Col 1 </div> </div> </div>
Nested Grid
➔ The grid system is global ➔ AEM will take care of
inheriting the width
![Page 30: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/30.jpg)
Adobe Experience Manager
Thanks!Damien Antipa, Senior UX Engineer Twitter: @visiongeist
Gabriel Walt, Product Manager Twitter: @gabrielwalt
Markup example for front-end developers: http://adobe-marketing-cloud.github.io/aem-responsivegrid/
Documentation Links http://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-layouting.html http://docs.adobe.com/docs/en/aem/6-1/author/page-authoring/responsive-layout.html
https://www.slideshare.net/GabrielWalt/aem-responsive
![Page 31: Responsive Websites & Grid-Based Layouts in Adobe Experience Manager 6.1](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c5aad4bb61eb541f8b4672/html5/thumbnails/31.jpg)