Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The User Experience of Responsive Design

7559f6cff1f5efc2d210965febd4d71c?s=47 Bermon Painter
September 27, 2011

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

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

September 27, 2011
Tweet

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