Downloaded 127 times
Uploaded byISITE Design is now Connective DX
Sitecore and Responsive Web Design
The document summarizes a presentation on responsive web design and Sitecore. It discusses terminology like adaptive and responsive design. It covers approaches to mobile like separate mobile sites versus responsive design. It also discusses bringing responsive design into Sitecore including using device layouts and detection, and considerations for images, videos, and third party content. The panel then took questions on lessons learned and challenges of integrating responsive design into Sitecore projects.
More Related Content
Similar to Sitecore and Responsive Web Design
![Responsive Design & Beyond [Code & Creativity Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codecreativityworkshop1-140506164731-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
More from ISITE Design is now Connective DX
Sitecore and Responsive Web Design
- 1. #sitecoreneug #rwd Responsive Web Design& Sitecore Sitecore New England User Group April 24, 2013
- 2. #sitecoreneug #rwd Agenda • Context •Panel Discussion – Device sensing & layout switching – UX Methodology & RWD – Mobile optimization & polyfills – Bringing it in to Sitecore • Q & A
- 3. #sitecoreneug #rwd Panel Wendy Derstine SitecoreSolutions Architect Deanna Glaze Sr. User Experience Designer Petra Gregorová Sr. Front End Developer Ozell McBride Sr. Sitecore Developer John Eckman Managing Director
- 4. #sitecoreneug #rwd http://alistapart.com/article/dao “Now isthe 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.”
- 5.
- 6.
- 7.
- 8. #sitecoreneug #rwd Terminology Adaptive • Predefinedset 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
- 9. #sitecoreneug #rwd Sitecore DeviceLayouts • 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
- 10. #sitecoreneug #rwd Mobile Approaches Native App MobileWeb w/ Wrapper Separate mobile site Server-side device sensing Adaptive Responsive
- 11. #sitecoreneug #rwd Sometimes ResponsiveDesign is not an Option… • Time & Budget Constraints • Legacy Installations • Different functional requirements for different devices
- 12. #sitecoreneug #rwd Sitecore Devices& Layouts • Create Devices • Assign Different Layouts to Devices • Item Level • Standard Values on the Template
- 13. #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 http://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
- 14. #sitecoreneug #rwd City ofCambridge Mobile Project
- 15. #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
- 16. #sitecoreneug #rwd RWD UXMethodology 1. The What and Why 2. Content First 3. Think through Interaction
- 17. #sitecoreneug #rwd RWD UXMethodology 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 Interaction
- 18. #sitecoreneug #rwd RWD UXMethodology 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 Interaction
- 19. #sitecoreneug #rwd RWD UXMethodology 1. The What and Why 2. Content First 3. 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
- 20. #sitecoreneug #rwd RWD UXMethodology: Tools Style Tiles: http://styletil.es/ UI Sketcher: http://uisketcher.com/ Foundation: http://foundation.zurb.com/
- 21. #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
- 22. #sitecoreneug #rwd Primary PerformanceIssues OVER DOWNLOADING POOR NETWORKS Download & hide Download & shrink Download & ignore High Latency Variable Bandwidth Packet loss
- 23. #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
- 24. #sitecoreneug #rwd Optimization Speed-up pagerender – 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
- 25. #sitecoreneug #rwd Polyfills • Modernizr(HTML5 Shim) • Respond.js • AppendAround.js • Picturefill.js • Ajax Include Pattern or Lazy Block
- 26. #sitecoreneug #rwd Bringing itinto 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.
- 27. #sitecoreneug #rwd Bringing itinto Sitecore
- 28. #sitecoreneug #rwd Bringing itinto Sitecore
- 29. #sitecoreneug #rwd Bringing itinto Sitecore Control is wrapped with an attribute which allows JavaScript to manipulate the DOM as needed
- 30. #sitecoreneug #rwd Bringing itinto Sitecore The resulting html output on a desktop:
- 31. #sitecoreneug #rwd Bringing itinto Sitecore The resulting HTML output on a mobile device
- 32. #sitecoreneug #rwd Bringing itinto 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
- 33. #sitecoreneug #rwd Q &A Wendy Derstine Sitecore Solutions Architect Deanna Glaze Sr. User Experience Designer Petra Gregorová Sr. Front End Developer Ozell McBride Sr. Sitecore Developer John Eckman Managing Director
- 34. #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
- 35. #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
- 36. #sitecoreneug #rwd Resources • SitecoreAdaptive 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
- 37.
- 38.
- 39.
- 40. #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 */
- 41.
- 42.
Editor's Notes
- #5 Way back in 2000, John Allsopp identified a fundamental issue of control and flexibility
- #6 10 years later, Ethan Marcotte names Responsive Web Design. In between? 10 years of fixed-width, table-based layouts replaced by DIV-based but still fixed layouts. (And lots of people trying to make it better)
- #7 Adaptive vs. ResponsiveDesign with Progressive Enhancement: March 2010Responsive Web Design article – May 2010Adaptive Web Design book – May 2011Responsive Web Design book – 2011Mobile First: 2011
- #9 Interestingly, there’s lots of confusion about “Adaptive” as opposed to Responsive. Some in the Sitecore community use “adaptive” to refer to server-side device detection and layout switching.
- #10 I’d say this isn’t adaptive but some use that term for this approach
- #11 One more - RESS (Responsive Design + Server Side Components)
- #19 Separate content from designFinalize content before design begins (don’t laugh, it’s possible!)
- #39 Delight.us – responsive site on WordPress
- #40 Planar.com – responsive site on Umbraco CMS
- #41 Media Query basics – this is how specific CSS rules get applied only in specific contexts, once the base CSS has been defined.
- #42 See http://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-Blog/Posts/2012/11/Sitecore-ASPNET-CMS-6-6-Features-Device-Simulation.aspxSitecore 6.6 Device Simulation
- #43 Note the Rotate Button