Successfully reported this slideshow.

UX & Responsive Design

43

Share

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 clarissapeterson.com @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 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 adults own a cell phone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  21. 45% of American adults own a smartphone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  22. 40% have a cell phone that’s not a smartphone http://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 because of 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 be backwards-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 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 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 the essence of a visual brand for the web
  59. Style Tiles via Creative Commons http://styletil.es/
  60. help form a common 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. "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

×