The User Experience of Responsive Design

Presented at http://www.charlotteux.org

The web is constantly changing and improving. People are visiting your sites from a wide variety of devices and browsers. Can the sites you're working on provide a quality user experience if the person is using a 27" monitor? A tablet device (iPad's anyone)? A mobile device?

Learn about various approaches and the techniques behind them to deliver a good user experience to more than one context. We'll explore:

Responsive vs. Adaptive vs. Static Design
Mobile-first
Content-first

Transcript

1. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 RESPONSIVE WEB DESIGN A UX PERSPECTIVE
2. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 LOVELY DATA
3. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Mobile data is growing 4x faster than broadband. http://www.readwriteweb.com/archives/mobile_data_explosion_75_exabytes_by_2015.php
4. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 By 2015 mobile devices will be used to access the internet more than PC’s http://www.idc.com/getdoc.jsp?containerId=prUS23028711
5. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 25% of US & UK internet users access the the web via a mobile connection http://ondeviceresearch.com/blog
6. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 More than 20% of internet users in the US/UK don’t access the web via a PC http://ondeviceresearch.com/blog
7. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 RESPONSIVE DESIGN
8. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011
9. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 A design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user's needs. - Ethan Marcotte
10. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Flexible Grids
11. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Flexible Media
12. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Media Queries
13. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 CONTROL
14. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011
15. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011
16. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Embrace Flexibility
17. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 THE HOLY WAR
18. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 One Web to Rule Them All
19. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Many Webs to...
20. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 It Depends
21. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 the audience It depends on...
22. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 business requirements It depends on...
23. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 time & technology constraints It depends on...
24. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 maintenance requirements It depends on...
25. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 politics It depends on...
26. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 CONTEXT
27. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Context is King: circumstances or conditions that surround a person, place or thing. Content is of little value if it does not address the context of where you are. - Cameron Moll
28. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 layout ≠ content
29. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 CONTENT FIRST
30. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 1. Build your content
31. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 2. Add semantic structure
32. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 3. Add the presentation
33. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 4. Add the behavior
34. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Progressive Enhancement
35. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 MISTAKEN PERSONA
36. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 We have once again created a consensual hallucination. Just as we generated a mythical desktop user with the perfect viewport size, a fast connection and an infinite supply of attention, we have now generated a mythical mobile user who has a single goal and no attention span. - Jeremy Keith
37. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 Tailor the approach to the project
38. CHARLOTTE UX BERMON PAINTER SEPT 19, 2011 FIN