Responsive Web Design in Magento (Meet Magento Poland 2013)

We talk about how the responsive design concept has changed our mentality for approaching the multi-device web. We share our knowledge and experiences of implementing this concept in Magento, covering the shift in developer thinking, implementation examples and solutions to common ecommerce problems.

Presented by Darren Belding and Tom Robertshaw

Transcript

1. Darren Belding @dsbelding Tom Robertshaw @bobbyshaw Responsive Web Design
2. Meanbee •  UK Magento Development •  Front End Developer Certified •  Magento since 2008
3. Mobile 52% always have phones within arm’s reach
4. Mobile 90% use multiple screens to complete a task
5. Mobile 81% of mobile purchases are spontaneous
6. eCommerce Survey
7. Responsive Sites •  2% of eCommerce sites are responsive •  Doubled in 6 months •  66% Magento
8. What is responsive design? •  Concept coined by Ethan Marcotte (2010) •  eCommerce is 2 years behind •  Flexibility not fixed.
9. Why use it? •  Customer Experience •  SEO •  Maintainability •  Future Friendly
10. Effect on Conversion O’Neill Clothing + 66% Skinny Ties + 71% Fathead + 90%
11. How? How?
12. Content •  Takes precedence •  Information Architecture •  Use cases
13. Mobile-first or Desktop-first •  Desktop-first – Legacy systems •  Mobile First – Mobile optimised (load only what device needs) – But IE
14. Legacy Browsers •  Consider ROI •  Many tools available: – respond.js (media query polyfill) – selectivizr (css3 selector polyfill) – html5shiv (html5 element enabling script)
15. Design Patterns •  Make disciplined decisions •  Document Flow •  Consider navigation across devices •  Restrict interactions to the viewport
16. Accessibility •  Accessibility is the foundation of a great design experience •  Mouse, keyboard, touch •  Bandwidth •  Web Content Accessibility Guidelines
17. Implementation •  Use a framework or boilerplate •  Tailor to your own needs
18. Fluid Grids
19. Fluid Grids •  Semantic versus Non-semantic •  CSS Pre-processors (LESS, SASS, Stylus) •  Retain upgradability of Magento
20. Interactions •  HTML 5 inputs – tel – number – email – date – pattern •  e.g. pattern="[0-9]*"
21. Interactions •  Anchor Types – tel: – sms: – mailto: – skype:
22. Interactions •  Larger touch area – Buttons – Tabs – Form Fields
23. Enhancements •  modernizr (feature detection) •  Gesture Control – Ensure JS and UI support it •  E.g. carousels – Add your own
24. Device Branded •  Favicons •  Apple Icons •  Windows Tiles
25. Responsive Tables •  Consider content •  Solutions •  responsivetables.js •  Flip scroll •  Unseen column •  Responsive Table
26. Responsive Video •  HTML 5 video !! !height: auto !important; ! !width: 100% !important;! •  For everything else there’s Fitvids.js
27. Responsive Imagery •  4 success criteria – Fluid – Art-directed – Resolution (retina) – File-size Optimized
28. Fluid •  Nice and easy ! ! ! !height: auto !important; ! ! ! !max-width: 100%;!
29. Art Directed Focal Points
30. Resolution •  Retina-targeted imagery – SVG – HiDPI sprites – Icon fonts – @1.5X @2X – Larger compressed images
31. Resolution •  Foresight.js •  picture! •  srcset!
32. Adaptive Size & Resolution •  Device size detection •  Resize images before delivery •  Reduce bandwidth, reduce page load time.
35. Adaptive Images •  Large image is 1509 x 906 (80KB) •  Small image is 480 x 288 (12KB) •  85% reduction in size
36. Device Testing
37. RESS Responsive Web Design with Server Side Components
38. RESS •  Optimization at the component level to increase performance •  82 of top 100 Alexa site deliver different content based on user agent. •  Necessary evil to change device experience
39. Magento Exceptions
40. Device Experiences •  Choice of Checkout •  Limit product carousels •  Use helpers
41. Conclusion Responsive design paired with server side optimisations enables maintainable, future ready, device experiences.
42. Go Forth •  Start now •  A lot of documentation and tools available •  You and your clients cannot afford not to.
43. Darren Belding @dsbelding Tom Robertshaw @bobbyshaw Responsive Web Design
44. References •  “The Infinite Dial 2013: Navigating Digital Platforms” - Edison Research http://www.edisonresearch.com/home/archives/2013/04/the-infinite-dial-2013-navigating-digital-platforms.php •  “Half of Mobile Phone Owners Always Have Their Device Within Arm’s Length” – Marketing Charts http://www.marketingcharts.com/wp/interactive/half-of-mobile-phone-owners-always-have-their-device-within- arms-length-28367/ •  “The New Multi-Screen World Study” – Google http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html •  “RESS: Responsive Design + Server Side Components” – Luke Wroblewski http://www.lukew.com/ff/entry.asp?1392 •  “Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site – Copy Blogger http://www.copyblogger.com/mobile-responsive-design-benefits/ •  “Repurposing vs optimised design” – Nielsen Norman Group http://www.nngroup.com/articles/repurposing-vs-optimized-design/ •  “Iterative Design of a Mobile Screen” – Neilsen Norman Group http://www.nngroup.com/articles/iterative-design-mobile-screen/ •  “New stats: Amazon, Apple have biggest proportion of mobile users” – Geek Wire http://www.geekwire.com/2013/multiplatform-stats-amazon-apple-biggest-proportion-mobile-users/ •  “Focal Point GitHub” – Adam Bradley https://github.com/adamdbradley/focal-point •  “Foresight GitHub” – Adam Bradley https://github.com/adamdbradley/foresight.js/ •  “Retina Revolution” – Netvlies.nl http://blog.netvlies.nl/design-interactie/retina-revolution/ •  “Data Monday: Impact of Responsive Designs” – Luke Wroblewski http://www.lukew.com/ff/entry.asp?1691 •  “Adaptive Images” – Matt Wilcox http://adaptive-images.com/ •  “Responsive Patterns” – Brad Frost http://bradfrost.github.io/this-is-responsive/patterns.html •  “Responsive Tables” – Simon Elvery http://elvery.net/demo/responsive-tables/ •  “Server-side Mobile Web Detection Used by 82% of Alexa Top 100 Sites” – CircleID http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/ •  “Web Content Accessibility Guidelines (WCAG) 2.0” – W3C http://www.w3.org/TR/WCAG20/ •  “Responsive Images Group” - http://responsiveimages.org/