Successfully Manage Responsive Design Behaviors Using Adobe Experience

ManagerAugust 26, 2014

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.

About Perficient

• 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

Perficient Profile

BUSINESS SOLUTIONSBusiness IntelligenceBusiness Process ManagementCustomer Experience and CRMEnterprise Performance ManagementEnterprise Resource PlanningExperience Design (XD)Management Consulting

TECHNOLOGY SOLUTIONSBusiness Integration/SOACloud ServicesCommerceContent ManagementCustom Application DevelopmentEducationInformation ManagementMobile PlatformsPlatform IntegrationPortal & Social

Our Solutions Expertise

Speakers

Madhu GuptaTechnical

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

Robert SumnerDirector,

Adobe Digital Marketing Practice

Session Agenda

1.Overview

2.The Challenge

3.The Solution

4.Demonstration

5.Q&A

Overview

Planning

Requirements

Design

Implementation

Deployment

Testing

From mobile browsers to netbooks and tablets, users are visiting your sites from an 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

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

Our Specific Challenge

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

Our requirements stated that:

Solution

Allowing your content authors to manage which content is displayed at certain breakpoints within a responsive framework.

Managing Responsive Content within AEM Components

Solution

<di v><ul >#t hi s i s t he l i ne of code f or col umn 1<l i c l ass=" vi s i bl e- md v i s i bl e- s v i s i bl e- d vi s i 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 c l ass=" vi s i bl e- md v i s i bl e- s v i s i bl e- d vi s i 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 c l ass=" vi s i bl e- md v i s i bl e- s v i s i bl e- d vi s i 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

2Column Span

0Offset

Visible x (please check this if this column is visible in this breakpoint

Mobile Break Point

3Column Span

1Offset

Visible x (please check this if this column is visible in this breakpoint

Tablet Break Point

2Column Span

0Offset

Visible x (please check this if this column is visible in this breakpoint

Desktop Break Point

3Column Span

1Offset

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

For every row, there are twelve zones within Bootstrap's responsive framework http://getbootstrap.com/css/

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 5, colspan 2)

Column 3(offset 2, colspan 2)

Rendered code that I believe will represent the above

Column 1(no offset, colspan 2)

Column 2(no offset, colspan 2)

Tablet (s)

Column 3(offset 2, colspan 2)

Demonstration

Region Blocks of Content

Desktop Content Tablet Content Mobile and OtherDevice Content

Should I display this at the Tablet Breakpoint?

Demonstration

Column Grid Control

Desktop Content Tablet Content Mobile and OtherDevice Content

Show this at these Tablet Breakpoint?

Demo

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

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

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

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 solutions across a variety of industries.

Perficient.com/SocialMediaFacebook.com/Perficient

Twitter.com/Perficient

Thank you for your participation today.

Please fill out the survey at the close of this session.