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

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>
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
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/