Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site. Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.

1. Clarissa Peterson
@clarissa
Designing Responsive Websites

2. http://www.oliverharvey.co.uk/

3. http://www.oliverharvey.co.uk/

4. http://www.linksture.com/

5. http://www.linksture.com/

6. http://skinnyties.com/

7. http://skinnyties.com/

8. Flexible
https://flic.kr/p/jXxfeF

13. #content {
width: 90%;
}

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

15. http://www.unitedpixelworkers.com/

16. http://www.unitedpixelworkers.com/

17. http://www.unitedpixelworkers.com/

18. http://www.unitedpixelworkers.com/

19. http://www.unitedpixelworkers.com/

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

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

27. https://flic.kr/p/cfQwL7

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

29. https://flic.kr/p/35Ahx

30. Design Develop

31. Design
Develop

32. https://flic.kr/p/rZVTg

33. “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

34. Content
https://flic.kr/p/4qc5EB

35. http://teamtreehouse.com

36. http://teamtreehouse.com

37. http://teamtreehouse.com

38. http://teamtreehouse.com

39. Small Screen First
https://flic.kr/p/abN4Q4

44. Wireframes

45. http://flic.kr/p/cJJdzm

46. http://foundation.zurb.com/

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

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

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

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

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

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

53. http://www.hotgloo.com/

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

55. http://www.trentwalton.com

56. http://www.trentwalton.com

57. http://www.trentwalton.com

58. http://www.trentwalton.com

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

61. 1em = default

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

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

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

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

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

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

68. Scale
https://flic.kr/p/dhufQk

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

72. 45-75 Characters

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

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

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

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

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

80. http://wearyoubelong.com/

81. http://wearyoubelong.com/

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

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

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

85. https://flic.kr/p/jRnhnU

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

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

93. Performance

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

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

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

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

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

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

101. http://www.browserstack.com/

102. Device Labs

103. https://flic.kr/p/cdVB9h
Clarissa Peterson
Peterson/Kandy
clarissapeterson.com
@clarissa