Download - Designing Responsive Websites
Designing Responsive Websites
Clarissa Peterson
@clarissa
#content { width: 90%;}
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;}
Design Develop
Design
Develop
“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
Wireframes
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
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; }
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; }}
<a href=”tel:202-123-4567”>202-123-4567</a>
Performance
“You can't mock up performance in Photoshop.”
- Brad Frost@brad_frost
Device Labs
https://flic.kr/p/cdVB9h
Clarissa PetersonPeterson/Kandy
clarissapeterson.com@clarissa