Designing Responsive Websites

Clarissa Peterson

@clarissa

http://www.oliverharvey.co.uk/

http://www.oliverharvey.co.uk/

http://www.linksture.com/

http://www.linksture.com/

http://skinnyties.com/

http://skinnyties.com/

Flexible

https://flic.kr/p/jXxfeF

#content { width: 90%;}

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;}

https://flic.kr/p/ca1kU

https://flic.kr/p/cfQwL7

Design Process

https://flic.kr/p/bSHvgv

https://flic.kr/p/35Ahx

Design Develop

Design

Develop

https://flic.kr/p/rZVTg

“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

Content

https://flic.kr/p/4qc5EB

http://teamtreehouse.com

http://teamtreehouse.com

http://teamtreehouse.com

http://teamtreehouse.com

Small Screen First

https://flic.kr/p/abN4Q4

Wireframes

http://flic.kr/p/cJJdzm

http://foundation.zurb.com/

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

http://www.hotgloo.com/

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

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%; }

https://flic.kr/p/8iNCNU

Scale

https://flic.kr/p/dhufQk

Line Length (Measure)

http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg

45-75 Characters

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; }}

Mobile

https://flic.kr/p/d5DEjS

https://flic.kr/p/jRnhnU

https://flic.kr/p/nNu7sP

<a href=”tel:202-123-4567”>202-123-4567</a>

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

https://flic.kr/p/5R51o3

https://flic.kr/p/7NFTF6

Testing

https://flic.kr/p/bPZzeM

http://www.browserstack.com/

Device Labs

https://flic.kr/p/cdVB9h

Clarissa PetersonPeterson/Kandy

clarissapeterson.com@clarissa