responsive web design and sitecore
DESCRIPTION
Any Sitecore project being started today is likely planning for mobile, but what does that really mean? The April New England Sitecore User Group will feature a panel presentation and discussion from ISITE Design’s battle-tested User Experience and Sitecore Development teams that explore the many considerations that go into planning, designing and developing responsive and mobile-friendly Sitecore experiences.TRANSCRIPT
#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