Responsive Web Design for Magento (Meet Magento Spain 2014)

Bf9f3f29049791136b9b815f59e1f09c?s=47 Meanbee
March 05, 2014

Responsive Web Design for Magento (Meet Magento Spain 2014)

We share our experiences of building Magento stores with responsive techniques. Giving examples of tools that are useful, design and architecture decisions that need to be made, and also suggest partnering with server-side components to offer the best experience for customers.

Presented by Darren Belding and Tom Robertshaw

Bf9f3f29049791136b9b815f59e1f09c?s=128

Meanbee

March 05, 2014
Tweet

Transcript

  1. Responsive Design Tom Robertshaw & Darren Belding Meanbee

  2. Meanbee •  UK Magento Development •  First eCommerce build 2008

    •  Graduated 2011
  3. eCommerce Survey

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

  5. Mobile 60% mobile use is at home

  6. Mobile 81% of mobile purchases are spontaneous

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

  8. Responsive Sites 1% eCommerce sites are responsive.

  9. Responsive Sites 66% of those are Magento

  10. History •  Coined by Ethan Marcotte in 2010 •  eCommerce

    is 2 years behind •  Flexibility not fixed
  11. Why use it? •  Customer experience •  SEO •  Maintainability

    •  Future Friendly.
  12. Effect on Conversion O’Neill Clothing +66% Skinny Ties +71% Fathead

    +90%
  13. Content •  Takes precedence •  Information Architecture •  Use Cases

  14. Mobile-first or Desktop-first •  Desktop-first –  Legacy Systems –  Good

    for IE •  Mobile-first –  Load only what the device needs
  15. Legacy Browsers •  Consider ROI •  Many tools available – 

    respond.js (media query polyfill) –  selectivizr (CSS 3 selector polyfill) –  html5shiv (HTML 5 element enabling script)
  16. Design Patterns •  Document flow •  Consider navigation across devices

    •  Visible feedback in viewport
  17. Implementation •  Use a framework or boilerplate •  Tailor to

    your own needs
  18. Methodology •  Semantic versus non-semantic •  featured-products, search-container, footer-actions • 

    small-5, push-2, small-offset-1 •  CSS Pre-processors (LESS, SASS, Stylus) •  Retain Magento upgradability
  19. Accessibility •  Foundation of a great design experience •  Mouse,

    keyboard, touch •  Slow connection •  Web Content Accessibility Guidelines •  We recommend AA
  20. Device Branded •  Apple Icons •  Window Tiles

  21. Interactions HTML 5 inputs –  tel –  number –  email

    –  date –  pattern •  e.g. pattern=”[0-9]*”
  22. Enhancements •  Modernizr (feature detection) •  Gesture Control –  Ensure

    JS and UI support it e.g. Carousels. –  Add your own
  23. Responsive Assets Conditional loading of JS –  matchMedia –  enquire.js

    –  harvey.js
  24. Assets •  Minimise HTTP Requests •  Sprites •  Avoid weighty

    JS libraries •  Custom JS at the bottom •  Overloading with External JS (FB/Twitter)
  25. Speed •  Network Inspector •  YSlow •  Network Link Conditioner

  26. Responsive Imagery 4 success criteria •  Fluid •  Art-directed • 

    Resolution (retina) •  File-size optimized
  27. Fluid Nice and easy height: auto !important; max-width: 100%;

  28. Focal Points

  29. Retina Imagery •  SVG •  Icon Fonts •  @1.5X @2x

    •  Larger compressed images
  30. picture, srcset Deliver optimised image for viewport <span data-picture data-alt="Ordnance

    Survey"> <span data-src=”/ordnancesurvey-custommade.png"></span> <span data-src=”/ordnancesurvey-custommade@2x.png" data- media=“only screen and(min-device-pixel-ratio:2)"></span> <span data-src="/ordnancesurvey-custommade-650.png" data- media="(min-width: 400px)"></span> <span data-src=”/ordnancesurvey-custommade-650@2x.png" data- media="(min-width: 400px) only screen and (min-device-pixel- ratio:2) "></span> <noscript> <img src=”/ordnancesurvey-custommade.png" alt="Ordnance Survey"> </noscript> </span>
  31. None
  32. Responsive Tables •  Consider content •  Solutions –  responsivetables.js – 

    Flip scroll –  Unseen column –  Responsive Table
  33. Responsive Video •  HTML 5 video height: auto !important; width:

    100% !important; •  For everything else there’s Fitvids.js
  34. None
  35. RESS (Responsive Web Design with Server Side Components)

  36. RESS •  Component-level optimization for performance •  82 of top

    100 Alexa sites deliver different content based on user-agent •  Necessary evil to change device experience
  37. Magento Exceptions

  38. Conclusion Responsive design paired with server side optimisations enables maintainable,

    future ready device experiences
  39. Start Now •  You are not too busy. •  You

    cannot afford not to. •  You set the standard for your business
  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/ •  "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/ •  "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?16 •  "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/0120111_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/