Responsive Websites and Grid-Based Layouts by Gabriel Walt

Adobe Experience ManagerAdobe Experience Manager
Adobe Experience Manager 6.1:
Responsive Websites &
Grid-Based Layouts
Damien Antipa, Senior UX Engineer
Twitter: @visiongeist
Gabriel Walt, Product Manager
Twitter: @gabrielwalt
https://www.slideshare.net/GabrielWalt/aem-responsive

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

Overview

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: Diﬀerent URLs for diﬀerent 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

Making Content Responsive
Traditional workflow
• A designer mocks the diﬀerent 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

Edit Responsive Layouts

Layouting

Floating
1 2 3 4
5 6 7 8
1 2
3 4
3 4
1
2
2

Floating
1 2 3 4
5
6 7 8
1
2
3
1 2
3
4 5
6

Breaking
1
2
3
1 2 3 4
5 6 7 8
1 2
3 4
5 6

Nesting
1
2
3
4
5
6
1 2 3
5
4
1
2
3
4

Hiding
1
2
3
4
5
6
1 3
5
4
4
5
6

Setup Responsive Editing

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"]

1. Enable the Layouting Mode
Specify the breakpoints
➔ On jcr:content node of the site root, add following node structure: 
cq:responsive[nt:unstructured] 
breakpoints[nt:unstructured] 
phone[nt:unstructured] 
@title="Smaller Screen" 
@width=650 
tablet[nt:unstructured] 
@title="Tablet" 
@width=1200

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

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

Develop for the Grid

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);
}
}

Persistence in JCR Content
The component size is saved on the resource node 
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

The Grid Markup
<div class="aem-Grid aem-Grid--12">
<div class="aem-GridColumn aem-GridColumn—default--2">
Col 1
</div>
Col 2
</div>
Col 3
</div>
</div>

The Grid Markup

Floating Rendering
Col 1
</div>
Col 2
</div>
Col 3
</div>
Col 4
</div>
</div>

Floating Rendering

Leverage Breakpoints
<div class="aem-GridColumn
aem-GridColumn—default--2
aem-GridColumn—phone--12">
Col 1
</div>
Col 2
</div>
Col 3
</div>
</div>
/*
grid.less
smaller screen breakpoint
*/
@media (max-width: 650px) {
.aem-Grid {
.generate-grid(phone,  
@max_col);
}
}

Leverage Breakpoints

aem-GridColumn—phone--hide">
Col 1
</div>
aem-GridColumn—default--4">
Col 2
</div>
aem-GridColumn—phone--newline">
Col 3
</div>
</div>
➔ hide item
➔ force new line
Custom Behaviour

Custom Behaviour

aem-GridColumn--default--4">
Parent Col 2
</div>
</div>
Child Col 1
</div>
Child Col 1
</div>
</div>
</div>
Nested Grid
➔ The grid system is global
➔ AEM will take care of
inheriting the width

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

Responsive Websites and Grid-Based Layouts by Gabriel Walt

Responsive Websites and Grid-Based Layouts by Gabriel Walt

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Responsive Websites and Grid-Based Layouts by Gabriel Walt

Similar to Responsive Websites and Grid-Based Layouts by Gabriel Walt (20)

More from AEM HUB

More from AEM HUB (20)

Recently uploaded

Recently uploaded (20)

Responsive Websites and Grid-Based Layouts by Gabriel Walt