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