Responsive Design Workshop

1. Photo: Jakub Solovský https://ﬂic.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://ﬂic.kr/p/jXxfeF

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

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

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

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

23. http://www.apple.com

27. http://lrmc.com/

32. Photo: Mo Riza https://ﬂic.kr/p/ca1kU

33. Photo: Luke Wroblewski https://ﬂic.kr/p/gTH5oL

34. Photo: Luke Wroblewski https://ﬂic.kr/p/gTH5oL

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

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

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

38. Photo: Sean MacEntee https://ﬂic.kr/p/bR4vGi

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

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

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

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

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

44. Photo: Matthew Pearce https://ﬂic.kr/p/aAJin6

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

49. How responsive design works

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

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

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

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

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

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

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

57. 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://ﬂic.kr/p/8CkodQ

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

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

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

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

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

74. http://www.trentwalton.com

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

79. http://mailchimp.com/

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

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

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://ﬂic.kr/p/23xNNg

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

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

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

110. Third-party code

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

112. Blocking CSS & JavaScript Photo: Holger Zscheyge https://ﬂic.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/

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://ﬂic.kr/p/bSHvgv

128. Design Develop

129. Design Develop

130. Photo: Chris Gladis https://ﬂic.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://ﬂic.kr/p/6Vb1Xd

133. Photo: Baldiri https://ﬂic.kr/p/9JMoL5

134. Wireframes

135. Credit:AfterVictory https://ﬂic.kr/p/8LrASD

136. Credit: Podluzny http://ﬂic.kr/p/cJJdzm

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

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

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

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

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

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

171. Creating responsive designs

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

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

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

175. http://www.washingtonpost.com

176. Linear design http://teamtreehouse.com

177. http://teamtreehouse.com

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

181. http://styletil.es/

182. http://styletil.es/

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

184. http://2014.blendconf.com

185. http://2014.blendconf.com

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

187. ul a { display: block; }

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

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

190. Photo:Trevor Cummings https://ﬂic.kr/p/nNu7sP

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

201. Navigation Photo: Calsidyrose https://ﬂic.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/

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

217. Toggle Navigation

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

219. http://starbucks.com/

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

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

236. http://skinnyties.com/

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

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

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

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

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

252. http://time.com/

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

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://ﬂic.kr/p/4r1D8w

269. Photo: John Nuttall https://ﬂic.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://ﬂic.kr/p/8iNCNU

276. Photo: Sam Howzit https://ﬂic.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://ﬂic.kr/p/bUxzCm

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

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

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

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

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

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

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

298. Line Height (Leading) Photo: Marcin Wichary https://ﬂic.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://ﬂic.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; } }

309. Line Length (Measure) Photo: Provenance Online Project https://ﬂic.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://ﬂic.kr/p/7nCGk3

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

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://ﬂic.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; } }

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

336. <html lang="en">

337. Typeface Photo:Taryn https://ﬂic.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://ﬂic.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; }

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

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://ﬂic.kr/p/div4a3

357. Testing responsive design

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

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

360. Device Labs

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

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