Responsive design has been around for a few years in terms of the rest of the web but it is only recently pervading eCommerce. We will confirm to you why it’s so important in the expanding omni-channel world. We will then proceed to share our techniques and experiences for building responsively designed stores as standard

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/