the secret sauce: responsive web design

Frédéric Harper

@fharper

http://outofcomfortzone.net

Chief of Awesome @ Unicorn Inc.

MSDEVMTL – 2016-01-25

Crea

tive

Com

mon

s: h

ttps

://f

lic.k

r/p/

kbFv

BQ

in a galaxy

not so far away

Creative Commons: https://flic.kr/p/M3s78

Creative Commons: https://flic.kr/p/dwqgAh

Creative Commons: https://flic.kr/p/84tg1p

anti-patterns

Creative Commons: http://xkcd.com/773/

responsive web

design

ü  Thinking of the user’s needs instead of ours.

ü  Adapt to various device capabilities instead of configurations.

ü  Help future-proof our sites.

responsive web design

Creative Commons: https://flic.kr/p/84tg1p

that’s the way

1.  A flexible, grid-based layout,

2.  Flexible images and media,

3.  Media queries.

the secret sauce

flexible grid-based

layout

§  Non-responsive sites are no fun.

§  Fixed-width sites are not the best experiences.

§  Not thinking about new web platforms.

what’s the problem?

pixels to ems algorithm

pixels to ems algorithm

target context result

* you can use rem – context will be root

h1 { font-size: 24px;}

24 / 16 = 1.5h1 { font-size: 1.5em;}

h1 a { font-size: 11px;}

11 / 24 = 0.45833333+h1 a { font-size: 0.458+;}

ResponsiveWebDesignREADMORE>>

em

%

target context result

what about the grid? #p

age

.main .other.blog

body

#page { width: 960px;}

.blog { width: 900px;}

.blog .main { width: 566px;}

.blog .other { width: 331px;}

#page { width: 960/1024;}

.blog { width: 900/960;}

.blog .main { width: 566/900;}

.blog .other { width: 331/900;}

#page { width: 93.75%;}

.blog { /* 900/960 */ width: 93.75%;}

.blog .main { width: 62.88+%;}

.blog .other { width: 36.77+%;}

flexible images

& media

/* Works on other media like <video> */img { max-width: 100%;}

simple solution

<picture> <source media="(min-width: 40em)” srcset="big-hd.jpg"> <source srcset="small-hd.jpg"> <img src="fallback.jpg" alt=”The image"></picture>

picture element

media queries

§  We could define media types: screen and print.

§  But not easily respond to the user’s display.

§  Lots of grunt work.

§  Didn’t spend much time thinking about mobile devices.

not so long ago…

The CSS3 Media Queries Module specifies methods to enable web developers to scope a style

sheet to a set of precise device capabilities.

css media queries

@media screen and (max-width: 600px) {

body {

font-size: 80%;

}

}

that simple

@media screen and (min-width:320px) and (max-width:480px) { /* add your code here */ }

@media not print and (max-width:600px) { /* add your code here */ }

@media screen (x) and (y), print (a) and (b) { /* add your code here */ }

let’s get funky

@import url(mq.css) only screen and (max-width:600px)

<link rel=“stylesheet”media=“only screen and (max-width:800px)” href=“mq.css”>

want more?

§  min-width

§  max-width

§  min-height

§  max-height

§  device-width

§  device-height

§  orientation

§  aspect-ratio

§  device-aspect-ratio

§  color

§  color-index

§  monochrome

§  resolution

§  scan

§  grid

media properties

Creative Commons: https://flic.kr/p/84tg1p

little pea

bakery

old browsers

be creative

Copyright: http://j.mp/1pA8tpJ

Creative Commons: https://flic.kr/p/84tg1p

disco mode

resources

http://www.alistapart.com/articles/responsive-web-design/

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

http://stunningcss3.com/code/bakery/

http://www.lukew.com/ff/entry.asp?1514

http://mediaqueri.es/

http://getbootstrap.com/

http://www.abookapart.com/products/responsive-web-design

www

be responsible

be responsible responsive

§  Is it best that all sites are responsive?

§  Do we start with mobile-first?

§  Do we go Adaptive Web Design instead?

§  Do we need or want to do visual comps for every device?

§  Don’t dismiss mobile as walking and looking something up.

in the end

Frédéric Harper

fharper@oocz.net

@fharper

http://outofcomfortzone.net