1.
Photo: Jakub Solovský https://flic.kr/p/i1RRZm
Designing Responsive Websites
Clarissa Peterson ✦ @clarissa
A hands-on workshop at EuroIA ✦ 27 Sept. 2014

2.
How to download files or view example pages
The white slides with purple text at the top are
where we did hands-on coding examples in the
workshop.
If you want to follow along and edit the files in
your text editor, go to this URL and click on
“download all files.” Otherwise, you can view each
example file from the same URL.
www.clarissapeterson.com/files/euroia/

3.
What is responsive
design?

4.
Flexible
Photo: Mike Mozard https://flic.kr/p/jXxfeF

5.
http://www.bostonglobe.com/

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

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

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

9.
Adjustable
Photo:William Warby
https://flic.kr/p/j9KrpA

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

11.
http://www.unitedpixelworkers.com/

12.
http://www.unitedpixelworkers.com/

13.
http://www.unitedpixelworkers.com/

14.
http://www.unitedpixelworkers.com/

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

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

17.
http://www.bostonglobe.com/

18.
http://www.bostonglobe.com/

19.
http://www.bostonglobe.com/

20.
http://www.bostonglobe.com/

21.
http://www.bostonglobe.com/

22.
Partially responsive
http://www.apple.com

23.
http://www.apple.com

24.
http://www.apple.com

25.
http://www.apple.com

26.
http://www.apple.com

27.
http://lrmc.com/

28.
http://lrmc.com/

29.
http://lrmc.com/

30.
http://lrmc.com/

31.
http://lrmc.com/

32.
Photo: Mo Riza https://flic.kr/p/ca1kU

33.
Photo: Luke Wroblewski https://flic.kr/p/gTH5oL

34.
Photo: Luke Wroblewski https://flic.kr/p/gTH5oL

35.
Photo: Kārlis Dambrāns https://flic.kr/p/oq2r8z

36.
Photo: Rob DiCaterino https://flic.kr/p/5yk9cA

37.
Photo: Kārlis Dambrāns https://flic.kr/p/f1oriS

38.
Photo: Sean MacEntee https://flic.kr/p/bR4vGi

39.
Photo: Kārlis Dambrāns https://flic.kr/p/oBTNuP

40.
Photo: Rodrigo Senna https://flic.kr/p/4oVCo

41.
Photo:William Hook https://flic.kr/p/4FGx7a

42.
Photo: Kārlis Dambrāns https://flic.kr/p/gFgXfS

43.
Photo: Kārlis Dambrāns https://flic.kr/p/mw5wzT

44.
Photo: Matthew Pearce https://flic.kr/p/aAJin6

45.
http://www.microsoft.com/en-us/default.aspx

46.
http://www.microsoft.com/en-us/default.aspx

47.
http://www.microsoft.com/en-us/default.aspx

48.
http://www.microsoft.com/en-us/default.aspx

49.
How responsive
design works

50.
All Devices
Photo: Brad Frost https://flic.kr/p/cfQwL7

51.
Range of phone sizes
Source: http://opensignal.com/reports/fragmentation.php

52.
Photo: Kārlis Dambrāns https://flic.kr/p/iqj7yP

53.
Photo: Kārlis Dambrāns https://flic.kr/p/gmQupy

54.
Flexible
Photo: HoriaVarlan https://flic.kr/p/7XrUY1

55.
article { width: 100%; }
div { margin: 0 10%; }

56.
img { max-width: 100%; }

57.
http://www.worldwildlife.org/

58.
http://www.worldwildlife.org/

59.
http://www.worldwildlife.org/

60.
http://www.worldwildlife.org/

61.
View:Turtle Photo
turtle.html

62.
View:Turtle #1
img { max-width: 100%; }

63.
Media Queries
Photo: Raymond Bryson https://flic.kr/p/8CkodQ

64.
body { background-color: green; }
@media only screen and (min-width: 40em) {
body { background-color: blue; }
}

65.
body { background-color: green; }
@media only screen and (min-width: 40em) {
body { background-color: blue; }
}

66.
body { background-color: green; }
@media only screen and (min-width: 40em) {
body { background-color: blue; }
}

67.
Photo: Nakeva Corothers https://flic.kr/p/8U1KwJ

68.
Change navigation
with media queries
http://www.easterseals.com/

69.
http://www.easterseals.com/

70.
http://www.easterseals.com/

71.
http://www.easterseals.com/

72.
http://www.easterseals.com/

73.
Change typography
with media queries
http://www.trentwalton.com

74.
http://www.trentwalton.com

75.
http://www.trentwalton.com

76.
http://www.trentwalton.com

77.
http://www.trentwalton.com

78.
Add more detail
with media queries
http://mailchimp.com/

79.
http://mailchimp.com/

80.
http://mailchimp.com/

81.
http://mailchimp.com/

82.
http://mailchimp.com/

83.
Change entire design
with media queries
http://www.salesforce.com/

84.
http://www.salesforce.com/

85.
http://www.salesforce.com/

86.
http://www.salesforce.com/

87.
http://www.salesforce.com/

88.
min-width: 30em
max-width: 30em

89.
min-height: 30em
max-height: 30em

90.
Vertical media queries
http://bradfrostweb.com

91.
http://bradfrostweb.com

92.
http://bradfrostweb.com

93.
http://bradfrostweb.com

94.
min-device-width: 30em
max-device-width: 30em
min-device-height: 30em
max-device-height: 30em

95.
orientation: portrait
orientation: landscape

96.
Via: http://wtfmobileweb.com/post/16758384465/thanks-for-providing-so-much-screen-real-estate

97.
aspect-ratio: 16/9
device-aspect-ratio: 16/9
min-aspect-ratio: 1/1

98.
min-resolution: 300dpi

99.
View:Alice in Wonderland
alice.html

100.
View:Alice #1
@media only screen and (min-width:30em) {
body { color: red; }
}

101.
View:Alice #2
@media only screen and (min-width:30em) {
body { color: red; }
}
@media only screen and (min-width:60em) {
body { color: blue; }
}

102.
View:Alice #3
@media only screen and (max-width:30em) {
body { color: red; }
}

103.
View:Alice #4
@media only screen and (min-height:20em) {
body { color: red; }
}

104.
View:Alice #5
@media only screen and (max-height:20em) {
body { color: red; }
}

105.
Performance

106.
Slow connections are
not just on phones
Photo: NicolasVigier https://flic.kr/p/23xNNg

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

108.
Performance Budget
Photo: Reyner Media https://flic.kr/p/hT9yw7

109.
Responsive images
Photo: Craig Finlay https://flic.kr/p/5R51o3

110.
Third-party code

111.
Photo: Michael Himbeault https://flic.kr/p/7NFTF6

112.
Blocking CSS & JavaScript
Photo: Holger Zscheyge https://flic.kr/p/5kcFk

113.
-100ms ➔ +1%

114.
-400ms ➔ +9%

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

116.
https://developers.google.com/speed/pagespeed/insights/

117.
https://developers.google.com/speed/pagespeed/insights/

118.
https://developers.google.com/speed/pagespeed/insights/

119.
PageSpeed Insights
https://developers.google.com/speed/
pagespeed/insights/

120.
http://yslow.org/

121.
http://yslow.org/

122.
http://www.webpagetest.org/

123.
WebPagetest
http://www.webpagetest.org/

124.
Adaptive Content
http://www.alistapart.com

125.
http://www.alistapart.com

126.
Prototyping
responsive design

127.
Design Process
Photo:Wonderlane https://flic.kr/p/bSHvgv

128.
Design Develop

129.
Design
Develop

130.
Photo: Chris Gladis https://flic.kr/p/rZVTg

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

132.
Sketching
Photo: Christian Campos https://flic.kr/p/6Vb1Xd

133.
Photo: Baldiri https://flic.kr/p/9JMoL5

134.
Wireframes

135.
Credit:AfterVictory https://flic.kr/p/8LrASD

136.
Credit: Podluzny http://flic.kr/p/cJJdzm

137.
Prototyping Tools
Photo: Kate Ter Haar https://flic.kr/p/9KQoQd

138.
Use frameworks
for prototyping
http://foundation.zurb.com/

139.
http://foundation.zurb.com/

140.
http://foundation.zurb.com/

141.
http://foundation.zurb.com/

142.
http://foundation.zurb.com/

143.
http://foundation.zurb.com/
http://foundation.zurb.com/

144.
http://foundation.zurb.com/

145.
http://foundation.zurb.com/

146.
http://foundation.zurb.com/templates.html

147.
http://foundation.zurb.com/templates.html

148.
http://foundation.zurb.com/templates.html

149.
http://foundation.zurb.com/templates.html

150.
http://foundation.zurb.com/templates.html

151.
http://foundation.zurb.com/templates.html

152.
http://foundation.zurb.com/templates.html

153.
http://foundation.zurb.com/templates.html

154.
http://foundation.zurb.com/templates.html

155.
http://foundation.zurb.com/templates.html

156.
http://foundation.zurb.com/templates.html

157.
http://foundation.zurb.com/templates.html

158.
http://foundation.zurb.com/templates.html

159.
http://foundation.zurb.com/templates.html

160.
http://getbootstrap.com/

161.
http://www.getskeleton.com/

162.
http://getclank.com/

163.
Websites and applications
for prototyping
http://froont.com/

164.
http://froont.com/

165.
http://www.hotgloo.com/

166.
http://balsamiq.com/

167.
http://foundation.zurb.com/

168.
http://foundation.zurb.com/

169.
View: Foundation Templates
foundation/template-bannerhome.html
foundation/template-blog.html
foundation/template-grid.html
foundation/template-realty.html
foundation/template-soboxy.html
foundation/template-workspace.html

170.
http://foundation.zurb.com/templates.html

171.
Creating responsive
designs

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

173.
Start with Content
Photo: Lainey Powell https://flic.kr/p/eWJog

174.
Small Screen First
Photo: Justus Blümer https://flic.kr/p/abN4Q4

175.
http://www.washingtonpost.com

176.
Linear design
http://teamtreehouse.com

177.
http://teamtreehouse.com

178.
http://teamtreehouse.com

179.
http://teamtreehouse.com

180.
Style Tiles
Photo: Lauren Manning https://flic.kr/p/4wV5Q1

181.
http://styletil.es/

182.
http://styletil.es/

183.
Touch
Photo;Alexandra Zakharova https://flic.kr/p/jRnhnU

184.
http://2014.blendconf.com

185.
http://2014.blendconf.com

186.
Touch target size
Photo: Erika https://flic.kr/p/6rMRUZ

187.
ul a { display: block; }

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

189.
Mobile First
Photo:Vernon Chan https://flic.kr/p/d5DEjS

190.
Photo:Trevor Cummings https://flic.kr/p/nNu7sP

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

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

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

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

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

196.
Mobile use case: I just transferred money
at my desk using my phone because
logging into my banking app requires
fewer steps.
- Stephanie Rieger
@stephanierieger

197.
Change branding
with media queries
http://www.dorigati.it/en/

198.
http://www.dorigati.it/en/

199.
http://www.dorigati.it/en/

200.
http://www.dorigati.it/en/

201.
Navigation
Photo: Calsidyrose https://flic.kr/p/8vehvb

202.
http://bradfrost.github.com/this-is-responsive/patterns.html

203.
Top Navigation
http://www.enochs.co.uk/

204.
http://www.enochs.co.uk/

205.
http://www.enochs.co.uk/

206.
http://www.enochs.co.uk/

207.
http://foodsense.is/

208.
http://foodsense.is/

209.
http://foodsense.is/

210.
http://foodsense.is/

211.
https://www.tuj.ac.jp/

212.
https://www.tuj.ac.jp/

213.
Footer Navigation
http://contentsmagazine.com/

214.
http://contentsmagazine.com/

215.
http://contentsmagazine.com/

216.
http://contentsmagazine.com/

217.
Toggle Navigation

218.
http://www.starbucks.com/

219.
http://starbucks.com/

220.
http://starbucks.com/

221.
http://starbucks.com/

222.
http://starbucks.com/

223.
http://codepen.io/bradfrost/full/sHvaz

224.
http://codepen.io/bradfrost/full/sHvaz

225.
<a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>

226.
<a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>

227.
nav {
! overflow: hidden;
! max-height: 0;
}
nav.active {
! max-height: 15em;
}

228.
nav {
! overflow: hidden;
! max-height: 0;
}
nav.active {
! max-height: 15em;
}

229.
<script>
(function() {
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link');
$menulink.click(function() {
$menulink.toggleClass('active');
$menu.toggleClass('active');
return false;
});});
})();
</script>

230.
http://codepen.io/bradfrost/full/sHvaz

231.
http://codepen.io/bradfrost/full/sHvaz

232.
http://codepen.io/bradfrost/full/sHvaz

233.
@media only screen and (min-width: 48.25em)
{
! a.menu-link {
! ! display: none;
! }
! nav {
! ! max-height: none;
! }
}

234.
@media only screen and (min-width: 48.25em)
{
! a.menu-link {
! ! display: none;
! }
! nav {
! ! max-height: none;
! }
}

235.
@media only screen and (min-width: 48.25em)
{
! a.menu-link {
! ! display: none;
! }
! nav {
! ! max-height: none;
! }
}

236.
http://skinnyties.com/

237.
http://skinnyties.com/

238.
http://skinnyties.com/

239.
http://skinnyties.com/

240.
Left Nav Flyout
http://www.emerilsrestaurants.com/

241.
http://www.emerilsrestaurants.com/

242.
http://www.emerilsrestaurants.com/

243.
http://www.emerilsrestaurants.com/

244.
Priority Navigation
https://www.pittsburghglasscenter.org/

245.
https://www.pittsburghglasscenter.org/

246.
https://www.pittsburghglasscenter.org/

247.
https://www.pittsburghglasscenter.org/

248.
https://www.pittsburghglasscenter.org/

249.
https://www.pittsburghglasscenter.org/

250.
Hamburger icon
Photo: Shane Adams https://flic.kr/p/6mPHuN

251.
http://starbucks.com/

252.
http://time.com/

253.
http://www.bostonglobe.com/

254.
http://www.microsoft.com/en-ca/default.aspx

255.
https://www.pittsburghglasscenter.org/

256.
View: Pandas Forever
pandas.html

257.
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/links/">Links</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>

258.
View: Pandas #1
nav ul { list-style-type: none;
padding: 0; margin: 0; }
nav li { margin: 0; padding: 0; }

259.
View: Pandas #2
nav ul { list-style-type: none; padding:
0; margin: 0; margin: 25px 0; }
nav li { border: 1px solid #666;
background-color: #eee; padding: 10px 1em;
margin: 3px 0 0; }

260.
View: Pandas #3
nav ul { list-style-type: none; padding:
0; margin: 0; margin: 25px 0; }
nav li { border: 1px solid #666;
background-color: #eee; padding: 10px 1em;
margin: 3px 0 0; text-align: center; }
nav li a { text-decoration: none;
font-size: 1.2em; }

261.
View: Pandas #4
@media only screen and (min-width: 30em) {
nav li { display: block; float: left; }
}

262.
View: Pandas #5
@media only screen and (min-width: 30em) {
nav li { display: block; float: left;
width: 25%; }
}

263.
View: Pandas #6
@media only screen and (min-width: 30em) {
nav li { display: block; float: left;
width: 25%; }
nav { padding-bottom: 3em; }
}

264.
Typography
Photo: Marcin Wichary https://flic.kr/p/4r1D8w

265.
http://www.trentwalton.com

266.
http://www.trentwalton.com

267.
http://www.trentwalton.com

268.
http://www.trentwalton.com

269.
Photo: John Nuttall https://flic.kr/p/kERMbC
Ems

270.
1em = default

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

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

273.
body { font-size: 100%; }
Default font size

274.
http://alistapart.com

275.
Photo:AbhisitVejjajiva https://flic.kr/p/8iNCNU

276.
Photo: Sam Howzit https://flic.kr/p/dhufQk
Scale

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

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

279.
http://www.linksture.com/

280.
http://www.linksture.com/

281.
http://www.tilde.io/

282.
http://www.tilde.io/

283.
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
p { font-size: 1em; }

284.
View: Peter Rabbit
rabbit.html

285.
View: Rabbit #1
body { font-size: 100%; }
h1 { font-size: 2.5em; text-align: center; }
h2 { font-size: 1.5em; }

286.
<p>This is 1 em.</p>
<div>This is 2 ems <span>(and 1.5 ems)
</span>.</div>

287.
<p>This is 1 em.</p>
<div>This is 2 ems <span>(and 1.5 ems)
</span>.</div>
p { font-size: 1em; }
div { font-size: 2em; }
span { font-size: 1.5em; }

288.
<p>This is 1 em.</p>
<div>This is 2 ems <span>(and 1.5 ems)
</span>.</div>
p { font-size: 1em; }
div { font-size: 2em; }
span { font-size: 1.5em; }

289.
Thoughtful CSS
Photo:AleXander Agopian https://flic.kr/p/bUxzCm

290.
div { font-size: 1.1em; }

291.
div { font-size: 1.2em; }

292.
View: Rabbit #2
article { font-size: 2em; }

293.
View: Rabbit #1
body { font-size: 100%; }
h1 { font-size: 2.5em; text-align: center; }
h2 { font-size: 1.5em; }

294.
Photo: KyleVan Horn https://flic.kr/p/5a4L3p
Rems

295.
html { font-size: 100%; }

296.
Photo: Hanan Cohen https://flic.kr/p/GedyD
Fallback

297.
h1 { font-size: 32px; font-size: 2rem; }

298.
Line Height (Leading)
Photo: Marcin Wichary https://flic.kr/p/4EDFYF

299.
p { line-height: 1; }
p { line-height: 2; }

300.
p { line-height: 1; }

301.
p { line-height: 2; }

302.
p { line-height: 1.4; }

303.
p { line-height: 1.3 }
@media only screen and (min-width: 30em) {
p { line-height: 1.4 }
}
@media only screen and (min-width: 60em) {
p { line-height: 1.5 }
}

304.
View: Rabbit #3
p { line-height: 1; }
@media only screen and (min-width: 30em) {
p { line-height: 1.5; }
}
@media only screen and (min-width: 60em) {
p { line-height: 2; }
}

305.
Vertical Margins
Photo: Nick Ares https://flic.kr/p/4qc5EB

306.
p {
line-height: 1.5;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

307.
View: Rabbit #4
p { line-height: 1; margin: 1em 0; }
@media only screen and (min-width: 30em) {
p { line-height: 1.5; margin: 1.5em 0; }
}
@media only screen and (min-width: 60em) {
p { line-height: 2; margin: 2em 0; }
}

308.
View: Rabbit #1
body { font-size: 100%; }
h1 { font-size: 2.5em; text-align: center; }
h2 { font-size: 1.5em; }

309.
Line Length (Measure)
Photo: Provenance Online Project https://flic.kr/p/9xHSNH

310.
45-75 Characters

311.
65
58
65
73
68
67
66
74
72
69
69

312.
<p>These stories are true. Although I have
left <span class=”testing”>the strict line
of historical</span> truth in many places,
the animals in this book were all real
characters.</p>

313.
<p>These stories are true. Although I have
left <span class=”testing”>the strict line
of historical</span> truth in many places,
the animals in this book were all real
characters.</p>
.testing { color: #f00; }

314.
<p>These stories are true. Although I have
left <span class=”testing”>the strict line
of historical</span> truth in many places,
the animals in this book were all real
characters.</p>
.testing { color: #f00; }

315.
http://codepen.io/chriscoyier/pen/atebf

316.
View: Rabbit #5
<p>Once upon a time there were four little
Rabbi<span style="color: red;">ts, and
their names were Flops</span>y, Mopsy,
Cotton-tail, and Peter.</p>

317.
View: Rabbit #6
article {
width: 94%;
margin: auto;
}
article p {
line-height: 1.3;
margin: 1.3em 0;
}

318.
max-width
Photo: Gustavo Jeronimo https://flic.kr/p/7nCGk3

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

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

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

322.
View: Rabbit #7
article { max-width: 26em; }

323.
View: Rabbit #8
article { max-width: 30em; }

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

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

326.
@media only screen and (min-width:60em) {
article { font-size: 1.2em; }
article p { line-height: 1.5;
margin: 1.5em auto; }
}

327.
@media only screen and (min-width:60em) {
article { font-size: 1.2em; }
article p { line-height: 1.5;
margin: 1.5em auto; }
}

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

329.
View: Rabbit #10
@media only screen and (min-width:60em) {
article { font-size: 1.2em; }
article p { line-height: 1.5;
margin: 1.5em auto; }
}

330.
http://www.mqtest.io

331.
Alignment & Hyphenation
Photo: SurFeRGiRL30 https://flic.kr/p/8veLPW

332.
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

333.
@media only screen and (max-width: 40em) {
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
}

334.
View: Rabbit #1
body { font-size: 100%; }
h1 { font-size: 2.5em; text-align: center; }
h2 { font-size: 1.5em; }

335.
View: Rabbit #11
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

336.
<html lang="en">

337.
Typeface
Photo:Taryn https://flic.kr/p/5q1Qj1

338.
http://wearyoubelong.com/

339.
http://wearyoubelong.com/

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

341.
#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;
text-transform: uppercase;
}
}

342.
Performance

343.
Web Fonts
Photo: Ian Kobylanski https://flic.kr/p/e7ES3o

344.
@font-face {
font-family: ExampleFont;
src: url('ExampleFont.eot');
src: local('Example Font'),
url('ExampleFont.eot?#iefix')
format('embedded-opentype'),
url('ExampleFont.woff') format('woff'),
url('ExampleFont.ttf') format('truetype'),
url('ExampleFont.svg') format('svg');
font-style: normal;
font-weight: 400;
}

345.
@font-face {
font-family: ExampleFont;
src: url('ExampleFont.eot');
src: local('Example Font'),
url('ExampleFont.eot?#iefix')
format('embedded-opentype'),
url('ExampleFont.woff') format('woff'),
url('ExampleFont.ttf') format('truetype'),
url('ExampleFont.svg') format('svg');
font-style: normal;
font-weight: 400;
}

346.
@font-face {
font-family: ExampleFont;
src: url('ExampleFont.eot');
src: local('Example Font'),
url('ExampleFont.eot?#iefix')
format('embedded-opentype'),
url('ExampleFont.woff') format('woff'),
url('ExampleFont.ttf') format('truetype'),
url('ExampleFont.svg') format('svg');
font-style: normal;
font-weight: 400;
}

347.
Use fewer fonts

348.
@font-face {
font-family: 'Source Sans Pro';
src: url('SourceSansPro.eot');
}

349.
@font-face {
font-family: 'Source Sans Pro';
src: url('SourceSansPro.eot');
}
p { font-family: Arial, sans-serif; }

350.
@font-face {
font-family: 'Source Sans Pro';
src: url('SourceSansPro.eot');
}
p { font-family: Arial, sans-serif; }
@media only screen and (min-width: 30em) {
p { font-family: 'Source Sans Pro',
Arial, sans-serif; }
}

351.
http://www.jordanm.co.uk/tinytype

352.
http://www.jordanm.co.uk/tinytype
h1 { font-family: Helvetica, Arial, 'Droid
Sans', sans-serif; }

353.
View: Rabbit #1
body { font-size: 100%; }
h1 { font-size: 2.5em; text-align: center; }
h2 { font-size: 1.5em; }

354.
View: Rabbit #12
<link href='http://fonts.googleapis.com/
css?family=Raleway' rel='stylesheet'
type='text/css'>

355.
View: Rabbit #13
p { font-family: Arial, 'Droid Sans',
sans-serif; }
@media only screen and (min-width: 30em) {
p { font-family: Raleway,
Arial, 'Droid Sans', sans-serif; }
}

356.
Don’t forget
styles for print
Photo: Daviddje https://flic.kr/p/div4a3

357.
Testing responsive
design

358.
Use real devices
when possible
Photo: Jeremy Keith
https://flic.kr/p/bPZzeM

359.
http://www.browserstack.com/

360.
Device Labs

361.
Photo: Jakub Solovský https://flic.kr/p/i1RRZm
Thanks!

362.
clarissapeterson.com
@clarissa
Photo: Jakub Solovský https://flic.kr/p/i1RRZm
Clarissa Peterson
Peterson/Kandy