The document discusses responsive web design, emphasizing the importance of adapting to user needs and various device capabilities through techniques like flexible grid layouts, responsive images, and media queries. It highlights the shift from fixed-width layouts to more flexible designs that enhance user experience across multiple platforms. Additionally, it poses questions about the approach to responsive design, including mobile-first strategies and the necessity of visual comps for different devices.

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

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

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

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

12. flexible
grid-based
layout

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

14. pixels to ems algorithm

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

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

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

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

19. flexible
images
& media

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

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

24. media
queries

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

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

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

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

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

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

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

32. old browsers

33. be
creative

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

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

37. resources

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

41. be
responsible

42. be
responsible
responsive

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

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