Download - Responsive Design Workshop
![Page 1: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/1.jpg)
Photo: Jakub Solovský https://flic.kr/p/i1RRZm
Designing Responsive WebsitesClarissa Peterson ✦ @clarissa
A hands-on workshop at EuroIA ✦ 27 Sept. 2014
![Page 2: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/2.jpg)
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/
![Page 3: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/3.jpg)
What is responsive design?
![Page 4: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/4.jpg)
Flexible
Photo: Mike Mozard https://flic.kr/p/jXxfeF
![Page 9: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/9.jpg)
Adjustable
Photo: William Warbyhttps://flic.kr/p/j9KrpA
![Page 10: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/10.jpg)
http://www.unitedpixelworkers.com/
![Page 11: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/11.jpg)
http://www.unitedpixelworkers.com/
![Page 12: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/12.jpg)
http://www.unitedpixelworkers.com/
![Page 13: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/13.jpg)
http://www.unitedpixelworkers.com/
![Page 14: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/14.jpg)
http://www.unitedpixelworkers.com/
![Page 15: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/15.jpg)
http://www.unitedpixelworkers.com/
![Page 16: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/16.jpg)
http://www.unitedpixelworkers.com/
![Page 45: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/45.jpg)
http://www.microsoft.com/en-us/default.aspx
![Page 46: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/46.jpg)
http://www.microsoft.com/en-us/default.aspx
![Page 47: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/47.jpg)
http://www.microsoft.com/en-us/default.aspx
![Page 48: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/48.jpg)
http://www.microsoft.com/en-us/default.aspx
![Page 49: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/49.jpg)
How responsive design works
![Page 50: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/50.jpg)
All Devices
Photo: Brad Frost https://flic.kr/p/cfQwL7
![Page 51: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/51.jpg)
Range of phone sizes
Source: http://opensignal.com/reports/fragmentation.php
![Page 54: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/54.jpg)
Flexible
Photo: Horia Varlan https://flic.kr/p/7XrUY1
![Page 55: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/55.jpg)
article { width: 100%; }
div { margin: 0 10%; }
![Page 56: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/56.jpg)
img { max-width: 100%; }
![Page 61: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/61.jpg)
View: Turtle Photo
turtle.html
![Page 62: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/62.jpg)
View: Turtle #1
img { max-width: 100%; }
![Page 63: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/63.jpg)
Media Queries
Photo: Raymond Bryson https://flic.kr/p/8CkodQ
![Page 64: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/64.jpg)
body { background-color: green; }
@media only screen and (min-width: 40em) { body { background-color: blue; } }
![Page 65: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/65.jpg)
body { background-color: green; }
@media only screen and (min-width: 40em) { body { background-color: blue; } }
![Page 66: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/66.jpg)
body { background-color: green; }
@media only screen and (min-width: 40em) { body { background-color: blue; } }
![Page 68: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/68.jpg)
Change navigationwith media queries
http://www.easterseals.com/
![Page 73: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/73.jpg)
Change typographywith media queries
http://www.trentwalton.com
![Page 83: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/83.jpg)
Change entire designwith media queries
http://www.salesforce.com/
![Page 88: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/88.jpg)
min-width: 30emmax-width: 30em
![Page 89: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/89.jpg)
min-height: 30emmax-height: 30em
![Page 94: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/94.jpg)
min-device-width: 30emmax-device-width: 30emmin-device-height: 30emmax-device-height: 30em
![Page 95: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/95.jpg)
orientation: portraitorientation: landscape
![Page 96: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/96.jpg)
Via: http://wtfmobileweb.com/post/16758384465/thanks-for-providing-so-much-screen-real-estate
![Page 97: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/97.jpg)
aspect-ratio: 16/9device-aspect-ratio: 16/9
min-aspect-ratio: 1/1
![Page 98: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/98.jpg)
min-resolution: 300dpi
![Page 99: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/99.jpg)
View: Alice in Wonderland
alice.html
![Page 100: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/100.jpg)
View: Alice #1
@media only screen and (min-width:30em) { body { color: red; }}
![Page 101: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/101.jpg)
View: Alice #2
@media only screen and (min-width:30em) { body { color: red; }}
@media only screen and (min-width:60em) { body { color: blue; }}
![Page 102: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/102.jpg)
View: Alice #3
@media only screen and (max-width:30em) { body { color: red; }}
![Page 103: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/103.jpg)
View: Alice #4
@media only screen and (min-height:20em) { body { color: red; }}
![Page 104: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/104.jpg)
View: Alice #5
@media only screen and (max-height:20em) { body { color: red; }}
![Page 105: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/105.jpg)
Performance
![Page 106: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/106.jpg)
Slow connections arenot just on phones
Photo: Nicolas Vigier https://flic.kr/p/23xNNg
![Page 107: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/107.jpg)
“You can't mock up performance in Photoshop.”
- Brad Frost@brad_frost
![Page 108: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/108.jpg)
Performance Budget
Photo: Reyner Media https://flic.kr/p/hT9yw7
![Page 109: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/109.jpg)
Responsive images
Photo: Craig Finlay https://flic.kr/p/5R51o3
![Page 110: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/110.jpg)
Third-party code
![Page 112: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/112.jpg)
Blocking CSS & JavaScript
Photo: Holger Zscheyge https://flic.kr/p/5kcFk
![Page 113: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/113.jpg)
-100ms ➔ +1%
![Page 114: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/114.jpg)
-400ms ➔ +9%
![Page 115: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/115.jpg)
Being a Web designer & not considering speed/performance is like being a print designer & not considering how your colors will print.
- Luke Wroblewski@lukew
![Page 116: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/116.jpg)
https://developers.google.com/speed/pagespeed/insights/
![Page 117: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/117.jpg)
https://developers.google.com/speed/pagespeed/insights/
![Page 118: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/118.jpg)
https://developers.google.com/speed/pagespeed/insights/
![Page 119: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/119.jpg)
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
![Page 123: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/123.jpg)
![Page 124: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/124.jpg)
![Page 125: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/125.jpg)
![Page 126: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/126.jpg)
![Page 130: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/130.jpg)
![Page 131: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/131.jpg)
![Page 132: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/132.jpg)
![Page 133: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/133.jpg)
Prototyping responsive design
![Page 134: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/134.jpg)
Design Process
Photo: Wonderlane https://flic.kr/p/bSHvgv
![Page 135: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/135.jpg)
![Page 136: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/136.jpg)
Design Develop
![Page 137: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/137.jpg)
Design
Develop
![Page 139: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/139.jpg)
“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
![Page 140: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/140.jpg)
Sketching
Photo: Christian Campos https://flic.kr/p/6Vb1Xd
![Page 142: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/142.jpg)
Wireframes
![Page 145: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/145.jpg)
Prototyping Tools
Photo: Kate Ter Haar https://flic.kr/p/9KQoQd
![Page 146: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/146.jpg)
Use frameworksfor prototyping
http://foundation.zurb.com/
![Page 151: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/151.jpg)
http://foundation.zurb.com/
http://foundation.zurb.com/
![Page 154: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/154.jpg)
http://foundation.zurb.com/templates.html
![Page 155: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/155.jpg)
http://foundation.zurb.com/templates.html
![Page 156: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/156.jpg)
http://foundation.zurb.com/templates.html
![Page 157: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/157.jpg)
http://foundation.zurb.com/templates.html
![Page 158: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/158.jpg)
http://foundation.zurb.com/templates.html
![Page 159: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/159.jpg)
http://foundation.zurb.com/templates.html
![Page 160: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/160.jpg)
http://foundation.zurb.com/templates.html
![Page 161: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/161.jpg)
http://foundation.zurb.com/templates.html
![Page 162: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/162.jpg)
http://foundation.zurb.com/templates.html
![Page 163: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/163.jpg)
http://foundation.zurb.com/templates.html
![Page 164: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/164.jpg)
http://foundation.zurb.com/templates.html
![Page 165: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/165.jpg)
http://foundation.zurb.com/templates.html
![Page 166: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/166.jpg)
http://foundation.zurb.com/templates.html
![Page 167: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/167.jpg)
http://foundation.zurb.com/templates.html
![Page 177: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/177.jpg)
View: Foundation Templates
foundation/template-bannerhome.htmlfoundation/template-blog.htmlfoundation/template-grid.htmlfoundation/template-realty.htmlfoundation/template-soboxy.htmlfoundation/template-workspace.html
![Page 178: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/178.jpg)
http://foundation.zurb.com/templates.html
![Page 179: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/179.jpg)
![Page 180: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/180.jpg)
Creating responsive designs
![Page 181: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/181.jpg)
The first websitewas responsive
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
![Page 182: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/182.jpg)
Start with Content
Photo: Lainey Powell https://flic.kr/p/eWJog
![Page 183: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/183.jpg)
Small Screen First
Photo: Justus Blümer https://flic.kr/p/abN4Q4
![Page 184: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/184.jpg)
![Page 186: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/186.jpg)
![Page 187: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/187.jpg)
![Page 192: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/192.jpg)
Style Tiles
Photo: Lauren Manning https://flic.kr/p/4wV5Q1
![Page 195: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/195.jpg)
Touch
Photo; Alexandra Zakharova https://flic.kr/p/jRnhnU
![Page 198: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/198.jpg)
Touch target size
Photo: Erika https://flic.kr/p/6rMRUZ
![Page 199: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/199.jpg)
![Page 200: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/200.jpg)
ul a { display: block; }
![Page 201: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/201.jpg)
ul a { display: block; padding: 3px 5px; }
![Page 202: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/202.jpg)
Mobile First
Photo: Vernon Chan https://flic.kr/p/d5DEjS
![Page 208: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/208.jpg)
<a href=”tel:202-123-4567”>202-123-4567</a>
![Page 209: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/209.jpg)
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
![Page 210: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/210.jpg)
Change brandingwith media queries
http://www.dorigati.it/en/
![Page 214: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/214.jpg)
Navigation
Photo: Calsidyrose https://flic.kr/p/8vehvb
![Page 215: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/215.jpg)
http://bradfrost.github.com/this-is-responsive/patterns.html
![Page 226: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/226.jpg)
Footer Navigation
http://contentsmagazine.com/
![Page 230: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/230.jpg)
Toggle Navigation
![Page 231: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/231.jpg)
http://www.starbucks.com/
![Page 236: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/236.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 237: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/237.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 238: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/238.jpg)
<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>
![Page 239: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/239.jpg)
<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>
![Page 240: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/240.jpg)
nav { ! overflow: hidden;! max-height: 0;}nav.active { ! max-height: 15em;}
![Page 241: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/241.jpg)
nav { ! overflow: hidden;! max-height: 0;}nav.active { ! max-height: 15em;}
![Page 242: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/242.jpg)
<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>
![Page 243: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/243.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 244: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/244.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 245: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/245.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 246: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/246.jpg)
@media only screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! nav {! ! max-height: none;! }}
![Page 247: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/247.jpg)
@media only screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! nav {! ! max-height: none;! }}
![Page 248: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/248.jpg)
@media only screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! nav {! ! max-height: none;! }}
![Page 253: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/253.jpg)
Left Nav Flyout
http://www.emerilsrestaurants.com/
![Page 254: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/254.jpg)
http://www.emerilsrestaurants.com/
![Page 255: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/255.jpg)
http://www.emerilsrestaurants.com/
![Page 256: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/256.jpg)
http://www.emerilsrestaurants.com/
![Page 257: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/257.jpg)
Priority Navigation
https://www.pittsburghglasscenter.org/
![Page 258: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/258.jpg)
https://www.pittsburghglasscenter.org/
![Page 259: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/259.jpg)
https://www.pittsburghglasscenter.org/
![Page 260: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/260.jpg)
https://www.pittsburghglasscenter.org/
![Page 261: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/261.jpg)
https://www.pittsburghglasscenter.org/
![Page 262: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/262.jpg)
https://www.pittsburghglasscenter.org/
![Page 263: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/263.jpg)
Hamburger icon
Photo: Shane Adams https://flic.kr/p/6mPHuN
![Page 267: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/267.jpg)
http://www.microsoft.com/en-ca/default.aspx
![Page 268: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/268.jpg)
https://www.pittsburghglasscenter.org/
![Page 269: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/269.jpg)
View: Pandas Forever
pandas.html
![Page 270: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/270.jpg)
<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>
![Page 271: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/271.jpg)
View: Pandas #1
nav ul { list-style-type: none; padding: 0; margin: 0; }
nav li { margin: 0; padding: 0; }
![Page 272: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/272.jpg)
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; }
![Page 273: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/273.jpg)
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; }
![Page 274: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/274.jpg)
View: Pandas #4
@media only screen and (min-width: 30em) { nav li { display: block; float: left; } }
![Page 275: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/275.jpg)
View: Pandas #5
@media only screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } }
![Page 276: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/276.jpg)
View: Pandas #6
@media only screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } nav { padding-bottom: 3em; }}
![Page 277: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/277.jpg)
TypographyPhoto: Marcin Wichary https://flic.kr/p/4r1D8w
![Page 283: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/283.jpg)
![Page 284: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/284.jpg)
1em = default
![Page 285: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/285.jpg)
2em = twice as big1em = default
![Page 286: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/286.jpg)
2em = twice as big1em = default
.5em = half as big
![Page 287: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/287.jpg)
body { font-size: 100%; }
Default font size
![Page 297: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/297.jpg)
h1 { font-size: 3em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }
p { font-size: 1em; }
![Page 298: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/298.jpg)
View: Peter Rabbit
rabbit.html
![Page 299: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/299.jpg)
View: Rabbit #1
body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }
![Page 300: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/300.jpg)
<p>This is 1 em.</p>
<div>This is 2 ems <span>(and 1.5 ems)</span>.</div>
![Page 301: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/301.jpg)
<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; }
![Page 302: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/302.jpg)
<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; }
![Page 303: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/303.jpg)
Thoughtful CSS
Photo: AleXander Agopian https://flic.kr/p/bUxzCm
![Page 304: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/304.jpg)
![Page 305: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/305.jpg)
div { font-size: 1.1em; }
![Page 306: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/306.jpg)
div { font-size: 1.2em; }
![Page 307: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/307.jpg)
View: Rabbit #2
article { font-size: 2em; }
![Page 308: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/308.jpg)
View: Rabbit #1
body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }
![Page 309: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/309.jpg)
Photo: Kyle Van Horn https://flic.kr/p/5a4L3p
Rems
![Page 310: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/310.jpg)
html { font-size: 100%; }
![Page 312: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/312.jpg)
h1 { font-size: 32px; font-size: 2rem; }
![Page 313: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/313.jpg)
![Page 314: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/314.jpg)
Line Height (Leading)
Photo: Marcin Wichary https://flic.kr/p/4EDFYF
![Page 315: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/315.jpg)
![Page 316: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/316.jpg)
![Page 317: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/317.jpg)
p { line-height: 1; }
p { line-height: 2; }
![Page 318: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/318.jpg)
![Page 319: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/319.jpg)
![Page 320: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/320.jpg)
![Page 321: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/321.jpg)
p { line-height: 1; }
![Page 322: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/322.jpg)
p { line-height: 2; }
![Page 323: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/323.jpg)
p { line-height: 1.4; }
![Page 324: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/324.jpg)
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 }}
![Page 325: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/325.jpg)
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; }}
![Page 326: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/326.jpg)
Vertical Margins
Photo: Nick Ares https://flic.kr/p/4qc5EB
![Page 327: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/327.jpg)
![Page 328: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/328.jpg)
p { line-height: 1.5; margin-top: 1.5em; margin-bottom: 1.5em;}
![Page 329: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/329.jpg)
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; }}
![Page 330: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/330.jpg)
View: Rabbit #1
body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }
![Page 331: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/331.jpg)
Line Length (Measure)
Photo: Provenance Online Project https://flic.kr/p/9xHSNH
![Page 332: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/332.jpg)
![Page 333: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/333.jpg)
![Page 334: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/334.jpg)
45-75 Characters
![Page 335: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/335.jpg)
![Page 336: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/336.jpg)
65586573686766
74726969
![Page 337: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/337.jpg)
![Page 338: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/338.jpg)
<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>
![Page 339: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/339.jpg)
<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>
.testing { color: #f00; }
![Page 340: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/340.jpg)
<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>
.testing { color: #f00; }
![Page 341: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/341.jpg)
http://codepen.io/chriscoyier/pen/atebf
![Page 342: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/342.jpg)
![Page 343: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/343.jpg)
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>
![Page 344: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/344.jpg)
View: Rabbit #6
article { width: 94%; margin: auto;}
article p { line-height: 1.3; margin: 1.3em 0;}
![Page 345: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/345.jpg)
max-widthPhoto: Gustavo Jeronimo https://flic.kr/p/7nCGk3
![Page 346: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/346.jpg)
![Page 347: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/347.jpg)
article { max-width: 28em; }
![Page 348: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/348.jpg)
article { max-width: 28em; }
![Page 349: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/349.jpg)
article { max-width: 28em; }
![Page 350: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/350.jpg)
View: Rabbit #7
article { max-width: 26em; }
![Page 351: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/351.jpg)
View: Rabbit #8
article { max-width: 30em; }
![Page 352: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/352.jpg)
![Page 353: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/353.jpg)
![Page 354: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/354.jpg)
@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}
![Page 355: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/355.jpg)
@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}
![Page 356: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/356.jpg)
@media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; }}
![Page 357: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/357.jpg)
@media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; }}
![Page 358: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/358.jpg)
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; }}
![Page 359: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/359.jpg)
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; }}
![Page 361: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/361.jpg)
![Page 362: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/362.jpg)
![Page 363: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/363.jpg)
Alignment & HyphenationPhoto: SurFeRGiRL30 https://flic.kr/p/8veLPW
![Page 364: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/364.jpg)
![Page 365: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/365.jpg)
![Page 366: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/366.jpg)
![Page 367: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/367.jpg)
p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
![Page 368: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/368.jpg)
@media only screen and (max-width: 40em) { p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }}
![Page 369: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/369.jpg)
View: Rabbit #1
body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }
![Page 370: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/370.jpg)
View: Rabbit #11
p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
![Page 371: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/371.jpg)
<html lang="en">
![Page 375: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/375.jpg)
#intro { font-size: 1em; font-family: Helvetica, sans-serif;}
![Page 376: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/376.jpg)
#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; }}
![Page 377: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/377.jpg)
Performance
![Page 378: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/378.jpg)
Web Fonts
Photo: Ian Kobylanski https://flic.kr/p/e7ES3o
![Page 379: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/379.jpg)
@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;}
![Page 380: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/380.jpg)
@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;}
![Page 381: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/381.jpg)
@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;}
![Page 382: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/382.jpg)
Use fewer fonts
![Page 383: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/383.jpg)
@font-face { font-family: 'Source Sans Pro'; src: url('SourceSansPro.eot'); }
![Page 384: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/384.jpg)
@font-face { font-family: 'Source Sans Pro'; src: url('SourceSansPro.eot'); }
p { font-family: Arial, sans-serif; }
![Page 385: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/385.jpg)
@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; }}
![Page 386: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/386.jpg)
http://www.jordanm.co.uk/tinytype
![Page 387: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/387.jpg)
http://www.jordanm.co.uk/tinytype
h1 { font-family: Helvetica, Arial, 'Droid Sans', sans-serif; }
![Page 388: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/388.jpg)
View: Rabbit #1
body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }
![Page 389: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/389.jpg)
View: Rabbit #12
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
![Page 390: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/390.jpg)
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; }}
![Page 391: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/391.jpg)
Don’t forget styles for print
Photo: Daviddje https://flic.kr/p/div4a3
![Page 392: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/392.jpg)
Testing responsive design
![Page 393: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/393.jpg)
Use real deviceswhen possible
Photo: Jeremy Keith https://flic.kr/p/bPZzeM
![Page 395: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/395.jpg)
![Page 396: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/396.jpg)
Device Labs
![Page 397: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/397.jpg)
Photo: Jakub Solovský https://flic.kr/p/i1RRZm
Thanks!
![Page 398: Responsive Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022013003/557d585cd8b42abf3d8b4977/html5/thumbnails/398.jpg)
clarissapeterson.com
@clarissa
Photo: Jakub Solovský https://flic.kr/p/i1RRZm
Clarissa PetersonPeterson/Kandy