Clarissa Peterson 
@clarissa 
Designing Responsive Websites
http://www.oliverharvey.co.uk/
http://www.oliverharvey.co.uk/
http://www.linksture.com/
http://www.linksture.com/
http://skinnyties.com/
http://skinnyties.com/
Flexible 
https://flic.kr/p/jXxfeF
#content { 
width: 90%; 
}
Adjustable 
https://flic.kr/p/j9KrpA
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
article { width: 92%; } 
@media only screen and (min-width:40em) { 
article { width: 70%; float: left; 
}
https://flic.kr/p/ca1kU
https://flic.kr/p/cfQwL7
Design Process 
https://flic.kr/p/bSHvgv
https://flic.kr/p/35Ahx
Design Develop
Design 
Develop
https://flic.kr/p/rZVTg
“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
Content 
https://flic.kr/p/4qc5EB
http://teamtreehouse.com
http://teamtreehouse.com
http://teamtreehouse.com
http://teamtreehouse.com
Small Screen First 
https://flic.kr/p/abN4Q4
Wireframes
http://flic.kr/p/cJJdzm
http://foundation.zurb.com/
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/docs/forms.php
http://foundation.zurb.com/docs/typography.php
http://www.hotgloo.com/
Typography 
https://flic.kr/p/4r1D8w
http://www.trentwalton.com
http://www.trentwalton.com
http://www.trentwalton.com
http://www.trentwalton.com
https://flic.kr/p/eYEFGY 
Ems & Rems
1em = default
2em = twice as big 
1em = default
2em = twice as big 
1em = default 
.5em = half as big
h1 { font-size: 3em; } 
h2 { font-size: 2em; } 
h3 { font-size: 1.5em; }
h1 { font-size: 3em; } 
h2 { font-size: 2em; } 
h3 { font-size: 1.5em; }
body { font-size: 100%; }
https://flic.kr/p/8iNCNU
Scale 
https://flic.kr/p/dhufQk
Line Length (Measure) 
http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
45-75 Characters
max-width 
https://flic.kr/p/7nCGk3
article { max-width: 28em; }
article { max-width: 28em; }
@media only screen and (min-width:48em) { 
article { font-size: 1.1em; } 
article p { line-height: 1.4; 
margin: 1.4em auto; } 
}
@media only screen and (min-width:48em) { 
article { font-size: 1.1em; } 
article p { line-height: 1.4; 
margin: 1.4em auto; } 
}
http://wearyoubelong.com/
http://wearyoubelong.com/
#intro { 
font-size: 1em; 
font-family: Helvetica, sans-serif; 
}
#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; 
} 
}
Mobile 
https://flic.kr/p/d5DEjS
https://flic.kr/p/jRnhnU
https://flic.kr/p/nNu7sP
<a href=”tel:202-123-4567”>202-123-4567</a>
Performance
https://flic.kr/p/23xNNg
“You can't mock up performance in 
Photoshop.” 
- Brad Frost 
@brad_frost
Performance Budget 
https://flic.kr/p/hT9yw7
https://flic.kr/p/5R51o3
https://flic.kr/p/7NFTF6
Testing 
https://flic.kr/p/bPZzeM
http://www.browserstack.com/
Device Labs
https://flic.kr/p/cdVB9h 
Clarissa Peterson 
Peterson/Kandy 
clarissapeterson.com 
@clarissa

Designing Responsive Websites