UX & Responsive Design

Although responsive web design has only been around for a few years, it's grown up a lot since first we started talking about fluid grids and media queries. Now, we look to responsive design with the goal of providing a good experience for every user on every device. From the DC Web Women Code(Her) Conference, 9/13/14.

Transcript

1. UX & Responsive Design @clarissa https://flic.kr/p/ohrJBb
3. 2010 http://archive.aneventapart.com/2010/dc/
4. Flexible https://flic.kr/p/jXxfeF
9. Adjustable https://flic.kr/p/j9KrpA
10. http://www.unitedpixelworkers.com/
11. http://www.unitedpixelworkers.com/
12. http://www.unitedpixelworkers.com/
13. http://www.unitedpixelworkers.com/
14. http://www.unitedpixelworkers.com/
15. article { width: 92%; } @media only screen and (min-width:40em) { article { width: 70%; float: left; }
16. http://www.apple.com
17. http://www.apple.com
18. http://www.apple.com
20. https://flic.kr/p/gTH5oL
21. https://flic.kr/p/gTH5oL
22. https://flic.kr/p/oq2r8z
23. https://flic.kr/p/5yk9cA
24. https://flic.kr/p/f1oriS
25. https://flic.kr/p/bR4vGi
26. https://flic.kr/p/oBTNuP
27. https://flic.kr/p/4oVCo
28. https://flic.kr/p/4FGx7a
29. https://flic.kr/p/gFgXfS
30. https://flic.kr/p/mw5wzT
31. https://flic.kr/p/aAJin6
32. Performance
33. https://flic.kr/p/23xNNg
34. “You can't mock up performance in Photoshop.” - Brad Frost @brad_frost
35. Performance Budget https://flic.kr/p/hT9yw7
36. http://mobitest.akamai.com
37. https://flic.kr/p/5R51o3
39. https://flic.kr/p/7NFTF6
40. Blocking CSS & JavaScript https://flic.kr/p/5kcFk
41. -100ms ➔ +1%
42. -400ms ➔ +9%
43. Being a Web designer & not considering speed/performance is like being a print designer & not considering how your colors will print. - Luke Wroblewski @lukew
44. Touch https://flic.kr/p/jRnhnU
45. http://2014.blendconf.com
46. http://2014.blendconf.com
47. https://flic.kr/p/6rMRUZ
49. ul a { display: block; }
50. ul a { display: block; padding: 3px 5px; }
51. http://www.cupcakeipsum.com
52. https://flic.kr/p/9UByoJ
53. Mobile https://flic.kr/p/d5DEjS
54. https://flic.kr/p/nNu7sP
55. http://www.kiwibank.co.nz
56. http://www.kiwibank.co.nz
57. http://www.kiwibank.co.nz
58. <a href=”tel:202-123-4567”>202-123-4567</a>
59. Typography https://flic.kr/p/4r1D8w
60. http://www.trentwalton.com
61. http://www.trentwalton.com
62. http://www.trentwalton.com
63. http://www.trentwalton.com
64. https://flic.kr/p/eYEFGY Ems & Rems
66. 1em = default
67. 2em = twice as big 1em = default
68. 2em = twice as big 1em = default .5em = half as big
69. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
70. body { font-size: 100%; }
71. https://flic.kr/p/8iNCNU
72. https://flic.kr/p/dhufQk
73. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
76. 45-75 Characters
77. max-width https://flic.kr/p/7nCGk3
78. article { max-width: 28em; }
79. article { max-width: 28em; }
81. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
82. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
83. http://wearyoubelong.com/
84. http://wearyoubelong.com/
85. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }
86. #intro { font-size: 1em; font-family: Helvetica, sans-serif; } @media only screen and (min-width:30em) { #intro { font-size: 1.2em; font-family: Populaire, sans-serif; } }
87. Media Queries https://flic.kr/p/ajTNcB
88. https://flic.kr/p/8U1KwJ
89. Design Process https://flic.kr/p/bSHvgv
90. https://flic.kr/p/abN4Q4
91. https://flic.kr/p/4qc5EB
92. http://teamtreehouse.com
93. http://teamtreehouse.com
94. http://teamtreehouse.com
95. Testing https://flic.kr/p/bPZzeM
96. http://www.browserstack.com/
98. http://dcdevicelab.com
99. https://flic.kr/p/fyTLNm Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa