ux & responsive design
DESCRIPTION
Although responsive web design has only been around for a few years, it's grown up a lot since first we started talking about fluid grids and media queries. Now, we look to responsive design with the goal of providing a good experience for every user on every device. From the DC Web Women Code(Her) Conference, 9/13/14.TRANSCRIPT
UX & Responsive Design@clarissa
https://flic.kr/p/ohrJBb
2002
2010http://archive.aneventapart.com/2010/dc/
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;}
Performance
“You can't mock up performance in Photoshop.”
- Brad Frost@brad_frost
-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
ul a { display: block; }
ul a { display: block; padding: 3px 5px; }
<a href=”tel:202-123-4567”>202-123-4567</a>
1em = default
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%; }
Line Length (Measure)
http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
45-75 Characters
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; }}
#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; }}
https://flic.kr/p/fyTLNm
Clarissa PetersonPeterson/Kandy
clarissapeterson.com@clarissa