UX & Responsive Design 
@clarissa 
https://flic.kr/p/ohrJBb
2002
2010 
http://archive.aneventapart.com/2010/dc/
Flexible 
https://flic.kr/p/jXxfeF
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; 
}
http://www.apple.com
http://www.apple.com
http://www.apple.com
https://flic.kr/p/gTH5oL
https://flic.kr/p/gTH5oL
https://flic.kr/p/oq2r8z
https://flic.kr/p/5yk9cA
https://flic.kr/p/f1oriS
https://flic.kr/p/bR4vGi
https://flic.kr/p/oBTNuP
https://flic.kr/p/4oVCo
https://flic.kr/p/4FGx7a
https://flic.kr/p/gFgXfS
https://flic.kr/p/mw5wzT
https://flic.kr/p/aAJin6
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
http://mobitest.akamai.com
https://flic.kr/p/5R51o3
https://flic.kr/p/7NFTF6
Blocking CSS & JavaScript 
https://flic.kr/p/5kcFk
-100ms ➔ +1%
-400ms ➔ +9%
Being a Web designer & not considering 
speed/performance is like being a print 
designer & not considering how your 
colors will print. 
- Luke Wroblewski 
@lukew
Touch 
https://flic.kr/p/jRnhnU
http://2014.blendconf.com
http://2014.blendconf.com
https://flic.kr/p/6rMRUZ
ul a { display: block; }
ul a { display: block; padding: 3px 5px; }
http://www.cupcakeipsum.com
https://flic.kr/p/9UByoJ
Mobile 
https://flic.kr/p/d5DEjS
https://flic.kr/p/nNu7sP
http://www.kiwibank.co.nz
http://www.kiwibank.co.nz
http://www.kiwibank.co.nz
<a href=”tel:202-123-4567”>202-123-4567</a>
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; }
body { font-size: 100%; }
https://flic.kr/p/8iNCNU
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; 
} 
}
Media Queries 
https://flic.kr/p/ajTNcB
https://flic.kr/p/8U1KwJ
Design Process 
https://flic.kr/p/bSHvgv
https://flic.kr/p/abN4Q4
https://flic.kr/p/4qc5EB
http://teamtreehouse.com
http://teamtreehouse.com
http://teamtreehouse.com
Testing 
https://flic.kr/p/bPZzeM
http://www.browserstack.com/
http://dcdevicelab.com
https://flic.kr/p/fyTLNm 
Clarissa Peterson 
Peterson/Kandy 
clarissapeterson.com 
@clarissa

UX & Responsive Design