Responsive Design for Magento (Meet Magento Netherlands 2013)

Bf9f3f29049791136b9b815f59e1f09c?s=47 Meanbee
May 30, 2013

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

Bf9f3f29049791136b9b815f59e1f09c?s=128

Meanbee

May 30, 2013
Tweet

Transcript

  1. None
  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/
  41. None