Responsive Web Design and Sitecore
•
5 j'aime•8,461 vues
The document discusses responsive web design and Sitecore. It provides an agenda for a panel discussion on responsive design topics like device sensing, layout switching, and bringing responsive design into Sitecore. The panel will include Sitecore experts who will discuss approaches to responsive design, terminology, mobile optimization techniques, and a responsive design UX methodology.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Responsive Web Design and Sitecore
Similaire à Responsive Web Design and Sitecore (20)
Plus de John Eckman
Plus de John Eckman (20)
Dernier
Dernier (20)
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 & polyfills – 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
- 8. #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
- 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 – 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
- 18. #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
- 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 – MinificaKon – Avoid bulky frameworks
- 24. #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
- 25. #sitecoreneug #rwd Polyfills • Modernizr (HTML5 Shim) • Respond.js • AppendAround.js • Picturefill.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 effect 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 Picturefill* and store images in sitecore *hWps://github.com/scoWjehl/picturefill
- 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 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
- 35. #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
- 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.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
- 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 */ ! !