Download - Responsive Web Design and Sitecore
#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 opKmizaKon & polyfills – Bringing it in to Sitecore
• Q & A
#sitecoreneug #rwd
Panel Wendy DersKne Sitecore SoluKons Architect
Deanna Glaze Sr. User Experience Designer
Petra Gregorová Sr. Front End Developer
Ozell McBride Sr. Sitecore Developer
John Eckman Managing Director
#sitecoreneug #rwd
hWp://alistapart.com/arKcle/dao
“Now is the Kme 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 le`ng go of control, and becoming flexible.”
#sitecoreneug #rwd
hWp://www.alistapart.com/arKcles/responsive-‐web-‐design/
#sitecore-‐neug #rwd
#sitecoreneug #rwd
#sitecoreneug #rwd
#sitecoreneug #rwd
Terminology
Adap%ve • Predefined set of layout sizes
• Progressive Enhancement via JavaScript and CSS to adapt to capabiliKes of calling device
Responsive • Fluid, proporKon-‐based grids
• Flexible images/media
• Media Queries
#sitecoreneug #rwd
Sitecore Device Layouts
• Define different layouts for device types, rely on server-‐side user-‐agent detecKon and layout switching
• Different markup (CSS, JavaScript, HTML) will be served to different devices
• Is this “AdapKve” design?
#sitecoreneug #rwd
#sitecoreneug #rwd
Mobile Approaches
NaKve App
Mobile Web w/ Wrapper
Separate mobile site
Server-‐side device sensing AdapKve
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 Sitecore http://briancaos.wordpress.com/2012/04/12/identifying-mobile-devices-in-sitecore/
• John West Using the Sitecore Rules Engine in a Custom Context: Setting the Context Device hWp://www.sitecore.net/Community/Technical-‐Blogs/John-‐West-‐Sitecore-‐Blog/Posts/2010/11/Using-‐the-‐Sitecore-‐Rules-‐Engine-‐in-‐a-‐
Custom-‐Context-‐Se`ng-‐the-‐Context-‐Device.aspx
• Sitecore Mobile Device Detector Module • Alex Doroshenko
hWp://marketplace.sitecore.net/Modules/Mobile_Device_Detector.aspx • 51Degrees.mobi database • Sitecore’s Rules engine
#sitecoreneug #rwd
City of Cambridge Mobile Project
#sitecoreneug #rwd
Not “Either-‐Or” but “Both-‐And”
• Mixture of server-‐side device detecKon AND responsive approaches (fluid grids, flexible media, even media queries)
• RESS – responsive design + server-‐side components
• Mobile-‐friendly site + naKve app for specific transacKons
#sitecoreneug #rwd
RWD UX Methodology
1. The What and Why 2. Content First 3. Think through InteracKon
#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 First 3. Think through InteracKon
#sitecoreneug #rwd
RWD UX Methodology
1. The What and Why 2. Content First
– Banish lorem ipsum – Define content strategy sooner rather than later – Content hierarchy mockups over flat wireframes
3. Think through InteracKon
#sitecoreneug #rwd
RWD UX Methodology
1. The What and Why 2. Content First 3. Think through InteracKon
– Consider all use cases, even edge cases • Interface vs. page, fluid vs. staKc • Map out task flows
– Sketch first: Paper (or whiteboard) is your friend – Show chrome: context in RWD is important – Live Prototype: iterate early and omen
#sitecoreneug #rwd
RWD UX Methodology: Tools
Style Tiles: hWp://styleKl.es/ UI Sketcher: hWp://uisketcher.com/ FoundaKon: hWp://foundaKon.zurb.com/
#sitecoreneug #rwd
Mobile First = OpKmizaKon 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 & hide Download & shrink Download & ignore
High Latency Variable
Bandwidth Packet loss
#sitecoreneug #rwd
OpKmizaKon
Reduce requests – Browser cache – Concatenate JS & CSS – Lazy load content (Ajax include PaWern, Lazy Block)
– data:URI – CondiKonal loading – Modernizr.load
Reduce asset size – HTML, CSS, & Image compression
– Replace Images with CSS/Canvas or use SVG
– MinificaKon – Avoid bulky frameworks
#sitecoreneug #rwd
OpKmizaKon
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 PaWern or Lazy Block
#sitecoreneug #rwd
Bringing it into Sitecore
• IA, UX, CreaKve, Front End Development decisions have already been made
• Get inserted into the RWD conversaKon 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 aWribute which allows JavaScript to manipulate the DOM as needed
#sitecoreneug #rwd
Bringing it into Sitecore
The resulKng html output on a desktop:
#sitecoreneug #rwd
Bringing it into Sitecore The resulKng HTML output on a mobile device
#sitecoreneug #rwd
Bringing it into Sitecore
• If possible keep transiKonal blocks in the layout
• Render images and videos without height and width aWributes.
• Implement Responsive image control – Use a library like Picturefill* and store images in sitecore
*hWps://github.com/scoWjehl/picturefill
#sitecoreneug #rwd
Q & A Wendy DersKne Sitecore SoluKons Architect
Deanna Glaze Sr. User Experience Designer
Petra Gregorová Sr. Front End Developer
Ozell McBride Sr. Sitecore Developer
John Eckman Managing 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 opKmize for mobile performance
• Responsive Images & Media – how to avoid “send & shrink” approach
#sitecoreneug #rwd
Lessons Learned
• Content editors can sKll cause problems • QA will take longer than you think • You will find edge cases that are subopKmal • Beware third-‐parKes (ad networks, embedded media, iframes, forms)
• Retrofi`ng is impossible really hard • There is no single mobile context • There are no silver bullets
#sitecoreneug #rwd
Resources • Sitecore AdapKve Images:
hWp://marketplace.sitecore.net/en/Modules/Sitecore_AdapKve_Images.aspx • Responsive Web Design Done BeWer with Sitecore Device DetecKon:
hWp://larre.fixstar.net/2013/02/responsive-‐web-‐design-‐in-‐sitecore/ • Does AdapKve Beat Responsive:
hWp://www.sitecore.net/Community/Best-‐PracKce-‐Blogs/Phil-‐Broadbery/Posts/2013/03/Does-‐adapKve-‐design-‐beat-‐responsive-‐design.aspx
• The PresentaKon Strategy of Launch Sitecore (RWD principles along with Sitecore Device Layouts): hWp://www.sitecore.net/Community/Technical-‐Blogs/Maximizing-‐Usability/Posts/2012/11/The-‐PresentaKon-‐Strategy-‐of-‐Launch-‐Sitecore.aspx
• Sitecore ASP.NET CMS 6.6 Features: Device Simulators hWp://www.sitecore.net/Community/Technical-‐Blogs/John-‐West-‐Sitecore-‐Blog/Posts/2012/11/Sitecore-‐ASPNET-‐CMS-‐6-‐6-‐Features-‐Device-‐SimulaKon.aspx
• hWps://github.com/scoWjehl/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