UX & Responsive Design@clarissa
https://flic.kr/p/ohrJBb
2010http://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
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
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>
Typographyhttps://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
2em = twice as big1em = default
2em = twice as big1em = 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
max-widthhttps://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 PetersonPeterson/Kandy
clarissapeterson.com@clarissa