A hands-on workshop for DC Web Women on August 14, 2012. Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/

1. Introduction to
Responsive Web Design
Clarissa Peterson
@clarissa

2. a workshop for the
DC Web Women
Code(Her) Series
August 14, 2012

3. Responsive Web Design:

4. Responsive Web Design:
A collection of techniques that allow your
website to respond to the device that it is
being viewed on.

5. Responsive Web Design:
A collection of techniques that allow your
website to respond to the device that it is
being viewed on.
This allows all users to have an optimal experience
without creating separate sites for different devices.

6. http://www.bostonglobe.com/

7. http://www.bostonglobe.com/

8. http://www.bostonglobe.com/

9. http://www.bostonglobe.com/

10. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

11. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

12. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

13. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

14. HTML

15. The first website. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

16. <p>...</p>
<h1>...</h1>
<a href=””>...</a>

17. <hp1>...</hp1>
(highlighting)

18. <blink>...</blink>

19. Control:
HTML tables
spacer gifs

20. Cascading Style Sheets (CSS)

21. HTML Content
CSS Presentation

22. John Kannenberg via Creative Commons http://flic.kr/p/9E7tqh

23. Brendan Gates via Creative Commons http://flic.kr/p/dvX1J

24. Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC

25. Brad Frost via Creative Commons http://flic.kr/p/cfQwL7

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

27. Paulo Fierro via Creative Commons http://flic.kr/p/ae8Nnr

28. Responsive web design offers us a way
forward, finally allowing us to “design for
the ebb and flow of things.”
- Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/

29. Responsive Web Design, 2011 http://www.abookapart.com/products/responsive-web-design/

30. Responsive Architecture

31. Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg

32. Fallingwater © Clarissa Peterson

33. Fallingwater © Clarissa Peterson

34. Fallingwater © Clarissa Peterson

35. A Few Example Sites

36. Andersson-Wise Architects
http://www.anderssonwise.com
People (mobile site)
http://m.people.com
Grey Goose
http://www.greygoose.com

37. Smashing Magazine
http://www.smashingmagazine.com
Tattly
http://tattly.com
AIDS.gov
http://aids.gov

38. Two Approaches

39. 1. Start from scratch
2. Make an existing design
more responsive

40. 1. Start from scratch
2. Make an existing design
more responsive

41. 1. Start from scratch
2. Make an existing design
more responsive

42. download files for hands-on exercise here:
http://clarissapeterson.com/files/dcww/
open in your text editor: style.css
open in your browser: demo.html

43. If you’re doing this at home, please note that each
section of code is marked at the bottom of the slide with
an example number that you can look for in your
style.css file.
Example 1 in style.css like this

44. Older Browsers:
You need to do some extra stuff
to make all this work and we won’t
have time to get to it today.
(but make sure you learn it later)

45. Live site http://www.dcwebwomen.org

46. Demo site with streamlined code (so it’s easier to see what you’re doing)

47. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

48. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

50. Flexible Typesetting

51. html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio,
video {
! margin: 0;
! padding: 0;
! border: 0;
! font-size: 100%;
! font: inherit;
! vertical-align: baseline;
}
http://meyerweb.com/eric/tools/css/reset/

52. html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio,
video {
! margin: 0;
! padding: 0;
! border: 0;
! font-size: 100%;
! font: inherit;
! vertical-align: baseline;
}
http://meyerweb.com/eric/tools/css/reset/

53. target ÷ context = result

54. .nav li a:link {
! color: #2b737a;
! text-decoration:none;
! font-size: 22px;
! font-weight:100;
}
Example 1 in style.css

55. target ÷ context = result
22px ÷ 16px = 1.375em

56. .nav li a:link {
! color: #2b737a;
! text-decoration:none;
! font-size: 1.375em;
! font-weight:100;
}
Example 1 in style.css

57. .nav li a:link {
! color: #2b737a;
! text-decoration:none;
! font-size: 1.375em; !
! ! ! ! ! ! ! /* 22px / 16px */
! font-weight:100;
}
Example 1 in style.css

58. h2 24px ÷ 16px = 1.5em
h3 20px ÷ 16px = 1.25em
p 14px ÷ 16px = .875em
Example 2 in style.css

59. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

60. target ÷ context = result
___px ÷ 1280px = __%

61. <div class="site">
! ...
</div>
Example 3 in style.css

63. .site {
! width: 1280px;
}
Example 3 in style.css

64. .site {
! width: 100%;
/* 1280px / 1280px */
}
Example 3 in style.css

65. <div id="heading">
! ...
</div>
Example 3 in style.css

67. #heading {
! background-color: #fff;
! width: 960px;
! margin: 1.5em auto;
! text-align:right;
}
Example 3 in style.css

68. #heading {
! background-color: #fff;
! width: 75%;
! margin: 1.5em auto;
! text-align:right;
}
Example 3 in style.css

69. <div id="promowrapper">
<img src="promoimage.jpg" alt="Attend
seminars, networking events, and
more." />
</div>
Example 4 in style.css

71. #promowrapper {
! margin: 0 auto;
! width: 960px;
}
Example 4 in style.css

72. #promowrapper {
! margin: 0 auto;
! width: 75%;
}
Example 4 in style.css

73. <div id="content">
...
</div>
Example 4 in style.css

75. #content {
! background-color: #fff;
! width: 960px;
! margin: auto;
}
Example 4 in style.css

76. #content {
! background-color: #fff;
! width: 75%;
! margin: auto;
}
Example 4 in style.css

77. <div class="contentbox">
<h2>Who We Are</h2>
...
</div>
Example 4 in style.css

79. .contentbox {
! width: 300px;
! float:left;
! padding: 2em 30px 2em 0;
}
Example 4 in style.css

80. .contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 30px 2em 0;
}
Example 4 in style.css

81. .contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 30px 2em 0;
}
Example 4 in style.css

82. .contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 3.125% 2em 0;
}
Example 4 in style.css

83. <div id="footercontent">
...
</div>
Example 5 in style.css

85. #footercontent {
! width: 960px;
! margin: auto;
! color: #fff;
}
Example 5 in style.css

86. #footercontent {
! width: 75%;
! margin: auto;
! color: #fff;
}
Example 5 in style.css

88. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

90. <div id="promowrapper">
<img src="promoimage.jpg" alt="..." />
</div>
#promowrapper {
! margin: 0 auto;
! width: 75%;
}
Example 4 in style.css

91. #promo img {
! margin: 2em 0;
}
Example 4 in style.css

92. #promo img {
! margin: 2em 0;
! max-width: 100%;
}
Example 4 in style.css

94. embed
object
video

95. 1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

96. <link rel="stylesheet" href="style.css"
media=”print” />

97. h1 { color: #f00; }
p { color: #333; }
@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}

98. h1 { color: #f00; }
p { color: #333; }
@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}

99. h1 { color: #f00; }
p { color: #333; }
@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}

100. h1 { color: #f00; }
p { color: #333; }
@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}

101. h1 { color: #f00; }
p { color: #333; }
@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}

102. h1 { color: #f00; }
p { color: #333; }
@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}

103. @media screen {
! ...
}

104. @media screen and (min-width: 1024px) {
! ...
}

105. @media screen and (max-width: 1024px) {
! ...
}

106. @media screen and (min-width: 768px) and
(max-width: 1024px) {
! ...
}

107. min-device-width: 1024px
max-device-width: 1024px
orientation: landscape
orientation: portrait
device-aspect-ratio: 16/9
min-color-index: 256
min-resolution: 300dpi

109. @media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}
Example 6 in style.css

110. @media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}
Example 6 in style.css

112. @media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}
Example 6 in style.css

114. @media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}
Example 6 in style.css

118. @media screen and (max-width: 500px) {
! ...
}
Example 7 on style.css

119. @media screen and (max-width: 500px) {
! .nav li {
! ! display: block;
! ! margin-left: 0em;
! ! padding-bottom: 5px;
! }
}
Example 7 on style.css

121. @media screen and (max-width: 500px) {
! .nav li {
! ! display: block;
! ! margin-left: 0em;
! ! padding-bottom: 5px;
! }
}
Example 7 on style.css

123. @media screen and (max-width: 500px) {
! ...
! .logo {
! ! float: none;
! ! text-align: center;
! }
}
Example 7 on style.css

126. @media screen and (max-width: 500px) {
! ...
! .contentbox {
! ! width: 100%;
! ! float: none;
! ! padding: 1.5em 0 0 0;
! }
}
Example 7 on style.css

128. @media screen and (max-width: 500px) {
! ...
! .contentbox {
! ! width: 100%;
! ! float: none;
! ! padding: 1.5em 0 0 0;
! }
}
Example 7 on style.css

130. Some Other Things You Should Know
(very briefly)

131. Breakpoints

132. Standard Breakpoints
Why to Use Them
Why Not to Use Them

133. Commonly-Used Breakpoints
Device Type Width
Mobile phones (portrait) 320px
Mobile phones (landscape) 480px
7” tablets (portrait) 600px
10” tablets (portrait) 768px
10” tablets (landscape), Monitors 1024px
Wider monitors 1280px

134. What’s a Device Lab?

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

136. Device Lab DC
http://www.devicelabdc.com/

137. Mobile First

138. If you’re thinking about mobile:
responsive design
isn’t the only thing
you need to think about.

139. A mobile app should not
be the default choice.
Only do it if it’s the best choice.

140. Responsive Workflow

141. Photoshop is for photos
InDesign is for design & typography

142. We are free of the canvas

143. Content First

144. Q&A

145. Resources

146. Books
Ethan Marcotte
Responsive Web Design (2011)
http://www.abookapart.com/products/responsive-web-design/

147. Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/
How to Approach a Responsive Design (The Boston Globe) - Tito Bottitta (Jan. 2012)
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
50 Fantastic Tools for Responsive Web Design - Denise Jacobs, Peter Gasston (Apr. 2012)
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
Design Process In The Responsive Age - Drew Clemens (May 2012)
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Making of: People Magazine's Responsive Mobile Website (July 2012)
http://globalmoxie.com/blog/making-of-people-mobile.shtml
The Top Responsive Web Design Problems and How to Avoid Them - James Young (Aug. 2012)
http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

148. Websites
@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD
Future Friendly
making things that are future-friendly
http://futurefriend.ly/
Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/
Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/
Responsive Design Bookmarklet
a handy tool for responsive design testing
http://responsive.victorcoulon.fr/

149. Other Things You Asked About
Resources mentioned during Q&A. Thanks for all the great questions!
Kristina Halvorson
Content Strategy for the Web, Second Edition (2012)
http://contentstrategy.com/
A List Apart
http://www.alistapart.com/
PX to EM Conversion Made Simple
http://pxtoem.com/

150. Not RWD
DC Web Women
A professional organization of more than 3000 members located in the Washington, DC, area.
Members are professional women, students and enthusiasts who specialize in web-related fields.
http://www.dcwebwomen.org/
We Are All Awesome
Be a role model: why there should be more female speakers at tech conferences. Resources on
creating presentations, getting ideas, writing proposals, and finding conferences with open CFPs.
http://weareallaweso.me/

151. Mount Rainier National Park. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)

152. Thank You
Clarissa Peterson
clarissapeterson.com
cp@clarissapeterson.com
@clarissa