ux & responsive design

UX & Responsive Design@clarissa

https://flic.kr/p/ohrJBb

2002

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

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

http://mobitest.akamai.com

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

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

Blocking CSS & JavaScript

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

-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

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

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

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

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

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