At UXCamp DC, January 5, 2013.

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

7. Separate Mobile Site

10. One Website

15. History

17. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7

18. Responsive Design

19. How It Works
(but words don’t mean much)

20. two things:

21. Flexible

24. Adjustable

25. http://www.unitedpixelworkers.com/

26. http://www.unitedpixelworkers.com/

27. http://www.unitedpixelworkers.com/

28. http://www.unitedpixelworkers.com/

29. http://www.unitedpixelworkers.com/

30. Why?

31. 85%
of American adults
own a cell phone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

32. 45%
of American adults
own a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

33. 40%
have a cell phone that’s
not a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

34. 17%
do most of their online browsing
on their phone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

35. But most of them also have
a desktop or laptop.

36. Content Parity

41. The beauty of the web is its openness.
Don’t arbitrarily lock people out because
of browser, device or configuration.
- Brad Frost
@brad_frost

50. Access

51. http://www.unheap.com/

52. Future-Friendly

53. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL

54. Photo Credit: Rafel Miro via Creative Commons http://flic.kr/p/8KSGt7

55. Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://flic.kr/p/dpGnUj

56. Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://flic.kr/p/4nGFUd

57. The best way to be future friendly is to be
backwards-compatible.
- Jeremy Keith
@adactio

58. Context of Use

59. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv

60. Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c

61. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P

62. Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ

63. Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6

64. Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6

65. Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG

66. Small-Screen First

70. 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

71. Design Process

72. Start with content.

73. Design
Develop

74. Prototyping

75. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm

76. Frameworks

77. http://foundation.zurb.com/

78. http://foundation.zurb.com/

79. http://foundation.zurb.com/prototype-example2.php

80. http://foundation.zurb.com/docs/forms.php

81. http://foundation.zurb.com/docs/buttons.php

82. http://foundation.zurb.com/docs/typography.php

83. Style Tiles

84. Communicate the
essence of a visual brand
for the web

85. Style Tiles via Creative Commons http://styletil.es/

86. help form a
common visual language
between the designers
and the stakeholders

87. Style Tiles via Creative Commons http://styletil.es/

88. Testing

89. Touch

90. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)

91. "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

92. Give everybody the same content
Displayed appropriately
for their device
No matter what device they have.

93. 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

94. Fin