1. Introduction to
Responsive Web Design
version 2.0
Clarissa Peterson
@clarissa

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

3. 1. What is responsive web design
2. Where it came from
3. Example sites
4. Hands-on demonstration
5. Other things you should know
6. Q&A

4. Responsive Web Design

5. Responsive Web Design

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

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

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

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

10. http://www.bostonglobe.com/

11. http://www.bostonglobe.com/

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

13. HTML

14. Markup Language

15. 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. Designing for one canvas.

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

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

26. Designing for unlimited canvases?

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

28. The web is free from the physical
restraints of the canvas

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

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

31. 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/

32. Responsive Web Design http://www.abookapart.com/products/responsive-web-design/

33. Responsive Architecture

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

35. It’s easy to build a house
on flat land with four walls.

36. © Clarissa Peterson

37. Work around the environment.

38. © Clarissa Peterson

39. Think about design differently.

40. © Clarissa Peterson

41. A website with a responsive
design is no longer just a
picture on a canvas.

42. A Few Examples
of Responsive Design

43. Smashing Magazine
http://www.smashingmagazine.com
People (mobile site)
http://m.people.com
United Pixelworkers
http://www.unitedpixelworkers.com/

44. World Wildlife Fund
http://worldwildlife.org/
Stuff & Nonsense
http://www.stuffandnonsense.co.uk/
Emeril’s Restaurants
http://www.emerilsrestaurants.com/

45. Andersson-Wise Architects
http://www.anderssonwise.com
Federal Government: AIDS.gov
http://aids.gov
WordPress Theme: Twenty Twelve
http://twentytwelvedemo.wordpress.com/

46. Two Approaches

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

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

49. 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

50. Older Browsers:
Some of this won’t work in older
browsers, so you’ll need to do some
extra stuff to make it work.
(read the book....)

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

54. Columns provide structure.

55. http://www.bostonglobe.com/

57. target ÷ context = result

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

59. (but you don’t actually need
to remember the formula)

60. <div class="site">
! ...
</div>
Example 1 in style.css

62. .site {
! width: 1280px;
}
Example 1 in style.css

63. .site {
! width: 100%;
}
Example 1 in style.css

64. <div id="heading">
! ...
</div>
Example 2 in style.css

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

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

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

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

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

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

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

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

76. <div id=”content”>
<div class="contentbox">
<h2>Who We Are</h2>
...
</div>
...
</div>
Example 4 in style.css

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

79. .contentbox {
! width: 31.25%;
! 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 3.125% 2em 0;
}
Example 4 in style.css

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

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

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

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

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

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

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

93. Don’t set the width and height
attributes of the image

94. Also:
embed
object
video

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

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

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. @media screen {
! ...
}

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

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

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

107. @media screen and (max-width: 1100px) {
! #navbox {
! !
! !
! !
! }
}
Example 6 in style.css

108. @media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! !
! !
! }
}
Example 6 in style.css

110. @media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! !
! }
}
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

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

117. @media screen and (max-width: 500px) {
! .nav li {
! ! display: block;
! !
! !
! }
}
Example 7 on style.css

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

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

124. @media screen and (max-width: 500px) {
! ...
! .contentbox {
! ! width: 100%;
! !
! !
! }
}
Example 7 on style.css

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

128. Breakpoints

129. (where the design breaks)

130. 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

131. But what happens when
there are new devices?

132. Break when the design tells you to.

133. Options:

134. Options:
Ignore Mobile?

135. Options:
Ignore Mobile?
Separate Mobile Site

136. Options:
Ignore Mobile?
Separate Mobile Site
Native Mobile App

137. Options:
Ignore Mobile?
Separate Mobile Site
Native Mobile App
Responsive Design

138. Your boss saying you need
a mobile app is not a good
reason to make a mobile app.

139. Mobile First

140. Start from the smallest screen,
determine which parts of the design
are truly necessary, and make those
the basis of your design.

141. Mobile first = better user
experience across devices

142. Mobile-Only Users

143. Consider bandwidth

144. Older Browsers:
Give them default CSS that they can
understand.

145. Device Testing
(if you don’t have devices)

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

147. Test early, test often

148. Test at Various Widths
tools such as:
resizemybrowser.com
quirktools.com/screenfly/

149. Use a Mobile Emulator
such as:
mobilephoneemulator.com

150. Smartphones
Feature Phones
Tablets

151. Touch Interaction

152. Desktop Browsers
Mobile Browsers

153. Device Lab DC
devicelabdc.com

154. Responsive Process

155. How to explain responsive
design to (internal/external) clients

156. The design won’t look the
same on every browser/device

157. Static comps aren’t enough

158. Style Tiles

159. Style Tiles
fonts, colors, interface elements

160. Style Tiles
fonts, colors, interface elements
communicate the essence of a visual
brand for the web

161. Style Tiles via Creative Commons http://styletil.es/

162. Style Tiles
help form a common visual
language between the
designers and the stakeholders

163. Style Tiles via Creative Commons http://styletil.es/

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

165. Design
Develop

166. Design doesn’t end
when development begins

167. Content First

168. Users aren’t coming to your
site because it’s pretty,
they’re coming for the content.

169. Responsive Design:
We are free of the canvas.

170. Q&A

171. Resources

172. Books
Ethan Marcotte
Responsive Web Design (2011)
http://www.abookapart.com/products/responsive-web-design/
Luke Wroblewski
Mobile First (2011)
http://www.abookapart.com/products/mobile-first

173. Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/
How to Approach a Responsive Design (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
3 Types of Solutions To Work With Responsive Images - Steven Bradley (July 2012)
http://www.vanseodesign.com/web-design/responsive-images/

174. More Articles
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
Presidential Smackdown Edition: Separate Mobile Website Vs. Responsive Website - Brad Frost (Aug. 2012)
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-
smackdown/
Responsive Design Case Study (South Tees Hospitals NHS Foundation Trust) - Matt Berridge (Aug. 2012)
http://builtbyboon.com/blog/responsive-design-case-study
Miscellaneous
Someone asked how I measure things on the screen:
MeasureIt (Firefox add-on)
https://addons.mozilla.org/en-US/firefox/addon/measureit/

175. 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/

176. Other Information
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/

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

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