#sitecoreneug #rwd

Responsive Web Design & Sitecore

Sitecore New England User Group

April 24, 2013

#sitecoreneug #rwd

Agenda

• Context • Panel Discussion

– Device sensing & layout switching – UX Methodology & RWD– Mobile optimization & polyfills– Bringing it in to Sitecore

• Q & A

#sitecoreneug #rwd

Panel Wendy DerstineSitecore Solutions Architect

Deanna GlazeSr. User Experience Designer

Petra GregorováSr. Front End Developer

Ozell McBrideSr. Sitecore Developer

John EckmanManaging Director

#sitecoreneug #rwd

http://alistapart.com/article/dao

“Now is the time for the medium of the web to outgrow its origins in the printed page. . . . It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility . . . The journey begins by letting go of control, and becoming flexible.”

#sitecoreneug #rwd

http://www.alistapart.com/articles/responsive-web-design/

#sitecore-neug #rwd

#sitecoreneug #rwd

#sitecoreneug #rwd

#sitecoreneug #rwd

Terminology

Adaptive• Predefined set of

layout sizes• Progressive

Enhancement via JavaScript and CSS to adapt to capabilities of calling device

Responsive• Fluid, proportion-

based grids• Flexible

images/media• Media Queries

#sitecoreneug #rwd

Sitecore Device Layouts

• Define different layouts for device types, rely on server-side user-agent detection and layout switching

• Different markup (CSS, JavaScript, HTML) will be served to different devices

• Is this “Adaptive” design?

#sitecoreneug #rwd

#sitecoreneug #rwd

Mobile Approaches

Native App

Mobile Web w/ Wrapper

Separate mobile

site

Server-sidedevice sensing Adaptive

Responsive

#sitecoreneug #rwd

Sometimes Responsive Design is not an Option…

• Time & Budget Constraints

• Legacy Installations

• Different functional requirements for different devices

#sitecoreneug #rwd

Sitecore Devices & Layouts

• Create Devices• Assign Different

Layouts to Devices• Item Level• Standard Values

on the Template

#sitecoreneug #rwd

Device Detection

• Custom device detection • Brian Pedersen's Sitecore and .NET Blog

Identifying mobile devices in Sitecorehttp://briancaos.wordpress.com/2012/04/12/identifying-mobile-devices-in-sitecore/

• John WestUsing the Sitecore Rules Engine in a Custom Context: Setting the Context Devicehttp://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-Blog/Posts/2010/11/Using-the-Sitecore-Rules-Engine-in-a-Custom-Context-Setting-the-Context-Device.aspx

• Sitecore Mobile Device Detector Module• Alex Doroshenko

http://marketplace.sitecore.net/Modules/Mobile_Device_Detector.aspx• 51Degrees.mobi database• Sitecore’s Rules engine

#sitecoreneug #rwd

City of CambridgeMobile Project

#sitecoreneug #rwd

Not “Either-Or” but “Both-And”

• Mixture of server-side device detection AND responsive approaches (fluid grids, flexible media, even media queries)

• RESS – responsive design + server-side components

• Mobile-friendly site + native app for specific transactions

#sitecoreneug #rwd

RWD UX Methodology

1. The What and Why2. Content First3. Think through Interaction

#sitecoreneug #rwd

RWD UX Methodology

1. The What and Why– Define business and user goals– Make those goals the North Star for everyone on

the team (including the client). – Map these goals to an experience rather than a

device

2. Content First3. Think through Interaction

#sitecoreneug #rwd

RWD UX Methodology

1. The What and Why2. Content First

– Banish lorem ipsum– Define content strategy sooner rather than later– Content hierarchy mockups over flat wireframes

3. Think through Interaction

#sitecoreneug #rwd

RWD UX Methodology

1. The What and Why2. Content First3. Think through Interaction

– Consider all use cases, even edge cases• Interface vs. page, fluid vs. static• Map out task flows

– Sketch first: Paper (or whiteboard) is your friend– Show chrome: context in RWD is important– Live Prototype: iterate early and often

#sitecoreneug #rwd

RWD UX Methodology: Tools

Style Tiles: http://styletil.es/UI Sketcher: http://uisketcher.com/Foundation: http://foundation.zurb.com/

#sitecoreneug #rwd

Mobile First = Optimization First

• Avg. weight of web pages is 1.3MB (IMG + JS = 77%)

• 72% RWD sites weight the same as desktop

• 71% users expect your mobile site to load as quickly as your desktop site

#sitecoreneug #rwd

Primary Performance Issues

OVER DOWNLOADING POOR NETWORKS

Download & hideDownload & shrinkDownload & ignore

High Latency Variable BandwidthPacket loss

#sitecoreneug #rwd

Optimization

Reduce requests– Browser cache– Concatenate JS & CSS– Lazy load content (Ajax

include Pattern, Lazy Block)

– data:URI– Conditional loading –

Modernizr.load

Reduce asset size– HTML, CSS, & Image

compression– Replace Images with

CSS/Canvas or use SVG– Minification– Avoid bulky frameworks

#sitecoreneug #rwd

Optimization

Speed-up page render– Avoid DOM reflows & repaints– Defer js loading– Lazy load JS – comment out JS that isn’t required

at load, uncomment & eval() when needed– Touch beats onclick– Avoid social media widgets: just link

#sitecoreneug #rwd

Polyfills

• Modernizr (HTML5 Shim)• Respond.js• AppendAround.js• Picturefill.js• Ajax Include Pattern or Lazy Block

#sitecoreneug #rwd

Bringing it into Sitecore

• IA, UX, Creative, Front End Development decisions have already been made

• Get inserted into the RWD conversation as soon as possible

• Understand the effect of priority placement of renderings.

#sitecoreneug #rwd

Bringing it into Sitecore

#sitecoreneug #rwd

Bringing it into Sitecore

#sitecoreneug #rwd

Bringing it into Sitecore

Control is wrapped with an attribute which allows JavaScript to manipulate the DOM as needed

#sitecoreneug #rwd

Bringing it into Sitecore

The resulting html output on a desktop:

#sitecoreneug #rwd

Bringing it into SitecoreThe resulting HTML output on a mobile device

#sitecoreneug #rwd

Bringing it into Sitecore

• If possible keep transitional blocks in the layout

• Render images and videos without height and width attributes.

• Implement Responsive image control– Use a library like Picturefill* and store images in

sitecore

*https://github.com/scottjehl/picturefill

#sitecoreneug #rwd

Q & AWendy DerstineSitecore Solutions Architect

Deanna GlazeSr. User Experience Designer

Petra GregorováSr. Front End Developer

Ozell McBrideSr. Sitecore Developer

John EckmanManaging Director

#sitecoreneug #rwd

Lessons Learned

• RWD affects strategy, ux design, visual design, front-end development, and Sitecore development

• RWD doesn’t eliminate the need to optimize for mobile performance

• Responsive Images & Media – how to avoid “send & shrink” approach

#sitecoreneug #rwd

Lessons Learned

• Content editors can still cause problems• QA will take longer than you think• You will find edge cases that are suboptimal• Beware third-parties (ad networks, embedded

media, iframes, forms)• Retrofitting is impossible really hard• There is no single mobile context• There are no silver bullets

#sitecoreneug #rwd

Resources• Sitecore Adaptive Images: http://marketplace.sitecore.net/en/Modules/

Sitecore_Adaptive_Images.aspx• Responsive Web Design Done Better with Sitecore Device Detection:

http://larre.fixstar.net/2013/02/responsive-web-design-in-sitecore/• Does Adaptive Beat Responsive:

http://www.sitecore.net/Community/Best-Practice-Blogs/Phil-Broadbery/Posts/2013/03/Does-adaptive-design-beat-responsive-design.aspx

• The Presentation Strategy of Launch Sitecore (RWD principles along with Sitecore Device Layouts): http://www.sitecore.net/Community/Technical-Blogs/Maximizing-Usability/Posts/2012/11/The-Presentation-Strategy-of-Launch-Sitecore.aspx

• Sitecore ASP.NET CMS 6.6 Features: Device Simulators http://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-Blog/Posts/2012/11/Sitecore-ASPNET-CMS-6-6-Features-Device-Simulation.aspx

• https://github.com/scottjehl/picturefill

#sitecoreneug #rwd

Appendix

#sitecoreneug #rwd

Delight.us

#sitecoreneug #rwd

Planar

#sitecoreneug #rwd

Media Queries

/* basic css for all sizes first */

/* 480px / 16px = 30em ________________ */@media only screen and (min-width: 30em) {

/* stuff here only applies above 480px wide */}

/* 600px / 16px = 37.5em _______________ */@media only screen and (min-width: 37.5em) { /* stuff here only applies above 600px */}

/* etc */

#sitecoreneug #rwd

#sitecoreneug #rwd