Responsive Design for Magento (Meet Magento Netherlands 2013)

This session was inspired by recent work within the Meanbee team in the field of responsive design.

We would also like to thank Brendan Falkowski for his expertise and influence in the area.

We gave details on why responsive is useful, how to start building responsively, what tools might be useful and some of the problems and techniques that we have employed.

Presented by Darren Belding and Tom Robertshaw

Transcript

2. Responsive Design for Magento Tom Robertshaw Darren Belding! Meanbee @bobbyshaw @darrenbelding1 @meanbee
3. Meanbee •  UK Magento Development •  Front End Developer Certified •  First Magento Build – 2008
4. eCommerce Survey
5. Responsive Sites ! ! ! 1% eCommerce sites are responsive.
6. Responsive Sites ! ! ! 66% of those are Magento
7. Responsive •  Coined by Ethan Marcotte in 2010 •  eCommerce is 2 years behind •  Bow before Brendan Falkowski & Session Digital
8. MOBILE!
9. Mobile 52% always have phones within arm’s reach
10. Mobile 60% mobile use is at home
11. Mobile 81% of mobile purchases are spontaneous
12. Mobile 90% use multiple screens to complete a task
13. Mobile versus “Mobile” Top 50 sites: “Mobile” 11% is smartphone
14. Why Responsive? •  Trade off between mobile site or app •  Better for search engines •  Future Proof •  Easier to maintain
15. Content •  Content-First approach •  Information Architecture •  Use Cases
16. Responsive Workflow •  Designs to implementation •  Make disciplined choices •  E.g. Order of Markup
17. Fluid •  Retain natural fluidity of the web •  Responsive layout versus adaptive layout •  Structured approach with grids
18. Grids
19. Mobile-First or Desktop Down •  Desktop-down only if cannot rebuild •  Make mobile do the least amount of work •  Disadvantage of mobile-first is old IEs
20. Assets •  Minimise HTTP Requests •  Document size •  Custom JavaScript at the bottom •  Overloading with External JS (FB/Twitter) •  Sprites •  Icon Fonts
21. Responsive Assets •  Conditional loading of JS •  Mobile networks compress images •  Consider image size for future breakpoints
22. Focal Points
23. Retina Imagery •  @2x •  Larger compressed images •  JS Image Replacement
24. eCommerce Problems!
25. Product Images •  Pinch-zoom on mobile •  Only use hover-over and lightboxes if you know its supported
26. Navigation •  Can get very complicated on mobile! •  Consider location •  Consider accessibility
27. Product Page •  Consider content flow •  May need multiple add to cart buttons
28. Checkout •  Vertical Forms •  Keep tasks within viewport •  Woven checkout
29. Tools!
30. Tools •  You have everything you need already •  CSS Pre-processors (e.g. SASS) •  Modular •  Inheritance •  Keep Magento Upgradable
31. SASS
32. Speed •  Network Inspector •  YSlow •  Network Link Conditioner
33. Device Testing
34. RESS (Responsive!Web!Design!with!Server!Side!Components)!
35. Magento RESS - Exceptions
36. Magento RESS – Image Helper
37. Magento RESS - Xbox
38. Start Now •  You are not too busy. •  You cannot afford not to. •  You set the standard for your business
39. Responsive Design for Magento Tom Robertshaw tom@meanbee.com @bobbyshaw Darren Belding darren@meanbee.com @darrenbelding1 Meanbee @meanbee
40. 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/ •  “How We Should Handle Responsive Images” – Boagworld http://boagworld.com/dev/how-should-we-handle-responsive-images/ •  “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 •  “Retina Revolution” – Netvlies.nl http://blog.netvlies.nl/design-interactie/retina-revolution/