Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#sitecoreneug #rwdResponsive WebDesign & SitecoreSitecore New England User GroupApril 24, 2013
#sitecoreneug #rwdAgenda• Context• Panel Discussion– Device sensing & layout switching– UX Methodology & RWD– Mobile optim...
#sitecoreneug #rwdPanelWendy DerstineSitecore Solutions ArchitectDeanna GlazeSr. User Experience DesignerPetra GregorováSr...
#sitecoreneug #rwdhttp://alistapart.com/article/dao“Now is the time for the medium of the web tooutgrow its origins in the...
#sitecoreneug #rwdhttp://www.alistapart.com/articles/responsive-web-design/#sitecore-neug #rwd
#sitecoreneug #rwd
#sitecoreneug #rwd
#sitecoreneug #rwdTerminologyAdaptive• Predefined set oflayout sizes• ProgressiveEnhancement viaJavaScript and CSS toadapt...
#sitecoreneug #rwdSitecore Device Layouts• Define different layouts for device types, relyon server-side user-agent detect...
#sitecoreneug #rwdMobile ApproachesNativeAppMobile Webw/ WrapperSeparatemobilesiteServer-sidedevicesensing AdaptiveRespons...
#sitecoreneug #rwdSometimes Responsive Design is not an Option…• Time & Budget Constraints• Legacy Installations• Differen...
#sitecoreneug #rwdSitecore Devices & Layouts• Create Devices• Assign DifferentLayouts to Devices• Item Level• Standard Val...
#sitecoreneug #rwdDevice Detection• Custom device detection• Brian Pedersens Sitecore and .NET BlogIdentifying mobile devi...
#sitecoreneug #rwdCity of CambridgeMobile Project
#sitecoreneug #rwdNot “Either-Or” but “Both-And”• Mixture of server-side device detection ANDresponsive approaches (fluid ...
#sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First3. Think through Interaction
#sitecoreneug #rwdRWD UX Methodology1. The What and Why– Define business and user goals– Make those goals the North Star f...
#sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First– Banish lorem ipsum– Define content strategy soone...
#sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First3. Think through Interaction– Consider all use case...
#sitecoreneug #rwdRWD UX Methodology: ToolsStyle Tiles: http://styletil.es/UI Sketcher: http://uisketcher.com/Foundation: ...
#sitecoreneug #rwdMobile First = Optimization First• Avg. weight of web pages is 1.3MB (IMG + JS = 77%)• 72% RWD sites wei...
#sitecoreneug #rwdPrimary Performance IssuesOVER DOWNLOADING POOR NETWORKSDownload & hideDownload & shrinkDownload & ignor...
#sitecoreneug #rwdOptimizationReduce requests– Browser cache– Concatenate JS & CSS– Lazy load content (Ajaxinclude Pattern...
#sitecoreneug #rwdOptimizationSpeed-up page render– Avoid DOM reflows & repaints– Defer js loading– Lazy load JS – comment...
#sitecoreneug #rwdPolyfills• Modernizr (HTML5 Shim)• Respond.js• AppendAround.js• Picturefill.js• Ajax Include Pattern or ...
#sitecoreneug #rwdBringing it into Sitecore• IA, UX, Creative, Front End Developmentdecisions have already been made• Get ...
#sitecoreneug #rwdBringing it into Sitecore
#sitecoreneug #rwdBringing it into Sitecore
#sitecoreneug #rwdBringing it into SitecoreControl is wrapped with an attribute whichallows JavaScript to manipulate the D...
#sitecoreneug #rwdBringing it into SitecoreThe resulting html output on a desktop:
#sitecoreneug #rwdBringing it into SitecoreThe resulting HTML output on a mobile device
#sitecoreneug #rwdBringing it into Sitecore• If possible keep transitional blocks in thelayout• Render images and videos w...
#sitecoreneug #rwdQ & AWendy DerstineSitecore Solutions ArchitectDeanna GlazeSr. User Experience DesignerPetra GregorováSr...
#sitecoreneug #rwdLessons Learned• RWD affects strategy, ux design, visual design,front-end development, and Sitecoredevel...
#sitecoreneug #rwdLessons Learned• Content editors can still cause problems• QA will take longer than you think• You will ...
#sitecoreneug #rwdResources• Sitecore Adaptive Images:http://marketplace.sitecore.net/en/Modules/Sitecore_Adaptive_Images....
#sitecoreneug #rwdAppendix
#sitecoreneug #rwdDelight.us
#sitecoreneug #rwdPlanar
#sitecoreneug #rwdMedia Queries/* basic css for all sizes first *//* 480px / 16px = 30em ________________ */@media only sc...
#sitecoreneug #rwd
#sitecoreneug #rwd
Upcoming SlideShare
Loading in …5
×

Sitecore and Responsive Web Design

11,698 views

Published on

Sitecore New England User Group met to discuss responsive web design considerations with the CMS.

Published in: Business, Technology, Design
  • Be the first to comment

Sitecore and Responsive Web Design

  1. 1. #sitecoreneug #rwdResponsive WebDesign & SitecoreSitecore New England User GroupApril 24, 2013
  2. 2. #sitecoreneug #rwdAgenda• Context• Panel Discussion– Device sensing & layout switching– UX Methodology & RWD– Mobile optimization & polyfills– Bringing it in to Sitecore• Q & A
  3. 3. #sitecoreneug #rwdPanelWendy DerstineSitecore Solutions ArchitectDeanna GlazeSr. User Experience DesignerPetra GregorováSr. Front End DeveloperOzell McBrideSr. Sitecore DeveloperJohn EckmanManaging Director
  4. 4. #sitecoreneug #rwdhttp://alistapart.com/article/dao“Now is the time for the medium of the web tooutgrow its origins in the printed page. . . . It is thenature of the web to be flexible, and it should beour role as designers and developers to embracethis flexibility . . . The journey begins by letting goof control, and becoming flexible.”
  5. 5. #sitecoreneug #rwdhttp://www.alistapart.com/articles/responsive-web-design/#sitecore-neug #rwd
  6. 6. #sitecoreneug #rwd
  7. 7. #sitecoreneug #rwd
  8. 8. #sitecoreneug #rwdTerminologyAdaptive• Predefined set oflayout sizes• ProgressiveEnhancement viaJavaScript and CSS toadapt to capabilitiesof calling deviceResponsive• Fluid, proportion-based grids• Flexibleimages/media• Media Queries
  9. 9. #sitecoreneug #rwdSitecore Device Layouts• Define different layouts for device types, relyon server-side user-agent detection andlayout switching• Different markup (CSS, JavaScript, HTML) willbe served to different devices• Is this “Adaptive” design?#sitecoreneug #rwd
  10. 10. #sitecoreneug #rwdMobile ApproachesNativeAppMobile Webw/ WrapperSeparatemobilesiteServer-sidedevicesensing AdaptiveResponsive
  11. 11. #sitecoreneug #rwdSometimes Responsive Design is not an Option…• Time & Budget Constraints• Legacy Installations• Different functional requirements fordifferent devices
  12. 12. #sitecoreneug #rwdSitecore Devices & Layouts• Create Devices• Assign DifferentLayouts to Devices• Item Level• Standard Valueson the Template
  13. 13. #sitecoreneug #rwdDevice Detection• Custom device detection• Brian Pedersens Sitecore and .NET BlogIdentifying 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: Settingthe 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 Doroshenkohttp://marketplace.sitecore.net/Modules/Mobile_Device_Detector.aspx• 51Degrees.mobi database• Sitecore’s Rules engine
  14. 14. #sitecoreneug #rwdCity of CambridgeMobile Project
  15. 15. #sitecoreneug #rwdNot “Either-Or” but “Both-And”• Mixture of server-side device detection ANDresponsive approaches (fluid grids, flexiblemedia, even media queries)• RESS – responsive design + server-sidecomponents• Mobile-friendly site + native app for specifictransactions
  16. 16. #sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First3. Think through Interaction
  17. 17. #sitecoreneug #rwdRWD UX Methodology1. The What and Why– Define business and user goals– Make those goals the North Star for everyone onthe team (including the client).– Map these goals to an experience rather than adevice2. Content First3. Think through Interaction
  18. 18. #sitecoreneug #rwdRWD UX Methodology1. The What and Why2. Content First– Banish lorem ipsum– Define content strategy sooner rather than later– Content hierarchy mockups over flat wireframes3. Think through Interaction
  19. 19. #sitecoreneug #rwdRWD UX Methodology1. 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
  20. 20. #sitecoreneug #rwdRWD UX Methodology: ToolsStyle Tiles: http://styletil.es/UI Sketcher: http://uisketcher.com/Foundation: http://foundation.zurb.com/
  21. 21. #sitecoreneug #rwdMobile 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 quicklyas your desktop site
  22. 22. #sitecoreneug #rwdPrimary Performance IssuesOVER DOWNLOADING POOR NETWORKSDownload & hideDownload & shrinkDownload & ignoreHigh Latency VariableBandwidthPacket loss
  23. 23. #sitecoreneug #rwdOptimizationReduce requests– Browser cache– Concatenate JS & CSS– Lazy load content (Ajaxinclude Pattern, LazyBlock)– data:URI– Conditional loading –Modernizr.loadReduce asset size– HTML, CSS, & Imagecompression– Replace Images withCSS/Canvas or use SVG– Minification– Avoid bulky frameworks
  24. 24. #sitecoreneug #rwdOptimizationSpeed-up page render– Avoid DOM reflows & repaints– Defer js loading– Lazy load JS – comment out JS that isn’t requiredat load, uncomment & eval() when needed– Touch beats onclick– Avoid social media widgets: just link
  25. 25. #sitecoreneug #rwdPolyfills• Modernizr (HTML5 Shim)• Respond.js• AppendAround.js• Picturefill.js• Ajax Include Pattern or Lazy Block
  26. 26. #sitecoreneug #rwdBringing it into Sitecore• IA, UX, Creative, Front End Developmentdecisions have already been made• Get inserted into the RWD conversation assoon as possible• Understand the effect of priority placement ofrenderings.
  27. 27. #sitecoreneug #rwdBringing it into Sitecore
  28. 28. #sitecoreneug #rwdBringing it into Sitecore
  29. 29. #sitecoreneug #rwdBringing it into SitecoreControl is wrapped with an attribute whichallows JavaScript to manipulate the DOM asneeded
  30. 30. #sitecoreneug #rwdBringing it into SitecoreThe resulting html output on a desktop:
  31. 31. #sitecoreneug #rwdBringing it into SitecoreThe resulting HTML output on a mobile device
  32. 32. #sitecoreneug #rwdBringing it into Sitecore• If possible keep transitional blocks in thelayout• Render images and videos without height andwidth attributes.• Implement Responsive image control– Use a library like Picturefill* and store images insitecore*https://github.com/scottjehl/picturefill
  33. 33. #sitecoreneug #rwdQ & AWendy DerstineSitecore Solutions ArchitectDeanna GlazeSr. User Experience DesignerPetra GregorováSr. Front End DeveloperOzell McBrideSr. Sitecore DeveloperJohn EckmanManaging Director
  34. 34. #sitecoreneug #rwdLessons Learned• RWD affects strategy, ux design, visual design,front-end development, and Sitecoredevelopment• RWD doesn’t eliminate the need to optimizefor mobile performance• Responsive Images & Media – how to avoid“send & shrink” approach
  35. 35. #sitecoreneug #rwdLessons 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, embeddedmedia, iframes, forms)• Retrofitting is impossible really hard• There is no single mobile context• There are no silver bullets
  36. 36. #sitecoreneug #rwdResources• 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 SitecoreDevice 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 Simulatorshttp://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. 37. #sitecoreneug #rwdAppendix
  38. 38. #sitecoreneug #rwdDelight.us
  39. 39. #sitecoreneug #rwdPlanar
  40. 40. #sitecoreneug #rwdMedia 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. 41. #sitecoreneug #rwd
  42. 42. #sitecoreneug #rwd

×