This presentation explains in detail the new responsive grid feature of Adobe Experience Manager 6.1.
* Overview: Why editing responsive layouts matters for authors.
* Edit Responsive Layouts: How authors create responsive layouts in the touch-enabled UI.
* Setup Responsive Editing: Checklist for activating this feature on an AEM site.
* Develop for the Grid: Understand the technical details of how the feature works.
Slides first presented at Connect Web Experience (June 24/25 2015):
* http://www.connectcon.ch/
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/author/page-authoring/responsive-layout.html
* http://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-layouting.html
4. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Adaptive vs Responsive
Adaptive
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
5. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Making Content Responsive
Traditional 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
14. 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"]
15. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
1. Enable the Layouting Mode
Specify 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
16. 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
17. 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

18. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Develop for the Grid
29. 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
30. 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