Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AEM Responsive Grid

17,510 views

Published on

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

Published in: Software
  • Adobe Experience platform was one of the biggest announced made by Adobe at their Adobe Summit event. Adobe delivered by revealing the details behind their long awaited Experience Platform (AEP). http://bit.ly/2YcVQr4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Does AEM 6.2 or 6.3 support RESS type device sensing and delivery of optimized code/experience based on device type? As in a lighter set of content and components to mobile and heavier more immersive set of components to desktop?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

AEM Responsive Grid

  1. 1. 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
  2. 2. 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
  3. 3. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Overview
  4. 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. 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
  6. 6. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Edit Responsive Layouts
  7. 7. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Layouting
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Hiding 1 2 3 4 5 6 1 3 5 4 4 5 6
  13. 13. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Setup Responsive Editing
  14. 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. 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. 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. 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. 18. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Develop for the Grid
  19. 19. 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); } }
  20. 20. 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
  21. 21. 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>
  22. 22. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive The Grid Markup
  23. 23. 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>
  24. 24. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Floating Rendering
  25. 25. 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); } }
  26. 26. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Leverage Breakpoints
  27. 27. 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
  28. 28. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Custom Behaviour
  29. 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. 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

×