SlideShare a Scribd company logo
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
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Overview
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

Recommended for you

Booting up with polymer
Booting up with polymerBooting up with polymer
Booting up with polymer

This document discusses using Polymer to build web component-based applications. It begins by explaining what web components are and how browsers support them through standards like custom elements, HTML imports and templates. It then introduces Polymer as a library that helps build web components and provides ready-made reusable components. The document outlines how to build full-stack apps with Polymer, including using Spring Boot on the backend to provide features like authentication. It also covers tools like Vulcanize, Crisper and build optimizations to improve performance of Polymer apps.

polymerhtml5spring boot
SPA Editing with Sling to the rescue - adaptTo() 2021
SPA Editing with Sling to the rescue - adaptTo() 2021 SPA Editing with Sling to the rescue - adaptTo() 2021
SPA Editing with Sling to the rescue - adaptTo() 2021

1. The document discusses in-context editing for single page applications in AEM. 2. It describes how authors can preview and edit content directly within the context of a SPA without reloading pages. 3. The key aspects covered are loading the SPA experience in the editor, recognizing editable content items, and offering content building blocks for authors to insert content with layout.

spa editingadapttoopen source
Building a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / SpringBuilding a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / Spring

Polymer is the latest web framework out of Google. Designed completely around the emerging Web Components standards, it has the lofty goal of making it easy to build apps based on these low level primitives. Along with Polymer comes a new set of Elements (buttons, dialog boxes and such) based on the ideas of "Material Design". These technologies together make it easy to build responsive, componentized "Single Page" web applications that work for browsers on PCs or mobile devices. But what about the backend, and how do we make these apps secure? In this talk Scott Deeg will take you through an introduction to Polmyer and its related technologies, and then through the build out of a full blown cloud based app with a secure, ReSTful backend based on Spring ReST, Spring Cloud, and Spring Security and using Thymeleaf for backend rendering jobs. At the end he will show the principles applied in a tool he's currently building. The talk will be mainly code walk through and demo, and assumes familiarity with Java/Spring and JavaScript.

polymerwebcomponentsmicroservices
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
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Edit Responsive Layouts
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Layouting
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

Recommended for you

Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack

This document discusses using the Play Framework for web application development on Google App Engine (GAE). It provides an overview of Play and GAE, how they work together, and some tradeoffs. Specifically, it covers how Play abstracts away the GAE infrastructure, limitations of the GAE sandbox environment, options for running Play 2 applications on GAE including using a WAR file or custom runtime, and the pros and cons of the Play Framework on GAE approach.

play frameworkcloud computingweb development
Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application Development

- Front-end frameworks like Angular and React use component-based architectures, with components having life-cycle hooks and handling their own state. - Both support data binding, but Angular uses two-way binding while React uses one-way binding. Angular also supports mutable data through services. - Both support routing, with Angular having a single built-in router and React having multiple options through libraries like React Router. - Other similarities include support for styling components and testing with libraries like Jasmine, though React testing approaches vary more between projects.

 
by FITC
web designweb developmentweb unleashed 2017
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps

Presented at Web Unleashed 2017 More info at www.fitc.ca/webu Overview Most people feel a lot less restricted to open up a browser in lieu of installing a mobile app. The convenience, security and simplicity of just typing a URL into an address bar is a powerful advantage of the web, and Progressive Web Apps (PWA) combine this with the feel of native applications. In short, PWAs are applications that use modern web capabilities to provide a user experience similar to that of mobile and native apps. This presentation will go over how you can add a number of progressive aspects to your application including faster load times, offline support and the ability to install to your mobile home screen. Objective Explain the concept of Progressive Web Apps, how to build one and how to improve apps built with React, Angular or any other framework without adding too much complexity. Target Audience Front-end developers Assumed Audience Knowledge Some understanding of building web applications with a JavaScript framework or library Five Things Audience Members Will Learn What exactly is a Progressive Web App How to use Lighthouse to test and improve your webpage Improve app loading times with a Service Worker App Shell Use a App Shell + Dynamic Content model to allow for offline support Add a web app manifest file to allow for installing an app to a mobile home screen

 
by FITC
web application frameworksweb application developmentweb development
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
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
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
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Hiding
1
2
3
4
5
6
1 3
5
4
4
5
6

Recommended for you

Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEM

Presented at adaptTo() 2015 in Berlin. Single-page apps (SPA) have reached critical mass, widely regarded as the most effective pattern for building seamless experiences with web technology. This session will dive into bringing this paradigm to an AEM instance near you - including tips and tricks for leveraging AngularJS to optimize your SPA development, and examples of bringing your content to the app store with Adobe’s PhoneGap.

cordovacqspa
AEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & FeaturesAEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features

This document discusses various features and customization options for the AEM 6.0 user interface. It covers the Sling resource merger which allows overlaying and customizing nodes, adding and hiding links from the left rail, adding buttons to the console, modifying search filters, using metadata properties as tags, and customizing asset editor metadata templates. It provides examples of how to customize and overlay nodes in the /libs path with custom configurations in the /apps path. The document also includes some additional useful information and links for AEM UI customization.

aem 6 customizationaem 6.0cq
Adobe Experience Manager - 6th Edition by Cedric Huesler
Adobe Experience Manager - 6th Edition by Cedric HueslerAdobe Experience Manager - 6th Edition by Cedric Huesler
Adobe Experience Manager - 6th Edition by Cedric Huesler

This document summarizes a presentation given by Cedric Huesler on Adobe Experience Manager (AEM) 6th edition at the AEMHub London conference in April 2014. It includes information on the AEM release update process, moving from MongoDB to Tar/Mongo, and the AEM component model including cq:Component, Dialog, Code, ClientLibs, and Analytics.

Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Setup Responsive Editing
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"]
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
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

Recommended for you

Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web

This document discusses using web standards to create interactive data visualizations for the web. It provides an overview of the JavaScript InfoVis Toolkit, which allows creating multiple graph and tree layouts using web standards and JavaScript. It also discusses upcoming improvements to browser engines and JavaScript that will further improve performance of interactive visualizations. Finally, it introduces WebGL and V8-GL as emerging web standards that bring hardware-accelerated 3D graphics to the web through JavaScript.

visualizationjavascriptinformation visualization
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb

This document discusses how web design firms can compete with internal GIS teams by providing web-based GIS (WebGIS) applications. It notes that WebGIS requires learning new tools like JavaScript, AJAX, and RESTful services. To protect their work, internal GIS teams need to learn these new web technologies and prioritize usability over features to create responsive applications. The document advocates for an iterative development process with a focus on performance and usability testing.

geowebusabilityearth
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications

HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.

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

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

Recommended for you

JCR and Sling Quick Dive
JCR and Sling Quick DiveJCR and Sling Quick Dive
JCR and Sling Quick Dive

The document discusses Java Content Repository (JCR) and Sling, describing them as standards and frameworks that provide content-centric interfaces and services for content management applications. JCR defines a content model and Java API for storing and managing diverse content. Sling is a scriptable application layer built on JCR that processes HTTP requests in a RESTful manner and allows developing applications using OSGi bundles and scripting languages. It also provides examples of using Sling with CURL to create and retrieve content from a repository.

slingrestjcr
AEM Evernote Sync
AEM Evernote SyncAEM Evernote Sync
AEM Evernote Sync

The document discusses integrating Evernote content into Adobe Experience Manager (AEM). It describes creating an OSGi bundle that syncs notes from Evernote into AEM assets on a scheduled basis. An Evernote component is created to display the imported assets in AEM's asset finder and provide a note viewer. Future enhancements discussed include support for multiple Evernote accounts, images, and component editing. The project aims to combine the collaboration benefits of Evernote with AEM's content presentation and management capabilities.

osgiaemevernote
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015

Presentation from Denver Open Source Users Group in February 2015. http://www.meetup.com/DOSUG1/events/219099019/ AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems. Finally, you'll learn about my experience developing several real-world applications using AngularJS, HTML5 and Bootstrap.

coffeescriptgrunthttp2
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>
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
The Grid Markup
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>
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Floating Rendering

Recommended for you

Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments

Bruce Lawson demos HTML5, especially forms and video element at Sheffield Speak The Web, 8 February 2010

web standardshtml5video
Node.js to the rescue
Node.js to the rescueNode.js to the rescue
Node.js to the rescue

Being a WordPress developer means that our main programming language is PHP. Which works for building websites but not for running tasks. In this talk I will share my experience using Node.js as a platform to build on. Explaining why I have chosen for Node.js and show you how I used Node.js to build microservices that are supporting my WordPress projects.

node.jswordcampnorrköping
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12

The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.

responsive designfluiduxmedia queries
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);
}
}
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Leverage Breakpoints
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
Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive
Custom Behaviour

Recommended for you

Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop

The document is a presentation on client side development in SharePoint using jQuery. It begins with introductions and an agenda. The agenda covers deploying and referencing scripts, a jQuery primer, debugging techniques, modifying default SharePoint forms, REST/CSOM/SPServices, third party libraries, and SharePoint hosted apps. It then discusses why client side development is useful and challenges like browser inconsistencies. Best practices covered include avoiding global variables and writing performant code. Various development tools are presented. Finally, a demo is shown of building a simple contract management solution using the techniques discussed.

client side devsharepointjquery
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox

A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/. Event page: https://www.facebook.com/events/296799847060237/

webdevuxresponsive web design
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012

The document is a presentation by Tom Carney about responsive web design. It discusses Carney's background in web development for over 10 years and experience with mobile and responsive design for 18 months. The presentation covers the introduction of responsive design, responsive design techniques like grids, media queries and plugins, transitioning websites to responsive design, responsive design workflows, and examples of responsive design. It addresses setting separate mobile sites versus responsive design and takes questions from the audience.

htmlcssresponsive web design
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
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
AEM responsive

More Related Content

What's hot

Extra aem development tools by Justin Edelson
Extra aem development tools by Justin EdelsonExtra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
AEM HUB
 
Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
Bojana Popovska
 
Building Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOSBuilding Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOS
FITC
 
Booting up with polymer
Booting up with polymerBooting up with polymer
Booting up with polymer
Marcus Hellberg
 
SPA Editing with Sling to the rescue - adaptTo() 2021
SPA Editing with Sling to the rescue - adaptTo() 2021 SPA Editing with Sling to the rescue - adaptTo() 2021
SPA Editing with Sling to the rescue - adaptTo() 2021
Hanish Bansal
 
Building a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / SpringBuilding a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / Spring
sdeeg
 
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
Marcin Stepien
 
Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application Development
FITC
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
FITC
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEM
rbl002
 
AEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & FeaturesAEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features
Abhinit Bhatnagar
 
Adobe Experience Manager - 6th Edition by Cedric Huesler
Adobe Experience Manager - 6th Edition by Cedric HueslerAdobe Experience Manager - 6th Edition by Cedric Huesler
Adobe Experience Manager - 6th Edition by Cedric Huesler
AEM HUB
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
philogb
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
Dave Bouwman
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
James Pearce
 
JCR and Sling Quick Dive
JCR and Sling Quick DiveJCR and Sling Quick Dive
JCR and Sling Quick Dive
Paolo Mottadelli
 
AEM Evernote Sync
AEM Evernote SyncAEM Evernote Sync
AEM Evernote Sync
Kevin Nennig
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
guestd427df
 
Node.js to the rescue
Node.js to the rescueNode.js to the rescue
Node.js to the rescue
Marko Heijnen
 

What's hot (20)

Extra aem development tools by Justin Edelson
Extra aem development tools by Justin EdelsonExtra aem development tools by Justin Edelson
Extra aem development tools by Justin Edelson
 
Dynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEMDynamic components using SPA concepts in AEM
Dynamic components using SPA concepts in AEM
 
Building Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOSBuilding Progressive Web Apps for Android and iOS
Building Progressive Web Apps for Android and iOS
 
Booting up with polymer
Booting up with polymerBooting up with polymer
Booting up with polymer
 
SPA Editing with Sling to the rescue - adaptTo() 2021
SPA Editing with Sling to the rescue - adaptTo() 2021 SPA Editing with Sling to the rescue - adaptTo() 2021
SPA Editing with Sling to the rescue - adaptTo() 2021
 
Building a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / SpringBuilding a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / Spring
 
Play Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
 
Angular vs React for Web Application Development
Angular vs React for Web Application DevelopmentAngular vs React for Web Application Development
Angular vs React for Web Application Development
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEM
 
AEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & FeaturesAEM 6.0 - Author UI Customization & Features
AEM 6.0 - Author UI Customization & Features
 
Adobe Experience Manager - 6th Edition by Cedric Huesler
Adobe Experience Manager - 6th Edition by Cedric HueslerAdobe Experience Manager - 6th Edition by Cedric Huesler
Adobe Experience Manager - 6th Edition by Cedric Huesler
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
 
JCR and Sling Quick Dive
JCR and Sling Quick DiveJCR and Sling Quick Dive
JCR and Sling Quick Dive
 
AEM Evernote Sync
AEM Evernote SyncAEM Evernote Sync
AEM Evernote Sync
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
Node.js to the rescue
Node.js to the rescueNode.js to the rescue
Node.js to the rescue
 

Similar to AEM responsive

Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
touchtitans
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
Wojtek Zając
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
performance optimization: UI
performance optimization: UIperformance optimization: UI
performance optimization: UI
晓东 杜
 
AEM target Integration
AEM target IntegrationAEM target Integration
AEM target Integration
Kanika Gera
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
Christopher Schmitt
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
Timothy Oxley
 
UI Customization in AEM 6.0
UI Customization in AEM 6.0UI Customization in AEM 6.0
UI Customization in AEM 6.0
Gilles Knobloch
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
User interface customization for aem6 circuit
User interface customization for aem6 circuitUser interface customization for aem6 circuit
User interface customization for aem6 circuit
Damien Antipa
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...
Andrei Sebastian Cîmpean
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
Bramus Van Damme
 
Responsive Design from problem to production
Responsive Design from problem to productionResponsive Design from problem to production
Responsive Design from problem to production
David Douglas
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and how
Riza Fahmi
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
Tech in Asia ID
 

Similar to AEM responsive (20)

Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
performance optimization: UI
performance optimization: UIperformance optimization: UI
performance optimization: UI
 
AEM target Integration
AEM target IntegrationAEM target Integration
AEM target Integration
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
UI Customization in AEM 6.0
UI Customization in AEM 6.0UI Customization in AEM 6.0
UI Customization in AEM 6.0
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
User interface customization for aem6 circuit
User interface customization for aem6 circuitUser interface customization for aem6 circuit
User interface customization for aem6 circuit
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
 
Responsive Design from problem to production
Responsive Design from problem to productionResponsive Design from problem to production
Responsive Design from problem to production
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and how
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
 

Recently uploaded

dachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdfdachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdf
DNUG e.V.
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
karim wahed
 
dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
DNUG e.V.
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
sheqnetworkmarketing
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
karim wahed
 
WEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service ProvidersWEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service Providers
Severalnines
 
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
Ortus Solutions, Corp
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
kalichargn70th171
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
e-Definers Technology
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
akshesh doshi
 
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple StepsSeamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Estuary Flow
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
confluent
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
avufu
 
React Native vs Flutter - SSTech System
React Native vs Flutter  - SSTech SystemReact Native vs Flutter  - SSTech System
React Native vs Flutter - SSTech System
SSTech System
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Softwares
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
AUGNYC
 

Recently uploaded (20)

dachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdfdachnug51 - All you ever wanted to know about domino licensing.pdf
dachnug51 - All you ever wanted to know about domino licensing.pdf
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
 
dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
 
WEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service ProvidersWEBINAR SLIDES: CCX for Cloud Service Providers
WEBINAR SLIDES: CCX for Cloud Service Providers
 
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
Abortion pills in Fujairah *((+971588192166*)☎️)¥) **Effective Abortion Pills...
 
How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
 
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple StepsSeamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
Seamless PostgreSQL to Snowflake Data Transfer in 8 Simple Steps
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
 
React Native vs Flutter - SSTech System
React Native vs Flutter  - SSTech SystemReact Native vs Flutter  - SSTech System
React Native vs Flutter - SSTech System
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
 

AEM responsive

  • 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. 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. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Overview
  • 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
  • 6. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Edit Responsive Layouts
  • 7. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Layouting
  • 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. 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. 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. 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. 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. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Setup Responsive Editing
  • 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
  • 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. 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. 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. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive The Grid Markup
  • 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. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Floating Rendering
  • 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. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Leverage Breakpoints
  • 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. Adobe Experience Manager https://www.slideshare.net/GabrielWalt/aem-responsive Custom Behaviour
  • 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