Successfully Manage Responsive 
Design Behaviors Using Adobe Experience 
Manager 
August 26, 2014
About Perficient 
Perficient is a leading information technology consulting firm serving clients throughout 
North America...
Perficient Profile 
• Founded in 1997 
• Public, NASDAQ: PRFT 
• 2013 revenue $373 million 
• Major market locations throu...
BUSINESS SOLUTIONS 
Business Intelligence 
Business Process Management 
Customer Experience and CRM 
Enterprise Performanc...
Speakers 
Madhu Gupta 
Technical 
Consultant 
As a technical consultant at Perficient’s Adobe web 
Content Management (EIS...
Session Agenda 
1.Overview 
2.The Challenge 
3.The Solution 
4.Demonstration 
5.Q&A
Overview 
From mobile browsers to netbooks and tablets, users are visiting your sites from an 
 Planning 
 Requirements ...
Overview 
The Problem - Multiple Devices With Multiple Screen Types And Sizes 
 Maintaining different versions of the cod...
Our Specific Challenge 
Our requirements stated that: 
 Determining which content 
should be displayed within a 
specific...
Solution 
Managing Responsive Content within AEM 
Components 
Allowing your content authors to manage which 
content is di...
Solution 
For every row, there are twelve zones within Bootstrap's responsive framework http://getbootstrap.com/css/ 
Colu...
Demonstration 
Region Blocks of Content 
Desktop Content Tablet Content Mobile and Other 
Device Content 
Should I display...
Demonstration 
Column Grid Control 
Desktop Content Tablet Content Mobile and Other 
Device Content 
Show this at these 
T...
Demo
How’d We Do It 
Region Component 
 Select title and background 
styles 
 Hide certain devices from the 
component config...
How’d We Do It 
Column Component 
 Select number of columns to display 
 Advanced options to hide certain 
devices for e...
Summary 
 Give authors the ability to choose which content is displayed within 
a given responsive breakpoint 
 Provide ...
As a reminder, please submit your 
questions in the chat box 
We will get to as many as possible
Daily unique content 
about content 
management, user 
experience, portals 
and other enterprise 
information technology 
...
Thank you for your participation 
today. 
Please fill out the survey at the close of this session.
Upcoming SlideShare
Loading in …5
×

Successfully Implement Responsive Design Behavior with Adobe Experience Manager

2,353 views

Published on

As customers demand access to information from devices like smartphones, tablets and traditional laptops or desktops, the need for responsive web design has become more critical than ever.

Marketers often race to implement responsive design, leaving web development departments faced with a complex, yet solvable, challenge. In this slideshare, we focus on how to effectively manage responsive design with Adobe Experience Manger.

Learn best practices and tips to support responsive design

See a demonstration of responsive design within a region component to hide and show blocks of content within a specific breakpoint, providing maximum responsive control of content for your marketers and web content managers

Through demonstration, view how a responsive column component works to allow your authors to define which column will display within a specific breakpoint, freeing your IT developers to develop new functionality

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,353
On SlideShare
0
From Embeds
0
Number of Embeds
179
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Successfully Implement Responsive Design Behavior with Adobe Experience Manager

  1. 1. Successfully Manage Responsive Design Behaviors Using Adobe Experience Manager August 26, 2014
  2. 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. 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. 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. 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. 6. Session Agenda 1.Overview 2.The Challenge 3.The Solution 4.Demonstration 5.Q&A
  7. 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. 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. 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. 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. 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. 12. Demonstration Region Blocks of Content Desktop Content Tablet Content Mobile and Other Device Content Should I display this at the Tablet Breakpoint?
  13. 13. Demonstration Column Grid Control Desktop Content Tablet Content Mobile and Other Device Content Show this at these Tablet Breakpoint?
  14. 14. Demo
  15. 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. 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. 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. 18. As a reminder, please submit your questions in the chat box We will get to as many as possible
  19. 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. 20. Thank you for your participation today. Please fill out the survey at the close of this session.

×