responsive websites & grid-based layouts in adobe experience manager 6.1

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


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



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



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



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



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>



The Grid Markup



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>



Floating Rendering



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



Leverage Breakpoints



<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



Custom Behaviour



<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


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


http://adobe-marketing-cloud.github.io/aem-responsivegrid/

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


responsive websites & grid-based layouts in adobe experience manager 6.1

Software

adobe experience manager

gabrielwalt https

responsive layouts

product manager twitter

content responsive layout

setup responsive editing

dierent devices responsive

content node