There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.

1. the secret sauce:
responsive web design
Frédéric Harper
@fharper
http://outofcomfortzone.net
Chief of Awesome @ Unicorn Inc.
MSDEVMTL – 2016-01-25
CreativeCommons:https://flic.kr/p/kbFvBQ

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@oocz.net
@fharper
http://outofcomfortzone.net