Responsive web design and eCommerce
•
0 likes•425 views
This document discusses responsive web design and e-commerce considerations. It defines responsive design as designs that respond to the user's behavior and environment based on screen size, platform, and orientation. It emphasizes that the user experience should not be pared down and that context comes from user goals and needs rather than device dimensions. Guiding principles include consistency across devices, prioritizing important elements, and removing distractions without reducing content. Examples of responsive e-commerce websites are provided.
Report
Share
Responsive web design and eCommerce
- 1. Date: May 10, 2013 Version: 1.0 Company: Virgin America Responsive Web Design & eCommerce Friday, May 10, 13
- 2. Responsive Web Design 2 Friday, May 10, 13
- 3. What is Responsive Web Design? Design and development that responds to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. 3 Friday, May 10, 13
- 4. Mobile Context of Use 4 Contextual Influences User’s Considerations Device Capability Friday, May 10, 13
- 5. Mode of Usage Mobile is a user state, not a device, and usage is a more influential factor on interface design than browser width, say. Design with attention to things such as: • search style* • duration of usage • lean back vs on-the-go use • single- vs multi-user • user intent * Average mobile search on has roughly double the keywords than the average desktop search: the interface is smaller but mobile searchers are more task-focused and highly specific in what they’re seeking. “70% of PC search tasks are completed in one week, while 70% of mobile search tasks are done in one hour.” 5 Friday, May 10, 13
- 6. Context Awareness An aspect of focussing on the user is consideration for the context and surroundings of usage, this should cover all aspects of the context of that usage: • noise level • privacy • light level • bandwidth • constancy of connectivity; including offline usage • location awareness and location signal strength • accessibility 6 Friday, May 10, 13
- 7. The Device The capabilities of the device being employed is more important than its dimensions. Detect features rather than try and adapt to specific devices. As device proliferation becomes even more of a problem to manage, detection by model is untenable so favor feature provisioning by device capability including: • input method (i.e. five-key, keyboard/mouse, rollerball, touch, multi-touch/gesture, facial recognition, body) • screen resolution • device/screen size • location awareness • standards support • device functionality 7 Friday, May 10, 13
- 8. Components of Responsive Web Design 8 Friday, May 10, 13
- 9. Media Queries 320px 768px 1024px 1280px 1920px SMARTPHONE TABLET NETBOOK MONITOR DISPLAY 9 Friday, May 10, 13
- 10. Fluid Grids Header A B C Header A D F B E G C H Header A I B J E Header C F H D G J 320px 1024px +768px 10 Friday, May 10, 13
- 11. Responsive Imagery and Typography 320px 1024px +768px Aa Bb Cc Aa Bb Cc Aa Bb Cc 76kb 200kb 1.4MB 11 Friday, May 10, 13
- 12. Guiding Principles 12 Friday, May 10, 13
- 13. Don’t Pare Down the User Experience 13 Friday, May 10, 13
- 14. Don’t Pare Down the User Experience 13 • Simplify Tasks don’t limit features • Don’t assume user goals are the same on every device • Mobile devices are not always used in a mobile context Friday, May 10, 13
- 15. Fundamentally... Context comes from Action 14 Friday, May 10, 13
- 16. Fundamentally... Context comes from Action 14 Action dictated by Goals Friday, May 10, 13
- 17. Fundamentally... Context comes from Action 14 Action dictated by Goals Goals set by Needs Friday, May 10, 13
- 18. eCommerce Considerations 15 Friday, May 10, 13
- 19. Be consistence 16 Friday, May 10, 13
- 20. Be consistence 16 For example, the same filters available on all devices Friday, May 10, 13
- 21. Cut content in context 17 Friday, May 10, 13
- 22. Cut content in context 17 Compare the desktop version to the mobile Call To Action: skips the detailed content and gets straight to the point – Get Access Now. Friday, May 10, 13
- 23. Scale 18 Friday, May 10, 13
- 24. Scale 18 Don’t scale navigation elements until too small to be functional Friday, May 10, 13
- 25. Don’t use ‘Sticky’ navigation 19 Friday, May 10, 13
- 26. Don’t use ‘Sticky’ navigation 19 As soon as you scroll, the navigation occupies 40% of the page Friday, May 10, 13
- 27. Include only Vital Fields 20 Friday, May 10, 13
- 28. Include only Vital Fields 20 Friday, May 10, 13
- 29. Leverage Mobile UI Elements 21 Friday, May 10, 13
- 30. Remove Distractions, Not Content 22 Friday, May 10, 13
- 31. Remove Distractions, Not Content 22 Use progressive disclosure to focus the visitor's attention on the most influential and important elements whilst simplifying the user interface, particularly on mobile. Friday, May 10, 13
- 32. eCommerce RWD Examples 23 Friday, May 10, 13
- 33. Skinny Ties 24 Friday, May 10, 13
- 34. Indochino 25 Friday, May 10, 13
- 35. Cocosa 26 Friday, May 10, 13
- 36. Currys/PC World 27 Friday, May 10, 13
- 37. Tommy Hilfiger 28 Friday, May 10, 13
- 38. Smythson 29 Friday, May 10, 13
- 39. Monki 30 Friday, May 10, 13
- 40. United Pixelworker 31 Friday, May 10, 13