1.
the secret sauce:
responsive web design
Frédéric Harper
@fharper
http://immun.io
Sr. Technical Evangelist @ IMMUNIO
JavaScript Open Day Montreal – 2015-11-19
CreativeCommons:https://flic.kr/p/6n9cBB

2.
in a
galaxy
not so far away

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

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

5.
Creative Commons: https://flic.kr/p/84tg1p
anti-
patterns

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

7.
responsive
web
design

8.
ü 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

9.
Creative Commons: https://flic.kr/p/84tg1p
that’s
the
way

10.
1. A flexible, grid-based layout,
2. Flexible images and media,
3. Media queries.
the secret sauce

11.
flexible
grid-based
layout

12.
§ Non-responsive sites are no fun.
§ Fixed-width sites are not the best experiences.
§ Not thinking about new web platforms.
what’s the problem?

13.
pixels to ems algorithm

14.
pixels to ems algorithm
target context result
* you can use rem – context will be root

15.
h1 {
font-size: 24px;
}
24 / 16 = 1.5
h1 {
font-size: 1.5em;
}
h1 a {
font-size: 11px;
}
11 / 24 = 0.45833333+
h1 a {
font-size: 0.458+;
}
Responsive Web Design READ MORE >>
em
%
target context result

16.
what about the grid?
#page
.main .other
.blog
body

17.
#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+%;
}

18.
flexible
images
& media

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

20.
<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

21.
media
queries

22.
§ 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…

23.
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

24.
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
that simple

25.
@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

26.
@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?

27.
§ 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

28.
Creative Commons: https://flic.kr/p/84tg1p
little
pea
bakery

29.
old browsers

30.
be
creative

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

32.
Creative Commons: https://flic.kr/p/84tg1p
disco
mode

33.
resources

34.
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

35.
be
responsible

36.
be
responsible
responsive

37.
§ 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

38.
Frédéric Harper
fharper@immun.io
@fharper
http://outofcomfortzone.net
http://immun.io