The document discusses the importance and principles of responsive design in eCommerce, highlighting its benefits for customer experience, SEO, and maintainability. It outlines the impacts on conversion rates, design methodologies, and necessary tools for implementation, while also addressing accessibility and performance optimization strategies. The conclusion emphasizes the urgency for businesses to adopt responsive design to ensure future-ready web experiences.

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/