UX & Responsive Design


Published on

At UXCamp DC, January 5, 2013.

Published in: Design
1 Comment
  • Ok yes http://giaunhanh.mobi
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UX & Responsive Design

  1. UX & Responsive DesignOptimizing User Experience Across DevicesUXCamp DC -- January 5, 2013 Clarissa Peterson clarissapeterson.com @clarissa
  2. "So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck." - my friend whos not a web designer
  3. You have some options:
  4. Fixed-width Site
  5. Separate Mobile Site
  6. One Website
  7. History
  8. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  9. Responsive Design
  10. How It Works(but words don’t mean much)
  11. two things:
  12. Flexible
  13. Adjustable
  14. http://www.unitedpixelworkers.com/
  15. http://www.unitedpixelworkers.com/
  16. http://www.unitedpixelworkers.com/
  17. http://www.unitedpixelworkers.com/
  18. http://www.unitedpixelworkers.com/
  19. Why?
  20. 85% of American adultsown a cell phonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  21. 45% of American adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  22. 40% have a cell phone that’snot a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  23. 17%do most of their online browsing on their phone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  24. But most of them also have a desktop or laptop.
  25. Content Parity
  26. The beauty of the web is its openness.Don’t arbitrarily lock people out becauseof browser, device or configuration. - Brad Frost @brad_frost
  27. Access
  28. http://www.unheap.com/
  29. Future-Friendly
  30. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
  31. Photo Credit: Rafel Miro via Creative Commons http://flic.kr/p/8KSGt7
  32. Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://flic.kr/p/dpGnUj
  33. Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://flic.kr/p/4nGFUd
  34. The best way to be future friendly is to bebackwards-compatible. - Jeremy Keith @adactio
  35. Context of Use
  36. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
  37. Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c
  38. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
  39. Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ
  40. Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6
  41. Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6
  42. Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG
  43. Small-Screen First
  44. Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps. - Stephanie Rieger @stephanierieger
  45. Design Process
  46. Start with content.
  47. DesignDevelop
  48. Prototyping
  49. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
  50. Frameworks
  51. http://foundation.zurb.com/
  52. http://foundation.zurb.com/
  53. http://foundation.zurb.com/prototype-example2.php
  54. http://foundation.zurb.com/docs/forms.php
  55. http://foundation.zurb.com/docs/buttons.php
  56. http://foundation.zurb.com/docs/typography.php
  57. Style Tiles
  58. Communicate theessence of a visual brand for the web
  59. Style Tiles via Creative Commons http://styletil.es/
  60. help form acommon visual language between the designers and the stakeholders
  61. Style Tiles via Creative Commons http://styletil.es/
  62. Testing
  63. Touch
  64. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
  65. "Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress." - Dan Willis @uxcrank
  66. Give everybody the same content Displayed appropriately for their deviceNo matter what device they have.
  67. There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet Web. - Stephen Hay @stephenhay
  68. Fin