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

5.
Adjustable
https://flic.kr/p/j9KrpA

6.
http://www.unitedpixelworkers.com/

7.
http://www.unitedpixelworkers.com/

8.
http://www.unitedpixelworkers.com/

9.
http://www.unitedpixelworkers.com/

10.
http://www.unitedpixelworkers.com/

11.
article { width: 92%; }
@media only screen and (min-width:40em) {
article { width: 70%; float: left;
}

12.
http://www.apple.com

13.
http://www.apple.com

14.
http://www.apple.com

15.
https://flic.kr/p/gTH5oL

16.
https://flic.kr/p/gTH5oL

17.
https://flic.kr/p/oq2r8z

18.
https://flic.kr/p/5yk9cA

19.
https://flic.kr/p/f1oriS

20.
https://flic.kr/p/bR4vGi

21.
https://flic.kr/p/oBTNuP

22.
https://flic.kr/p/4oVCo

23.
https://flic.kr/p/4FGx7a

24.
https://flic.kr/p/gFgXfS

25.
https://flic.kr/p/mw5wzT

26.
https://flic.kr/p/aAJin6

27.
Performance

28.
https://flic.kr/p/23xNNg

29.
“You can't mock up performance in
Photoshop.”
- Brad Frost
@brad_frost

30.
Performance Budget
https://flic.kr/p/hT9yw7

31.
http://mobitest.akamai.com

32.
https://flic.kr/p/5R51o3

33.
https://flic.kr/p/7NFTF6

34.
Blocking CSS & JavaScript
https://flic.kr/p/5kcFk

35.
-100ms ➔ +1%

36.
-400ms ➔ +9%

37.
Being a Web designer & not considering
speed/performance is like being a print
designer & not considering how your
colors will print.
- Luke Wroblewski
@lukew

38.
Touch
https://flic.kr/p/jRnhnU

39.
http://2014.blendconf.com

40.
http://2014.blendconf.com

41.
https://flic.kr/p/6rMRUZ

42.
ul a { display: block; }

43.
ul a { display: block; padding: 3px 5px; }

44.
http://www.cupcakeipsum.com

45.
https://flic.kr/p/9UByoJ

46.
Mobile
https://flic.kr/p/d5DEjS

47.
https://flic.kr/p/nNu7sP

48.
http://www.kiwibank.co.nz

49.
http://www.kiwibank.co.nz

50.
http://www.kiwibank.co.nz

51.
<a href=”tel:202-123-4567”>202-123-4567</a>

52.
Typography
https://flic.kr/p/4r1D8w

53.
http://www.trentwalton.com

54.
http://www.trentwalton.com

55.
http://www.trentwalton.com

56.
http://www.trentwalton.com

57.
https://flic.kr/p/eYEFGY
Ems & Rems

58.
1em = default

59.
2em = twice as big
1em = default

60.
2em = twice as big
1em = default
.5em = half as big

61.
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }

62.
body { font-size: 100%; }

63.
https://flic.kr/p/8iNCNU

64.
https://flic.kr/p/dhufQk

65.
Line Length (Measure)
http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg

66.
45-75 Characters

67.
max-width
https://flic.kr/p/7nCGk3

68.
article { max-width: 28em; }

69.
article { max-width: 28em; }

70.
@media only screen and (min-width:48em) {
article { font-size: 1.1em; }
article p { line-height: 1.4;
margin: 1.4em auto; }
}

71.
@media only screen and (min-width:48em) {
article { font-size: 1.1em; }
article p { line-height: 1.4;
margin: 1.4em auto; }
}

72.
http://wearyoubelong.com/

73.
http://wearyoubelong.com/

74.
#intro {
font-size: 1em;
font-family: Helvetica, sans-serif;
}

75.
#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;
}
}

76.
Media Queries
https://flic.kr/p/ajTNcB

77.
https://flic.kr/p/8U1KwJ

78.
Design Process
https://flic.kr/p/bSHvgv

79.
https://flic.kr/p/abN4Q4

80.
https://flic.kr/p/4qc5EB

81.
http://teamtreehouse.com

82.
http://teamtreehouse.com

83.
http://teamtreehouse.com

84.
Testing
https://flic.kr/p/bPZzeM

85.
http://www.browserstack.com/

86.
http://dcdevicelab.com

87.
https://flic.kr/p/fyTLNm
Clarissa Peterson
Peterson/Kandy
clarissapeterson.com
@clarissa