Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design for Magento (Meet Magento Netherlands 2013)

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

Meanbee

May 30, 2013
Tweet

More Decks by Meanbee

Other Decks in Design

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
    [email protected]
    @bobbyshaw
    Darren Belding
    [email protected]
    @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