Designing Responsive Websites
-
Upload
clarissa-peterson -
Category
Design
-
view
5.222 -
download
0
description
Transcript of Designing Responsive Websites
![Page 1: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/1.jpg)
Designing Responsive Websites
Clarissa Peterson
@clarissa
![Page 9: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/9.jpg)
![Page 10: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/10.jpg)
![Page 11: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/11.jpg)
![Page 12: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/12.jpg)
![Page 13: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/13.jpg)
#content { width: 90%;}
![Page 15: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/15.jpg)
http://www.unitedpixelworkers.com/
![Page 16: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/16.jpg)
http://www.unitedpixelworkers.com/
![Page 17: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/17.jpg)
http://www.unitedpixelworkers.com/
![Page 18: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/18.jpg)
http://www.unitedpixelworkers.com/
![Page 19: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/19.jpg)
http://www.unitedpixelworkers.com/
![Page 20: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/20.jpg)
article { width: 92%; }
@media only screen and (min-width:40em) { article { width: 70%; float: left;}
![Page 21: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/21.jpg)
![Page 22: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/22.jpg)
![Page 23: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/23.jpg)
![Page 24: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/24.jpg)
![Page 25: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/25.jpg)
![Page 30: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/30.jpg)
Design Develop
![Page 31: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/31.jpg)
Design
Develop
![Page 33: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/33.jpg)
“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
![Page 40: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/40.jpg)
![Page 41: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/41.jpg)
![Page 42: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/42.jpg)
![Page 43: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/43.jpg)
![Page 44: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/44.jpg)
Wireframes
![Page 47: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/47.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 48: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/48.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 49: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/49.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 50: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/50.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 51: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/51.jpg)
http://foundation.zurb.com/docs/forms.php
![Page 52: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/52.jpg)
http://foundation.zurb.com/docs/typography.php
![Page 60: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/60.jpg)
![Page 61: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/61.jpg)
1em = default
![Page 62: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/62.jpg)
2em = twice as big1em = default
![Page 63: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/63.jpg)
2em = twice as big1em = default
.5em = half as big
![Page 64: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/64.jpg)
h1 { font-size: 3em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }
![Page 65: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/65.jpg)
h1 { font-size: 3em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }
![Page 66: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/66.jpg)
body { font-size: 100%; }
![Page 69: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/69.jpg)
Line Length (Measure)
http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
![Page 70: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/70.jpg)
![Page 71: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/71.jpg)
![Page 72: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/72.jpg)
45-75 Characters
![Page 74: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/74.jpg)
article { max-width: 28em; }
![Page 75: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/75.jpg)
article { max-width: 28em; }
![Page 76: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/76.jpg)
![Page 77: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/77.jpg)
![Page 78: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/78.jpg)
@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}
![Page 79: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/79.jpg)
@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}
![Page 82: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/82.jpg)
#intro { font-size: 1em; font-family: Helvetica, sans-serif;}
![Page 83: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/83.jpg)
#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; }}
![Page 87: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/87.jpg)
![Page 88: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/88.jpg)
![Page 89: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/89.jpg)
![Page 90: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/90.jpg)
![Page 91: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/91.jpg)
![Page 92: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/92.jpg)
<a href=”tel:202-123-4567”>202-123-4567</a>
![Page 93: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/93.jpg)
Performance
![Page 95: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/95.jpg)
“You can't mock up performance in Photoshop.”
- Brad Frost@brad_frost
![Page 98: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/98.jpg)
![Page 102: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/102.jpg)
Device Labs
![Page 103: Designing Responsive Websites](https://reader035.fdocuments.net/reader035/viewer/2022062307/555c53c4d8b42af3448b4b17/html5/thumbnails/103.jpg)
https://flic.kr/p/cdVB9h
Clarissa PetersonPeterson/Kandy
clarissapeterson.com@clarissa