Responsive Web Design and Sitecore

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 opKmizaKon & polyﬁlls – Bringing it in to Sitecore •  Q & A

3. #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

4. #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.”

5. #sitecoreneug #rwd hWp://www.alistapart.com/arKcles/responsive-‐web-‐design/ #sitecore-‐neug #rwd

6. #sitecoreneug #rwd

8. #sitecoreneug #rwd Terminology Adap%ve •  Predeﬁned 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

9. #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

10. #sitecoreneug #rwd Mobile Approaches NaKve App Mobile Web w/ Wrapper Separate mobile site Server-‐side device sensing AdapKve Responsive

11. #sitecoreneug #rwd Sometimes Responsive Design 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 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

14. #sitecoreneug #rwd City of Cambridge Mobile Project

15. #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

16. #sitecoreneug #rwd RWD UX Methodology 1.  The What and Why 2.  Content First 3.  Think through InteracKon

17. #sitecoreneug #rwd RWD UX Methodology 1.  The What and Why –  Deﬁne 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

18. #sitecoreneug #rwd RWD UX Methodology 1.  The What and Why 2.  Content First –  Banish lorem ipsum –  Deﬁne content strategy sooner rather than later –  Content hierarchy mockups over ﬂat wireframes 3.  Think through InteracKon

19. #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

20. #sitecoreneug #rwd RWD UX Methodology: Tools Style Tiles: hWp://styleKl.es/ UI Sketcher: hWp://uisketcher.com/ FoundaKon: hWp://foundaKon.zurb.com/

21. #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

22. #sitecoreneug #rwd Primary Performance Issues OVER DOWNLOADING POOR NETWORKS Download & hide Download & shrink Download & ignore High Latency Variable Bandwidth Packet loss

23. #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 –  MiniﬁcaKon –  Avoid bulky frameworks

24. #sitecoreneug #rwd OpKmizaKon Speed-‐up page render – Avoid DOM reﬂows & 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 Polyﬁlls •  Modernizr (HTML5 Shim) •  Respond.js •  AppendAround.js •  Pictureﬁll.js •  Ajax Include PaWern or Lazy Block

26. #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 eﬀect of priority placement of renderings.

27. #sitecoreneug #rwd Bringing it into Sitecore

28. #sitecoreneug #rwd Bringing it into Sitecore

29. #sitecoreneug #rwd Bringing it into Sitecore Control is wrapped with an aWribute which allows JavaScript to manipulate the DOM as needed

30. #sitecoreneug #rwd Bringing it into Sitecore The resulKng html output on a desktop:

31. #sitecoreneug #rwd Bringing it into Sitecore The resulKng HTML output on a mobile device

32. #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 Pictureﬁll* and store images in sitecore *hWps://github.com/scoWjehl/pictureﬁll

33. #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

34. #sitecoreneug #rwd Lessons Learned •  RWD aﬀects 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

35. #sitecoreneug #rwd Lessons Learned •  Content editors can sKll cause problems •  QA will take longer than you think •  You will ﬁnd edge cases that are subopKmal •  Beware third-‐parKes (ad networks, embedded media, iframes, forms) •  Retroﬁ`ng is impossible really hard •  There is no single mobile context •  There are no silver bullets

36. #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.ﬁxstar.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/pictureﬁll

37. #sitecoreneug #rwd Appendix

38. #sitecoreneug #rwd Delight.us

39. #sitecoreneug #rwd Planar

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 */ ! !

Responsive Web Design and Sitecore

Responsive Web Design and Sitecore

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Responsive Web Design and Sitecore

Similar to Responsive Web Design and Sitecore(20)

More from John Eckman

More from John Eckman(20)

Recently uploaded

Recently uploaded(20)

Responsive Web Design and Sitecore