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.

1. UX & Responsive Design
@clarissa
https://flic.kr/p/ohrJBb

2. 2002

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