Successfully reported this slideshow.

UX & Responsive Design



Loading in …3
1 of 94
1 of 94

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

UX & Responsive Design

  1. UX & Responsive Design Optimizing User Experience Across Devices UXCamp DC -- January 5, 2013 Clarissa Peterson @clarissa
  2. "So you’re going to make websites work better on mobile phones? Because right now they mostly all suck." - my friend who's 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 adults own a cell phone
  21. 45% of American adults own a smartphone
  22. 40% have a cell phone that’s not 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 because of 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 be backwards-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 money at my desk using my phone because logging into my banking app requires fewer steps. - Stephanie Rieger @stephanierieger
  45. Design Process
  46. Start with content.
  47. Design Develop
  48. Prototyping
  49. Illustration credit: podluzny via Creative Commons
  50. Frameworks
  57. Style Tiles
  58. Communicate the essence of a visual brand for the web
  59. Style Tiles via Creative Commons
  60. help form a common 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. "It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress." - Dan Willis @uxcrank
  66. Give everybody the same content Displayed appropriately for their device No matter what device they have.
  67. There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. - Stephen Hay @stephenhay
  68. Fin