This document discusses how to manage responsive design behaviors using Adobe Experience Manager. It describes the challenge of displaying content across different devices which may have varying screen sizes and resolutions. The solution presented allows content authors to determine which content is displayed at specific breakpoints and manage the grid layout. It involves building components that use listeners and logic to dynamically handle the display of regions and columns based on the targeted device or screen size. The demonstration shows how authors can control responsive behavior through the new components.

1. Successfully Manage Responsive
Design Behaviors Using Adobe Experience
Manager
August 26, 2014

2. About Perficient
Perficient is a leading information technology consulting firm serving clients throughout
North America.
We help clients implement business-driven technology solutions that integrate business
processes, improve worker productivity, increase customer loyalty and create a more agile
enterprise to better respond to new business opportunities.

3. Perficient Profile
• Founded in 1997
• Public, NASDAQ: PRFT
• 2013 revenue $373 million
• Major market locations throughout North America
• Atlanta, Boston, Charlotte, Chicago, Cincinnati, Columbus,
Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis,
Los Angeles, Minneapolis, New Orleans, New York City,
Northern California, Philadelphia, Southern California,
St. Louis, Toronto and Washington, D.C.
• Global delivery centers in China, Europe and India
• >2,100 colleagues
• Dedicated solution practices
• ~85% repeat business rate
• Alliance partnerships with major technology vendors
• Multiple vendor/industry technology and growth awards

4. BUSINESS SOLUTIONS
Business Intelligence
Business Process Management
Customer Experience and CRM
Enterprise Performance Management
Enterprise Resource Planning
Experience Design (XD)
Management Consulting
Our Solutions Expertise
TECHNOLOGY SOLUTIONS
Business Integration/SOA
Cloud Services
Commerce
Content Management
Custom Application Development
Education
Information Management
Mobile Platforms
Platform Integration
Portal & Social

5. Speakers
Madhu Gupta
Technical
Consultant
As a technical consultant at Perficient’s Adobe web
Content Management (EIS-WCM) practice, Madhu Gupta
has helped clients meet their needs by designing content
management solution and developing the solution at its
best and easy to use.
Madhu have extensive knowledge in Adobe AEM
platform and is a good team player with the ability to lead
a development team towards a success.
Robert Sumner
Director,
Adobe Digital Marketing Practice
Robert Sumner manages web content management client
projects, focused specifically on Adobe technologies,
providing strategic consulting, business planning and sales
strategy development.
In addition to his WCM expertise, Robert has more than 16
years of experience including:
• Enterprise content management and portal technology
delivery initiatives
• Deep expertise in web-related technologies, knowledge
management, mentoring and support

6. Session Agenda
1.Overview
2.The Challenge
3.The Solution
4.Demonstration
5.Q&A

7. Overview
From mobile browsers to netbooks and tablets, users are visiting your sites from an
 Planning
 Requirements
 Design
 Implementation
 Deployment
 Testing
increasing array of devices and browsers.
“Day by day, the number of devices, platforms, and browsers that
need to work with your site grows. Responsive web design
represents a fundamental shift in how we’ll build websites for the
decade to come.” – Jeffrey Veen

8. Overview
The Problem - Multiple Devices With Multiple Screen Types And Sizes
 Maintaining different versions of the code for
each platform
 Changing font sizes to maintain legibility on
different screens
 Loading smaller assets for devices that
cannot accommodate large assets
 Adjusting multi-column layouts to single
columns to avoid columns that are too
narrow
 Responsive design frameworks have
helped solve this riddle…..BUT

9. Our Specific Challenge
Our requirements stated that:
 Determining which content
should be displayed within a
specific block or region.
 Allowing an author to choose
which content blocks to remove
from a certain breakpoint
 Allowing authors to manage the
grid layout within body content
areas where they have
authorization (truly flexible
templates)
 Offer a series of pre-defined
responsive behaviors for grid
layout on a page

10. Solution
Managing Responsive Content within AEM
Components
Allowing your content authors to manage which
content is displayed at certain breakpoints
within a responsive framework.

11. Solution
For every row, there are twelve zones within Bootstrap's responsive framework http://getbootstrap.com/css/
Column 3
(offset 5,
colspan 2)
Column 1
(no offset,
colspan 2)
Column 2
(no offset,
colspan 2)
<di v>
<ul >
#t hi s i s t he l i ne of code f or col umn 1
<l i cl ass=" vi si bl e- md vi si bl e- s vi si bl e- d vi si bl e- l g col - md- 2 col - s- 2 col - d- of f set - 1
col - d- 3 col - l g- of f set - 1 col - l g- 3" >
<cq: i ncl ude pat h=" UI D1" r esour ceType=" f oundat i on/ component s/ par sys" / >
</ l i >
#t hi s i s t he l i ne of code f or col umn 2
<l i cl ass=" vi si bl e- md vi si bl e- s vi si bl e- d vi si bl e- l g col - md- 2 col - s- 2 col - d- of f set - 2
col - d- 2 col - l g- 3" >
<cq: i ncl ude pat h=" UI D2"
r esour ceType=" f oundat i on/ component s/ par sys" / >
</ l i >
#t hi s i s t he l i ne of code f or col umn 3
<l i cl ass=" vi si bl e- md vi si bl e- s vi si bl e- d vi si bl e- l g col - md- of f set - 5 col - md- 2 col - s-of
f set - 5 col - s- 2 col - d- of f set - 1 col - d- 2 col - l g- of f set - 2 col - l g- 2" >
<cq: i ncl ude pat h=" UI D3"
r esour ceType=" f oundat i on/ component s/ par sys" / >
</ l i >
</ ul >
</ di v>
Presets Advanced Column 1 Column 2 Column 3
Column Span 2
Offset 0
Visible x (please check this if this column is visible in this
breakpoint
Mobile Break Point
Column Span 3
Offset 1
Visible x (please check this if this column is visible in this
breakpoint
Tablet Break Point
Column Span 2
Offset 0
Visible x (please check this if this column is visible in this
breakpoint
Desktop Break Point
Column Span 3
Offset 1
Visible x (please check this if this column is visible in this
breakpoint
Widescreen Break Point
1 2 3 4 5 6 7 8 9 10 11 12
Column 1
(offset 1, colspan 3)
Column 2
(offset 2,
colspan 2)
Desktop
(d)
Column 1
(no offset,
colspan 2)
Column 2
(no offset,
colspan 2)
Mobile
(md)
Column 1
(offset 1, colspan 3)
Column 2
(no offset, colspan 3)
Widescreen
(lg)
Column 3
(offset 1,
colspan 2)
Column 3
(offset 2,
colspan 2)
Rendered code that I believe will represent the above
Tablet
(s)
Column 3
(offset 2,
colspan 2)

12. Demonstration
Region Blocks of Content
Desktop Content Tablet Content Mobile and Other
Device Content
Should I display this at the Tablet Breakpoint?

13. Demonstration
Column Grid Control
Desktop Content Tablet Content Mobile and Other
Device Content
Show this at these
Tablet Breakpoint?

14. Demo

15. How’d We Do It
Region Component
 Select title and background
styles
 Hide certain devices from the
component configuration
 Logic is written to handle the
show/hide at different break
point for different devices

16. How’d We Do It
Column Component
 Select number of columns to display
 Advanced options to hide certain
devices for each column defined
 CQ listeners are being utilized in dialog
with extJS logic to dynamically
show/hide the tab for columns
 Hidetabs, managetabs, render
properties are utilized in CQ Dialog
 Different column tab have its own
listeners to show/hide in different device

17. Summary
 Give authors the ability to choose which content is displayed within
a given responsive breakpoint
 Provide authors with ability to determine which responsive grid
layout to use for a given page.
Pros Cons
More flexible templates More development work up front (if
not using bootstrap)
More flexibility within the current
Column Control
Component re-use for any all
customers (Assumes using bootstrap)

18. As a reminder, please submit your
questions in the chat box
We will get to as many as possible

19. Daily unique content
about content
management, user
experience, portals
and other enterprise
information technology
solutions across a
variety of industries.
Perficient.com/SocialMedia
Facebook.com/Perficient
Twitter.com/Perficient

20. Thank you for your participation
today.
Please fill out the survey at the close of this session.