A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014. Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.

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/

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

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

129. http://www.alistapart.com

133. Prototyping
responsive design

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

136. Design Develop

137. Design
Develop

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

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

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

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

142. Wireframes

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

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

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

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

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

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

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

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

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

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

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

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://foundation.zurb.com/templates.html

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

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

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

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

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

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

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

168. http://getbootstrap.com/

169. http://www.getskeleton.com/

170. http://getclank.com/

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

172. http://froont.com/

173. http://www.hotgloo.com/

174. http://balsamiq.com/

175. http://foundation.zurb.com/

176. http://foundation.zurb.com/

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

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

180. Creating responsive
designs

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

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

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

185. http://www.washingtonpost.com

188. Linear design
http://teamtreehouse.com

189. http://teamtreehouse.com

190. http://teamtreehouse.com

191. http://teamtreehouse.com

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

193. http://styletil.es/

194. http://styletil.es/

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

196. http://2014.blendconf.com

197. http://2014.blendconf.com

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

200. ul a { display: block; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

220. http://foodsense.is/

221. http://foodsense.is/

222. http://foodsense.is/

223. http://foodsense.is/

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

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

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

227. http://contentsmagazine.com/

228. http://contentsmagazine.com/

229. http://contentsmagazine.com/

230. Toggle Navigation

231. http://www.starbucks.com/

232. http://starbucks.com/

233. http://starbucks.com/

234. http://starbucks.com/

235. http://starbucks.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

249. http://skinnyties.com/

250. http://skinnyties.com/

251. http://skinnyties.com/

252. http://skinnyties.com/

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

254. http://www.emerilsrestaurants.com/

255. http://www.emerilsrestaurants.com/

256. http://www.emerilsrestaurants.com/

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

258. https://www.pittsburghglasscenter.org/

259. https://www.pittsburghglasscenter.org/

260. https://www.pittsburghglasscenter.org/

261. https://www.pittsburghglasscenter.org/

262. https://www.pittsburghglasscenter.org/

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

264. http://starbucks.com/

265. http://time.com/

266. http://www.bostonglobe.com/

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

268. https://www.pittsburghglasscenter.org/

269. View: Pandas Forever
pandas.html

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

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

272. 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; }

273. 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; }

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

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

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

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

278. http://www.trentwalton.com

279. http://www.trentwalton.com

280. http://www.trentwalton.com

281. http://www.trentwalton.com

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

284. 1em = default

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

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

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

288. http://alistapart.com

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

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

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

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

293. http://www.linksture.com/

294. http://www.linksture.com/

295. http://www.tilde.io/

296. http://www.tilde.io/

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

298. View: Peter Rabbit
rabbit.html

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

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

301. <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; }

302. <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; }

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

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

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

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

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

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

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

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

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

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

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

321. p { line-height: 1; }

322. p { line-height: 2; }

323. p { line-height: 1.4; }

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

325. 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; }
}

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

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

329. 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; }
}

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

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

334. 45-75 Characters

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

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

339. <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; }

340. <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; }

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

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

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

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

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

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

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

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

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

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

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

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

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

358. 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; }
}

359. 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; }
}

360. http://www.mqtest.io

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

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

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

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

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

371. <html lang="en">

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

373. http://wearyoubelong.com/

374. http://wearyoubelong.com/

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

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

377. Performance

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

379. @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;
}

380. @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;
}

381. @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;
}

382. Use fewer fonts

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

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

385. @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; }
}

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

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

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

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

390. 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; }
}

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

392. Testing responsive
design

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

394. http://www.browserstack.com/

396. Device Labs

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

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