Downloaded 425 times
Uploaded byClarissa Peterson
Responsive Design Workshop
The document details a hands-on workshop on designing responsive websites, emphasizing the importance of responsive design, media queries, and performance in web development. It includes practical coding examples and resources for further exploration. The text also highlights various design processes and tools used in creating responsive layouts and emphasizes an iterative approach to web design.
More Related Content
Similar to Responsive Design Workshop
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 downloadfiles 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.
- 4. Flexible Photo: Mike Mozardhttps://flic.kr/p/jXxfeF
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. Photo: Mo Rizahttps://flic.kr/p/ca1kU
- 33. Photo: Luke Wroblewskihttps://flic.kr/p/gTH5oL
- 34. Photo: Luke Wroblewskihttps://flic.kr/p/gTH5oL
- 35. Photo: Kārlis Dambrānshttps://flic.kr/p/oq2r8z
- 36. Photo: Rob DiCaterinohttps://flic.kr/p/5yk9cA
- 37. Photo: Kārlis Dambrānshttps://flic.kr/p/f1oriS
- 38. Photo: Sean MacEnteehttps://flic.kr/p/bR4vGi
- 39. Photo: Kārlis Dambrānshttps://flic.kr/p/oBTNuP
- 40. Photo: Rodrigo Sennahttps://flic.kr/p/4oVCo
- 41.
- 42. Photo: Kārlis Dambrānshttps://flic.kr/p/gFgXfS
- 43. Photo: Kārlis Dambrānshttps://flic.kr/p/mw5wzT
- 44. Photo: Matthew Pearcehttps://flic.kr/p/aAJin6
- 45.
- 46.
- 47.
- 48.
- 49.
- 50. All Devices Photo: BradFrost https://flic.kr/p/cfQwL7
- 51. Range of phonesizes Source: http://opensignal.com/reports/fragmentation.php
- 52. Photo: Kārlis Dambrānshttps://flic.kr/p/iqj7yP
- 53. Photo: Kārlis Dambrānshttps://flic.kr/p/gmQupy
- 54.
- 55. article { width:100%; } div { margin: 0 10%; }
- 56. img { max-width:100%; }
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. View:Turtle #1 img {max-width: 100%; }
- 63. Media Queries Photo: RaymondBryson 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 Corothershttps://flic.kr/p/8U1KwJ
- 68. Change navigation with mediaqueries http://www.easterseals.com/
- 69.
- 70.
- 71.
- 72.
- 73. Change typography with mediaqueries http://www.trentwalton.com
- 74.
- 75.
- 76.
- 77.
- 78. Add more detail withmedia queries http://mailchimp.com/
- 79.
- 80.
- 81.
- 82.
- 83. Change entire design withmedia queries http://www.salesforce.com/
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94. min-device-width: 30em max-device-width: 30em min-device-height:30em max-device-height: 30em
- 95.
- 96.
- 97.
- 98.
- 99.
- 100. View:Alice #1 @media onlyscreen and (min-width:30em) { body { color: red; } }
- 101. View:Alice #2 @media onlyscreen and (min-width:30em) { body { color: red; } } @media only screen and (min-width:60em) { body { color: blue; } }
- 102. View:Alice #3 @media onlyscreen and (max-width:30em) { body { color: red; } }
- 103. View:Alice #4 @media onlyscreen and (min-height:20em) { body { color: red; } }
- 104. View:Alice #5 @media onlyscreen and (max-height:20em) { body { color: red; } }
- 105.
- 106. Slow connections are notjust on phones Photo: NicolasVigier https://flic.kr/p/23xNNg
- 107. “You can't mockup performance in Photoshop.” - Brad Frost @brad_frost
- 108. Performance Budget Photo: ReynerMedia https://flic.kr/p/hT9yw7
- 109. Responsive images Photo: CraigFinlay https://flic.kr/p/5R51o3
- 110.
- 111. Photo: Michael Himbeaulthttps://flic.kr/p/7NFTF6
- 112. Blocking CSS &JavaScript Photo: Holger Zscheyge https://flic.kr/p/5kcFk
- 113.
- 114.
- 115. Being a Webdesigner & not considering speed/performance is like being a print designer & not considering how your colors will print. - Luke Wroblewski @lukew
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 127.
- 128.
- 129.
- 133.
- 134.
- 136.
- 137.
- 138. Photo: Chris Gladishttps://flic.kr/p/rZVTg
- 139. “It's not likeour industry nailed web design before we started doing responsive design. It's still a work in progress.” - Dan Willis @uxcrank
- 140. Sketching Photo: Christian Camposhttps://flic.kr/p/6Vb1Xd
- 141.
- 142.
- 143.
- 144.
- 145. Prototyping Tools Photo: KateTer Haar https://flic.kr/p/9KQoQd
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171. Websites and applications forprototyping http://froont.com/
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 180.
- 181. The first website wasresponsive 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.
- 188.
- 189.
- 190.
- 191.
- 192. Style Tiles Photo: LaurenManning https://flic.kr/p/4wV5Q1
- 193.
- 194.
- 195.
- 196.
- 197.
- 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 Chanhttps://flic.kr/p/d5DEjS
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 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 mediaqueries http://www.dorigati.it/en/
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238. <a href="#menu" class="menu-link">Menu</a> <navclass="" 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> <navclass="" 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.
- 244.
- 245.
- 246. @media only screenand (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! nav { ! ! max-height: none; ! } }
- 247. @media only screenand (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! nav { ! ! max-height: none; ! } }
- 248. @media only screenand (min-width: 48.25em) { ! a.menu-link { ! ! display: none; ! } ! nav { ! ! max-height: none; ! } }
- 249.
- 250.
- 251.
- 252.
- 253.
- 254.
- 255.
- 256.
- 257.
- 258.
- 259.
- 260.
- 261.
- 262.
- 263. Hamburger icon Photo: ShaneAdams https://flic.kr/p/6mPHuN
- 264.
- 265.
- 266.
- 267.
- 268.
- 269.
- 270. <nav role="navigation"> <ul> <li><a href="/">Home</a></li> <li><ahref="/about/">About</a></li> <li><a href="/links/">Links</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav>
- 271. View: Pandas #1 navul { list-style-type: none; padding: 0; margin: 0; } nav li { margin: 0; padding: 0; }
- 272. View: Pandas #2 navul { 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 navul { 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 @mediaonly screen and (min-width: 30em) { nav li { display: block; float: left; } }
- 275. View: Pandas #5 @mediaonly screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } }
- 276. View: Pandas #6 @mediaonly screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } nav { padding-bottom: 3em; } }
- 277. Typography Photo: Marcin Wicharyhttps://flic.kr/p/4r1D8w
- 278.
- 279.
- 280.
- 281.
- 282. Photo: John Nuttallhttps://flic.kr/p/kERMbC Ems
- 284.
- 285. 2em = twiceas big 1em = default
- 286. 2em = twiceas big 1em = default .5em = half as big
- 287. body { font-size:100%; } Default font size
- 288.
- 289.
- 290. Photo: Sam Howzithttps://flic.kr/p/dhufQk Scale
- 291.
- 292.
- 293.
- 294.
- 295.
- 296.
- 297. h1 { font-size:3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } p { font-size: 1em; }
- 298.
- 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 1em.</p> <div>This is 2 ems <span>(and 1.5 ems) </span>.</div>
- 301. <p>This is 1em.</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 1em.</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 Agopianhttps://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 Hornhttps://flic.kr/p/5a4L3p Rems
- 310. html { font-size:100%; }
- 311. Photo: Hanan Cohenhttps://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: NickAres 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.
- 336.
- 338. <p>These stories aretrue. 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 aretrue. 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 aretrue. 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.
- 343. View: Rabbit #5 <p>Onceupon 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 Jeronimohttps://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 screenand (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 355. @media only screenand (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 356. @media only screenand (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; } }
- 357. @media only screenand (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; } }
- 358. View: Rabbit #9 @mediaonly screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
- 359. View: Rabbit #10 @mediaonly screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; } }
- 360.
- 363. Alignment & Hyphenation Photo:SurFeRGiRL30 https://flic.kr/p/8veLPW
- 367. p { -webkit-hyphens: auto; -moz-hyphens:auto; hyphens: auto; }
- 368. @media only screenand (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.
- 372.
- 373.
- 374.
- 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.
- 378. Web Fonts Photo: IanKobylanski 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.
- 383. @font-face { font-family: 'SourceSans Pro'; src: url('SourceSansPro.eot'); }
- 384. @font-face { font-family: 'SourceSans Pro'; src: url('SourceSansPro.eot'); } p { font-family: Arial, sans-serif; }
- 385. @font-face { font-family: 'SourceSans 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.
- 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 <linkhref='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 forprint Photo: Daviddje https://flic.kr/p/div4a3
- 392.
- 393. Use real devices whenpossible Photo: Jeremy Keith https://flic.kr/p/bPZzeM
- 394.
- 396.
- 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