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

1. View Slide

2. Responsive Design
   for Magento
   Tom Robertshaw
   Darren Belding!
   Meanbee
   @bobbyshaw @darrenbelding1 @meanbee
   

   View Slide

3. Meanbee
   •  UK Magento Development
   •  Front End Developer Certified
   •  First Magento Build – 2008
   

   View Slide

4. eCommerce Survey
   

   View Slide

5. Responsive Sites
   !
   !
   !
   1% eCommerce sites are responsive.
   

   View Slide

6. Responsive Sites
   !
   !
   !
   66% of those are Magento
   

   View Slide

7. Responsive
   •  Coined by Ethan Marcotte in 2010
   •  eCommerce is 2 years behind
   •  Bow before Brendan Falkowski & Session
   Digital
   

   View Slide

8. MOBILE!
   

   View Slide

9. Mobile
   52% always have phones within arm’s reach
   

   View Slide

10. Mobile
    60% mobile use is at home
    

    View Slide

11. Mobile
    81% of mobile purchases are spontaneous
    

    View Slide

12. Mobile
    90% use multiple screens to complete a task
    

    View Slide

13. Mobile versus “Mobile”
    Top 50 sites: “Mobile” 11% is smartphone
    

    View Slide

14. Why Responsive?
    •  Trade off between mobile site or app
    •  Better for search engines
    •  Future Proof
    •  Easier to maintain
    

    View Slide

15. Content
    •  Content-First approach
    •  Information Architecture
    •  Use Cases
    

    View Slide

16. Responsive Workflow
    •  Designs to implementation
    •  Make disciplined choices
    •  E.g. Order of Markup
    

    View Slide

17. Fluid
    •  Retain natural fluidity of the web
    •  Responsive layout versus adaptive layout
    •  Structured approach with grids
    

    View Slide

18. Grids
    

    View Slide

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
    

    View Slide

20. Assets
    •  Minimise HTTP Requests
    •  Document size
    •  Custom JavaScript at the bottom
    •  Overloading with External JS (FB/Twitter)
    •  Sprites
    •  Icon Fonts
    

    View Slide

21. Responsive Assets
    •  Conditional loading of JS
    •  Mobile networks compress images
    •  Consider image size for future
    breakpoints
    

    View Slide

22. Focal Points
    

    View Slide

23. Retina Imagery
    •  @2x
    •  Larger compressed images
    •  JS Image Replacement
    

    View Slide

24. eCommerce
    Problems!
    

    View Slide

25. Product Images
    •  Pinch-zoom on mobile
    •  Only use hover-over and lightboxes if you
    know its supported
    

    View Slide

26. Navigation
    •  Can get very complicated on mobile!
    •  Consider location
    •  Consider accessibility
    

    View Slide

27. Product Page
    •  Consider content flow
    •  May need multiple add to cart buttons
    

    View Slide

28. Checkout
    •  Vertical Forms
    •  Keep tasks within viewport
    •  Woven checkout
    

    View Slide

29. Tools!
    

    View Slide

30. Tools
    •  You have everything you need already
    •  CSS Pre-processors (e.g. SASS)
    •  Modular
    •  Inheritance
    •  Keep Magento Upgradable
    

    View Slide

31. SASS
    

    View Slide

32. Speed
    •  Network Inspector
    •  YSlow
    •  Network Link
    Conditioner
    

    View Slide

33. Device Testing
    

    View Slide

34. RESS
    (Responsive!Web!Design!with!Server!Side!Components)!
    

    View Slide

35. Magento RESS - Exceptions
    

    View Slide

36. Magento RESS – Image Helper
    

    View Slide

37. Magento RESS - Xbox
    

    View Slide

38. Start Now
    •  You are not too busy.
    •  You cannot afford not to.
    •  You set the standard for your business
    

    View Slide

39. Responsive Design
    for Magento
    Tom Robertshaw
    tom@meanbee.com
    @bobbyshaw
    Darren Belding
    darren@meanbee.com
    @darrenbelding1
    Meanbee
    @meanbee
    

    View Slide

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/
    

    View Slide

41. View Slide