1) The document discusses responsive web design, which involves making websites flexible and adaptable to different devices through flexible grids, images, and media queries. 2) Key aspects of responsive design include thinking of user needs rather than our own, adapting to various device capabilities, and future-proofing sites. 3) Media queries allow scoping styles to specific device capabilities like width, height, and orientation. Common patterns like fluid, column drop, and layout shifter are described.

1. Responsive Web Design
JavaScript Open Day
get the best of your designs
2015-06-25
Frédéric Harper
@fharper | outofcomfortzone.net
CreativeCommons:https://flic.kr/p/5azfgH

2. In a
not so far away
galaxy

3. Creative Commons: http://j.mp/TJsDTi

4. Creative Commons: http://j.mp/1gP4X4K

5. MIT: http://j.mp/1kKuced
Anti-
patterns

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

7. Responsive
Design
Web

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

10. MIT: http://j.mp/1kKuced
That’s
the
way

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

12. Flexible
Layout
Grid-based

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

14. pixels to ems algorithm

15. pixels to ems algorithm
target
context
result

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
& Media
Images

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

21. this man is our savior

22. Media
Queries

23. not so long ago…
§ 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.

24. CSS Media Queries
The CSS3 Media Queries Module specifies methods to enable web
developers to scope a style sheet to a set of precise device
capabilities.

25. media queries at work
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}

26. let’s get funky
@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 */ }

27. want more?
@import url(mq.css) only screen
and (max-width:600px)
<link rel=“stylesheet”
media=“only screen and (max-width:800px)”
href=“mq.css”>

28. media properties
• min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

29. MIT: http://j.mp/1kKuced
Little
Pea
Bakery

30. old browsers

31. Common
Patterns

33. mostly fluid
Copyright: http://j.mp/1pA8tpJ

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

35. layout shifter
Copyright: http://j.mp/1pA8tpJ

36. tiny tweaks
Copyright: http://j.mp/1pA8tpJ

38. Resources

41. www
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

42. Be
responsible

43. Be
responsive
responsible

44. in the end
§ 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.

45. Frédéric Harper
fharper@oocz.net
@fharper
http://outofcomfortzone.net