Responsive Design Workshop
•
11 likes•8,926 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Responsive Design Workshop
Similar to Responsive Design Workshop (10)
More from Clarissa Peterson
More from Clarissa Peterson (8)
Recently uploaded
Recently uploaded (20)
Responsive Design Workshop
- 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/
- 4. Flexible Photo: Mike Mozard https://flic.kr/p/jXxfeF
- 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
- 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
- 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
- 55. article { width: 100%; } div { margin: 0 10%; }
- 56. img { max-width: 100%; }
- 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/
- 73. Change typography with media queries http://www.trentwalton.com
- 78. Add more detail with media queries http://mailchimp.com/
- 83. Change entire design with media queries http://www.salesforce.com/
- 94. min-device-width: 30em max-device-width: 30em min-device-height: 30em max-device-height: 30em
- 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
- 120. http://yslow.org/
- 121. http://yslow.org/
- 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
- 142. Wireframes
- 145. Prototyping Tools Photo: Kate Ter Haar https://flic.kr/p/9KQoQd
- 170. http://getclank.com/
- 171. Websites and applications for prototyping http://froont.com/
- 172. http://froont.com/
- 174. http://balsamiq.com/
- 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
- 192. Style Tiles Photo: Lauren Manning https://flic.kr/p/4wV5Q1
- 193. http://styletil.es/
- 194. http://styletil.es/
- 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
- 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/
- 220. http://foodsense.is/
- 221. http://foodsense.is/
- 222. http://foodsense.is/
- 223. http://foodsense.is/
- 230. Toggle Navigation
- 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>
- 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; ! } }
- 263. Hamburger icon Photo: Shane Adams https://flic.kr/p/6mPHuN
- 265. http://time.com/
- 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
- 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
- 290. Photo: Sam Howzit https://flic.kr/p/dhufQk Scale
- 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; }
- 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
- 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; }
- 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">
- 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; } }
- 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
- 393. Use real devices when possible Photo: Jeremy Keith https://flic.kr/p/bPZzeM
- 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