Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX & Responsive Design


Published on

At UXCamp DC, January 5, 2013.

Published in: Design
  • Ok yes
    Are you sure you want to  Yes  No
    Your message goes here

UX & Responsive Design

  1. UX & Responsive DesignOptimizing User Experience Across DevicesUXCamp DC -- January 5, 2013 Clarissa Peterson @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
  9. Responsive Design
  10. How It Works(but words don’t mean much)
  11. two things:
  12. Flexible
  13. Adjustable
  19. Why?
  20. 85% of American adultsown a cell phone
  21. 45% of American adultsown a smartphone
  22. 40% have a cell phone that’snot a smartphone
  23. 17%do most of their online browsing on their phone
  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
  29. Future-Friendly
  30. Illustration credit: Anna Debenham via Creative Commons
  31. Photo Credit: Rafel Miro via Creative Commons
  32. Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons
  33. Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons
  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
  37. Photo credit: Mith Huang via Creative Commons
  38. Photo credit: Carlos Smith via Creative Commons
  39. Photo credit: Pete Markham via Creative Commons
  40. Photo credit: Wendi Dunlap via Creative Commons
  41. Photo credit: Channy Yun via Creative Commons
  42. Photo credit: Matt Hamm via Creative Commons
  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
  50. Frameworks
  57. Style Tiles
  58. Communicate theessence of a visual brand for the web
  59. Style Tiles via Creative Commons
  60. help form acommon visual language between the designers and the stakeholders
  61. Style Tiles via Creative Commons
  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