Damien Antipa & Gabriel Walt - Adobe
In this session we will demonstrate how to configure a website project with the new capabilities of AEM 6.1. We show the benefit with the new integrated device simulator. How to leverage breakpoints and the new AEM grid system to create a new author experience with an elastic and responsive layout. We will discuss new tooling for web designers and component developers as well as new opportunities with the grid system.
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