Embed Size (px)
DESCRIPTION
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
Citation preview
Responsive Design
Tom Robertshaw & Darren Belding Meanbee
Meanbee
• UK Magento Development
• First eCommerce build 2008
• Graduated 2011
eCommerce Survey
52% always have phones within arm’s reach
Mobile
Mobile
60% mobile use is at home
Mobile
81% of mobile purchases are spontaneous
Mobile
90% use multiple screens to complete a task
Responsive Sites
1% eCommerce sites are responsive.
Responsive Sites
66% of those are Magento
History
• Coined by Ethan Marcotte in 2010
• eCommerce is 2 years behind
• Flexibility not fixed
Why use it?
• Customer experience
• SEO
• Maintainability
• Future Friendly.
Effect on Conversion
O’Neill Clothing +66%
Skinny Ties +71%
Fathead +90%
Content
• Takes precedence
• Information Architecture
• Use Cases
Mobile-first or Desktop-first
• Desktop-first – Legacy Systems – Good for IE
• Mobile-first – Load only what the device needs
Legacy Browsers
• Consider ROI
• Many tools available – respond.js (media query polyfill) – selectivizr (CSS 3 selector polyfill) – html5shiv (HTML 5 element enabling script)
Design Patterns
• Document flow
• Consider navigation across devices
• Visible feedback in viewport
Implementation
• Use a framework or boilerplate
• Tailor to your own needs
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
Accessibility
• Foundation of a great design experience
• Mouse, keyboard, touch
• Slow connection
• Web Content Accessibility Guidelines • We recommend AA
Device Branded
• Apple Icons
• Window Tiles
Interactions HTML 5 inputs
– tel
– number
– date
– pattern
• e.g. pattern=”[0-9]*”
Enhancements
• Modernizr (feature detection)
• Gesture Control – Ensure JS and UI support it e.g. Carousels. – Add your own
Responsive Assets
Conditional loading of JS – matchMedia
– enquire.js – harvey.js
Assets
• Minimise HTTP Requests • Sprites • Avoid weighty JS libraries • Custom JS at the bottom • Overloading with External JS (FB/Twitter)
Speed
• Network Inspector
• YSlow
• Network Link Conditioner
Responsive Imagery 4 success criteria
• Fluid
• Art-directed
• Resolution (retina)
• File-size optimized
Fluid Nice and easy
height: auto !important;
max-width: 100%;
Focal Points
Retina Imagery
• SVG
• Icon Fonts
• @1.5X @2x
• Larger compressed images
picture, srcset
Deliver optimised image for viewport <span data-picture data-alt="Ordnance Survey"> <span data-src=”/ordnancesurvey-custommade.png"></span> <span data-src=”/[email protected]" 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=”/[email protected]" 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>
Responsive Tables
• Consider content
• Solutions – responsivetables.js – Flip scroll – Unseen column – Responsive Table
Responsive Video
• HTML 5 video height: auto !important;
width: 100% !important;
• For everything else there’s Fitvids.js
RESS (Responsive Web Design with Server Side Components)
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
Magento Exceptions
Conclusion
Responsive design paired with server side optimisations enables maintainable, future ready
device experiences
Start Now
• You are not too busy.
• You cannot afford not to.
• You set the standard for your business
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/
