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

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

52.
Columns provide structure.

53.
http://www.bostonglobe.com/

54.
target ÷ context = result

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

82.
Also:
embed
object
video

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

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

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

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

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

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

89.
@media screen {
! ...
}

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

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

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

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

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

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

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

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

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

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

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

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

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

103.
Breakpoints

104.
(where the design breaks)

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

106.
But what happens when
there are new devices?

107.
Break when the design tells you to.

108.
Options:

109.
Options:
Ignore Mobile?

110.
Options:
Ignore Mobile?
Separate Mobile Site

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

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

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

114.
Mobile First

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

116.
Mobile first = better user
experience across devices

117.
Mobile-Only Users

118.
Consider bandwidth

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

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

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

122.
Test early, test often

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

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

125.
Smartphones
Feature Phones
Tablets

126.
Touch Interaction

127.
Desktop Browsers
Mobile Browsers

128.
Device Lab DC
devicelabdc.com

129.
Responsive Process

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

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

132.
Static comps aren’t enough

133.
Style Tiles

134.
Style Tiles
fonts, colors, interface elements

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

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

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

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

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

140.
Design
Develop

141.
Design doesn’t end
when development begins

142.
Content First

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

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

145.
Q&A

146.
Resources

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

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

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

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

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

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

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