Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design Workshop

8,298 views

Published on

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.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Design Workshop

  1. 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. 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. 3. What is responsive design?
  4. 4. Flexible Photo: Mike Mozard https://flic.kr/p/jXxfeF
  5. 5. http://www.bostonglobe.com/
  6. 6. http://www.bostonglobe.com/
  7. 7. http://www.bostonglobe.com/
  8. 8. http://www.bostonglobe.com/
  9. 9. Adjustable Photo:William Warby https://flic.kr/p/j9KrpA
  10. 10. http://www.unitedpixelworkers.com/
  11. 11. http://www.unitedpixelworkers.com/
  12. 12. http://www.unitedpixelworkers.com/
  13. 13. http://www.unitedpixelworkers.com/
  14. 14. http://www.unitedpixelworkers.com/
  15. 15. http://www.unitedpixelworkers.com/
  16. 16. http://www.unitedpixelworkers.com/
  17. 17. http://www.bostonglobe.com/
  18. 18. http://www.bostonglobe.com/
  19. 19. http://www.bostonglobe.com/
  20. 20. http://www.bostonglobe.com/
  21. 21. http://www.bostonglobe.com/
  22. 22. Partially responsive http://www.apple.com
  23. 23. http://www.apple.com
  24. 24. http://www.apple.com
  25. 25. http://www.apple.com
  26. 26. http://www.apple.com
  27. 27. http://lrmc.com/
  28. 28. http://lrmc.com/
  29. 29. http://lrmc.com/
  30. 30. http://lrmc.com/
  31. 31. http://lrmc.com/
  32. 32. Photo: Mo Riza https://flic.kr/p/ca1kU
  33. 33. Photo: Luke Wroblewski https://flic.kr/p/gTH5oL
  34. 34. Photo: Luke Wroblewski https://flic.kr/p/gTH5oL
  35. 35. Photo: Kārlis Dambrāns https://flic.kr/p/oq2r8z
  36. 36. Photo: Rob DiCaterino https://flic.kr/p/5yk9cA
  37. 37. Photo: Kārlis Dambrāns https://flic.kr/p/f1oriS
  38. 38. Photo: Sean MacEntee https://flic.kr/p/bR4vGi
  39. 39. Photo: Kārlis Dambrāns https://flic.kr/p/oBTNuP
  40. 40. Photo: Rodrigo Senna https://flic.kr/p/4oVCo
  41. 41. Photo:William Hook https://flic.kr/p/4FGx7a
  42. 42. Photo: Kārlis Dambrāns https://flic.kr/p/gFgXfS
  43. 43. Photo: Kārlis Dambrāns https://flic.kr/p/mw5wzT
  44. 44. Photo: Matthew Pearce https://flic.kr/p/aAJin6
  45. 45. http://www.microsoft.com/en-us/default.aspx
  46. 46. http://www.microsoft.com/en-us/default.aspx
  47. 47. http://www.microsoft.com/en-us/default.aspx
  48. 48. http://www.microsoft.com/en-us/default.aspx
  49. 49. How responsive design works
  50. 50. All Devices Photo: Brad Frost https://flic.kr/p/cfQwL7
  51. 51. Range of phone sizes Source: http://opensignal.com/reports/fragmentation.php
  52. 52. Photo: Kārlis Dambrāns https://flic.kr/p/iqj7yP
  53. 53. Photo: Kārlis Dambrāns https://flic.kr/p/gmQupy
  54. 54. Flexible Photo: HoriaVarlan https://flic.kr/p/7XrUY1
  55. 55. article { width: 100%; } div { margin: 0 10%; }
  56. 56. img { max-width: 100%; }
  57. 57. http://www.worldwildlife.org/
  58. 58. http://www.worldwildlife.org/
  59. 59. http://www.worldwildlife.org/
  60. 60. http://www.worldwildlife.org/
  61. 61. View:Turtle Photo turtle.html
  62. 62. View:Turtle #1 img { max-width: 100%; }
  63. 63. Media Queries Photo: Raymond Bryson https://flic.kr/p/8CkodQ
  64. 64. body { background-color: green; } @media only screen and (min-width: 40em) { body { background-color: blue; } }
  65. 65. body { background-color: green; } @media only screen and (min-width: 40em) { body { background-color: blue; } }
  66. 66. body { background-color: green; } @media only screen and (min-width: 40em) { body { background-color: blue; } }
  67. 67. Photo: Nakeva Corothers https://flic.kr/p/8U1KwJ
  68. 68. Change navigation with media queries http://www.easterseals.com/
  69. 69. http://www.easterseals.com/
  70. 70. http://www.easterseals.com/
  71. 71. http://www.easterseals.com/
  72. 72. http://www.easterseals.com/
  73. 73. Change typography with media queries http://www.trentwalton.com
  74. 74. http://www.trentwalton.com
  75. 75. http://www.trentwalton.com
  76. 76. http://www.trentwalton.com
  77. 77. http://www.trentwalton.com
  78. 78. Add more detail with media queries http://mailchimp.com/
  79. 79. http://mailchimp.com/
  80. 80. http://mailchimp.com/
  81. 81. http://mailchimp.com/
  82. 82. http://mailchimp.com/
  83. 83. Change entire design with media queries http://www.salesforce.com/
  84. 84. http://www.salesforce.com/
  85. 85. http://www.salesforce.com/
  86. 86. http://www.salesforce.com/
  87. 87. http://www.salesforce.com/
  88. 88. min-width: 30em max-width: 30em
  89. 89. min-height: 30em max-height: 30em
  90. 90. Vertical media queries http://bradfrostweb.com
  91. 91. http://bradfrostweb.com
  92. 92. http://bradfrostweb.com
  93. 93. http://bradfrostweb.com
  94. 94. min-device-width: 30em max-device-width: 30em min-device-height: 30em max-device-height: 30em
  95. 95. orientation: portrait orientation: landscape
  96. 96. Via: http://wtfmobileweb.com/post/16758384465/thanks-for-providing-so-much-screen-real-estate
  97. 97. aspect-ratio: 16/9 device-aspect-ratio: 16/9 min-aspect-ratio: 1/1
  98. 98. min-resolution: 300dpi
  99. 99. View:Alice in Wonderland alice.html
  100. 100. View:Alice #1 @media only screen and (min-width:30em) { body { color: red; } }
  101. 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. 102. View:Alice #3 @media only screen and (max-width:30em) { body { color: red; } }
  103. 103. View:Alice #4 @media only screen and (min-height:20em) { body { color: red; } }
  104. 104. View:Alice #5 @media only screen and (max-height:20em) { body { color: red; } }
  105. 105. Performance
  106. 106. Slow connections are not just on phones Photo: NicolasVigier https://flic.kr/p/23xNNg
  107. 107. “You can't mock up performance in Photoshop.” - Brad Frost @brad_frost
  108. 108. Performance Budget Photo: Reyner Media https://flic.kr/p/hT9yw7
  109. 109. Responsive images Photo: Craig Finlay https://flic.kr/p/5R51o3
  110. 110. Third-party code
  111. 111. Photo: Michael Himbeault https://flic.kr/p/7NFTF6
  112. 112. Blocking CSS & JavaScript Photo: Holger Zscheyge https://flic.kr/p/5kcFk
  113. 113. -100ms ➔ +1%
  114. 114. -400ms ➔ +9%
  115. 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. 116. https://developers.google.com/speed/pagespeed/insights/
  117. 117. https://developers.google.com/speed/pagespeed/insights/
  118. 118. https://developers.google.com/speed/pagespeed/insights/
  119. 119. PageSpeed Insights https://developers.google.com/speed/ pagespeed/insights/
  120. 120. http://yslow.org/
  121. 121. http://yslow.org/
  122. 122. http://www.webpagetest.org/
  123. 123. WebPagetest http://www.webpagetest.org/
  124. 124. Adaptive Content http://www.alistapart.com
  125. 125. http://www.alistapart.com
  126. 126. Prototyping responsive design
  127. 127. Design Process Photo:Wonderlane https://flic.kr/p/bSHvgv
  128. 128. Design Develop
  129. 129. Design Develop
  130. 130. Photo: Chris Gladis https://flic.kr/p/rZVTg
  131. 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. 132. Sketching Photo: Christian Campos https://flic.kr/p/6Vb1Xd
  133. 133. Photo: Baldiri https://flic.kr/p/9JMoL5
  134. 134. Wireframes
  135. 135. Credit:AfterVictory https://flic.kr/p/8LrASD
  136. 136. Credit: Podluzny http://flic.kr/p/cJJdzm
  137. 137. Prototyping Tools Photo: Kate Ter Haar https://flic.kr/p/9KQoQd
  138. 138. Use frameworks for prototyping http://foundation.zurb.com/
  139. 139. http://foundation.zurb.com/
  140. 140. http://foundation.zurb.com/
  141. 141. http://foundation.zurb.com/
  142. 142. http://foundation.zurb.com/
  143. 143. http://foundation.zurb.com/ http://foundation.zurb.com/
  144. 144. http://foundation.zurb.com/
  145. 145. http://foundation.zurb.com/
  146. 146. http://foundation.zurb.com/templates.html
  147. 147. http://foundation.zurb.com/templates.html
  148. 148. http://foundation.zurb.com/templates.html
  149. 149. http://foundation.zurb.com/templates.html
  150. 150. http://foundation.zurb.com/templates.html
  151. 151. http://foundation.zurb.com/templates.html
  152. 152. http://foundation.zurb.com/templates.html
  153. 153. http://foundation.zurb.com/templates.html
  154. 154. http://foundation.zurb.com/templates.html
  155. 155. http://foundation.zurb.com/templates.html
  156. 156. http://foundation.zurb.com/templates.html
  157. 157. http://foundation.zurb.com/templates.html
  158. 158. http://foundation.zurb.com/templates.html
  159. 159. http://foundation.zurb.com/templates.html
  160. 160. http://getbootstrap.com/
  161. 161. http://www.getskeleton.com/
  162. 162. http://getclank.com/
  163. 163. Websites and applications for prototyping http://froont.com/
  164. 164. http://froont.com/
  165. 165. http://www.hotgloo.com/
  166. 166. http://balsamiq.com/
  167. 167. http://foundation.zurb.com/
  168. 168. http://foundation.zurb.com/
  169. 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. 170. http://foundation.zurb.com/templates.html
  171. 171. Creating responsive designs
  172. 172. The first website was responsive http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  173. 173. Start with Content Photo: Lainey Powell https://flic.kr/p/eWJog
  174. 174. Small Screen First Photo: Justus Blümer https://flic.kr/p/abN4Q4
  175. 175. http://www.washingtonpost.com
  176. 176. Linear design http://teamtreehouse.com
  177. 177. http://teamtreehouse.com
  178. 178. http://teamtreehouse.com
  179. 179. http://teamtreehouse.com
  180. 180. Style Tiles Photo: Lauren Manning https://flic.kr/p/4wV5Q1
  181. 181. http://styletil.es/
  182. 182. http://styletil.es/
  183. 183. Touch Photo;Alexandra Zakharova https://flic.kr/p/jRnhnU
  184. 184. http://2014.blendconf.com
  185. 185. http://2014.blendconf.com
  186. 186. Touch target size Photo: Erika https://flic.kr/p/6rMRUZ
  187. 187. ul a { display: block; }
  188. 188. ul a { display: block; padding: 3px 5px; }
  189. 189. Mobile First Photo:Vernon Chan https://flic.kr/p/d5DEjS
  190. 190. Photo:Trevor Cummings https://flic.kr/p/nNu7sP
  191. 191. http://www.kiwibank.co.nz
  192. 192. http://www.kiwibank.co.nz
  193. 193. http://www.kiwibank.co.nz
  194. 194. http://www.kiwibank.co.nz
  195. 195. <a href=”tel:202-123-4567”>202-123-4567</a>
  196. 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. 197. Change branding with media queries http://www.dorigati.it/en/
  198. 198. http://www.dorigati.it/en/
  199. 199. http://www.dorigati.it/en/
  200. 200. http://www.dorigati.it/en/
  201. 201. Navigation Photo: Calsidyrose https://flic.kr/p/8vehvb
  202. 202. http://bradfrost.github.com/this-is-responsive/patterns.html
  203. 203. Top Navigation http://www.enochs.co.uk/
  204. 204. http://www.enochs.co.uk/
  205. 205. http://www.enochs.co.uk/
  206. 206. http://www.enochs.co.uk/
  207. 207. http://foodsense.is/
  208. 208. http://foodsense.is/
  209. 209. http://foodsense.is/
  210. 210. http://foodsense.is/
  211. 211. https://www.tuj.ac.jp/
  212. 212. https://www.tuj.ac.jp/
  213. 213. Footer Navigation http://contentsmagazine.com/
  214. 214. http://contentsmagazine.com/
  215. 215. http://contentsmagazine.com/
  216. 216. http://contentsmagazine.com/
  217. 217. Toggle Navigation
  218. 218. http://www.starbucks.com/
  219. 219. http://starbucks.com/
  220. 220. http://starbucks.com/
  221. 221. http://starbucks.com/
  222. 222. http://starbucks.com/
  223. 223. http://codepen.io/bradfrost/full/sHvaz
  224. 224. http://codepen.io/bradfrost/full/sHvaz
  225. 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. 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. 227. nav { ! overflow: hidden; ! max-height: 0; } nav.active { ! max-height: 15em; }
  228. 228. nav { ! overflow: hidden; ! max-height: 0; } nav.active { ! max-height: 15em; }
  229. 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. 230. http://codepen.io/bradfrost/full/sHvaz
  231. 231. http://codepen.io/bradfrost/full/sHvaz
  232. 232. http://codepen.io/bradfrost/full/sHvaz
  233. 233. @media only screen and (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! nav { ! ! max-height: none; ! } }
  234. 234. @media only screen and (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! nav { ! ! max-height: none; ! } }
  235. 235. @media only screen and (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! nav { ! ! max-height: none; ! } }
  236. 236. http://skinnyties.com/
  237. 237. http://skinnyties.com/
  238. 238. http://skinnyties.com/
  239. 239. http://skinnyties.com/
  240. 240. Left Nav Flyout http://www.emerilsrestaurants.com/
  241. 241. http://www.emerilsrestaurants.com/
  242. 242. http://www.emerilsrestaurants.com/
  243. 243. http://www.emerilsrestaurants.com/
  244. 244. Priority Navigation https://www.pittsburghglasscenter.org/
  245. 245. https://www.pittsburghglasscenter.org/
  246. 246. https://www.pittsburghglasscenter.org/
  247. 247. https://www.pittsburghglasscenter.org/
  248. 248. https://www.pittsburghglasscenter.org/
  249. 249. https://www.pittsburghglasscenter.org/
  250. 250. Hamburger icon Photo: Shane Adams https://flic.kr/p/6mPHuN
  251. 251. http://starbucks.com/
  252. 252. http://time.com/
  253. 253. http://www.bostonglobe.com/
  254. 254. http://www.microsoft.com/en-ca/default.aspx
  255. 255. https://www.pittsburghglasscenter.org/
  256. 256. View: Pandas Forever pandas.html
  257. 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. 258. View: Pandas #1 nav ul { list-style-type: none; padding: 0; margin: 0; } nav li { margin: 0; padding: 0; }
  259. 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. 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. 261. View: Pandas #4 @media only screen and (min-width: 30em) { nav li { display: block; float: left; } }
  262. 262. View: Pandas #5 @media only screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } }
  263. 263. View: Pandas #6 @media only screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } nav { padding-bottom: 3em; } }
  264. 264. Typography Photo: Marcin Wichary https://flic.kr/p/4r1D8w
  265. 265. http://www.trentwalton.com
  266. 266. http://www.trentwalton.com
  267. 267. http://www.trentwalton.com
  268. 268. http://www.trentwalton.com
  269. 269. Photo: John Nuttall https://flic.kr/p/kERMbC Ems
  270. 270. 1em = default
  271. 271. 2em = twice as big 1em = default
  272. 272. 2em = twice as big 1em = default .5em = half as big
  273. 273. body { font-size: 100%; } Default font size
  274. 274. http://alistapart.com
  275. 275. Photo:AbhisitVejjajiva https://flic.kr/p/8iNCNU
  276. 276. Photo: Sam Howzit https://flic.kr/p/dhufQk Scale
  277. 277. http://www.oliverharvey.co.uk/
  278. 278. http://www.oliverharvey.co.uk/
  279. 279. http://www.linksture.com/
  280. 280. http://www.linksture.com/
  281. 281. http://www.tilde.io/
  282. 282. http://www.tilde.io/
  283. 283. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } p { font-size: 1em; }
  284. 284. View: Peter Rabbit rabbit.html
  285. 285. View: Rabbit #1 body { font-size: 100%; } h1 { font-size: 2.5em; text-align: center; } h2 { font-size: 1.5em; }
  286. 286. <p>This is 1 em.</p> <div>This is 2 ems <span>(and 1.5 ems) </span>.</div>
  287. 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. 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. 289. Thoughtful CSS Photo:AleXander Agopian https://flic.kr/p/bUxzCm
  290. 290. div { font-size: 1.1em; }
  291. 291. div { font-size: 1.2em; }
  292. 292. View: Rabbit #2 article { font-size: 2em; }
  293. 293. View: Rabbit #1 body { font-size: 100%; } h1 { font-size: 2.5em; text-align: center; } h2 { font-size: 1.5em; }
  294. 294. Photo: KyleVan Horn https://flic.kr/p/5a4L3p Rems
  295. 295. html { font-size: 100%; }
  296. 296. Photo: Hanan Cohen https://flic.kr/p/GedyD Fallback
  297. 297. h1 { font-size: 32px; font-size: 2rem; }
  298. 298. Line Height (Leading) Photo: Marcin Wichary https://flic.kr/p/4EDFYF
  299. 299. p { line-height: 1; } p { line-height: 2; }
  300. 300. p { line-height: 1; }
  301. 301. p { line-height: 2; }
  302. 302. p { line-height: 1.4; }
  303. 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. 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. 305. Vertical Margins Photo: Nick Ares https://flic.kr/p/4qc5EB
  306. 306. p { line-height: 1.5; margin-top: 1.5em; margin-bottom: 1.5em; }
  307. 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. 308. View: Rabbit #1 body { font-size: 100%; } h1 { font-size: 2.5em; text-align: center; } h2 { font-size: 1.5em; }
  309. 309. Line Length (Measure) Photo: Provenance Online Project https://flic.kr/p/9xHSNH
  310. 310. 45-75 Characters
  311. 311. 65 58 65 73 68 67 66 74 72 69 69
  312. 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. 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. 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. 315. http://codepen.io/chriscoyier/pen/atebf
  316. 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. 317. View: Rabbit #6 article { width: 94%; margin: auto; } article p { line-height: 1.3; margin: 1.3em 0; }
  318. 318. max-width Photo: Gustavo Jeronimo https://flic.kr/p/7nCGk3
  319. 319. article { max-width: 28em; }
  320. 320. article { max-width: 28em; }
  321. 321. article { max-width: 28em; }
  322. 322. View: Rabbit #7 article { max-width: 26em; }
  323. 323. View: Rabbit #8 article { max-width: 30em; }
  324. 324. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
  325. 325. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
  326. 326. @media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; } }
  327. 327. @media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; } }
  328. 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. 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. 330. http://www.mqtest.io
  331. 331. Alignment & Hyphenation Photo: SurFeRGiRL30 https://flic.kr/p/8veLPW
  332. 332. p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
  333. 333. @media only screen and (max-width: 40em) { p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } }
  334. 334. View: Rabbit #1 body { font-size: 100%; } h1 { font-size: 2.5em; text-align: center; } h2 { font-size: 1.5em; }
  335. 335. View: Rabbit #11 p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
  336. 336. <html lang="en">
  337. 337. Typeface Photo:Taryn https://flic.kr/p/5q1Qj1
  338. 338. http://wearyoubelong.com/
  339. 339. http://wearyoubelong.com/
  340. 340. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }
  341. 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. 342. Performance
  343. 343. Web Fonts Photo: Ian Kobylanski https://flic.kr/p/e7ES3o
  344. 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. 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. 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. 347. Use fewer fonts
  348. 348. @font-face { font-family: 'Source Sans Pro'; src: url('SourceSansPro.eot'); }
  349. 349. @font-face { font-family: 'Source Sans Pro'; src: url('SourceSansPro.eot'); } p { font-family: Arial, sans-serif; }
  350. 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. 351. http://www.jordanm.co.uk/tinytype
  352. 352. http://www.jordanm.co.uk/tinytype h1 { font-family: Helvetica, Arial, 'Droid Sans', sans-serif; }
  353. 353. View: Rabbit #1 body { font-size: 100%; } h1 { font-size: 2.5em; text-align: center; } h2 { font-size: 1.5em; }
  354. 354. View: Rabbit #12 <link href='http://fonts.googleapis.com/ css?family=Raleway' rel='stylesheet' type='text/css'>
  355. 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. 356. Don’t forget styles for print Photo: Daviddje https://flic.kr/p/div4a3
  357. 357. Testing responsive design
  358. 358. Use real devices when possible Photo: Jeremy Keith https://flic.kr/p/bPZzeM
  359. 359. http://www.browserstack.com/
  360. 360. Device Labs
  361. 361. Photo: Jakub Solovský https://flic.kr/p/i1RRZm Thanks!
  362. 362. clarissapeterson.com @clarissa Photo: Jakub Solovský https://flic.kr/p/i1RRZm Clarissa Peterson Peterson/Kandy

×