There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

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