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
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
2014-06-12

2. public class Main {
public static void main(String[] args) {
System.out.print(”I don’t speak Java!");
}
}

3. In a
not so far way
galaxy

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

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

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

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

8. Responsive
Design
Web

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

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

12. RWD Secret sauce
1. A flexible, grid-based layout,
2. Flexible images and media,
3. Media queries.

13. Flexible
Layout
Grid-based

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

15. Pixels to Ems Algorithm

16. Pixels to Ems Algorithm
target
context
result

17. 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: 0.45833333+;
}
Responsive
Web
Design
READ
MORE
>>
em
%
target
context
result

18. What about the grid?
#page
.main
.other
.blog
body

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

20. Flexible
& Media
Images

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

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. CSS3 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. Simple Example
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}

26. Other queries
@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. Can be declared…
@import url(mq.css) only screen
and (max-width:600px)
<link rel=“stylesheet”
media=“only screen and (max-width:800px)”
href=“mq.css”>

28. Supported Media Properties
• min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution

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

30. What about old browsers?

31. The picture element
<picture>
<source media="(min-width: 40em)"
srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>

33. Common
Patterns

35. Mostly fluid
Copyright: http://j.mp/1pA8tpJ

36. Column drop
Copyright: http://j.mp/1pA8tpJ

37. Layout shifter
Copyright: http://j.mp/1pA8tpJ

38. Tiny tweaks
Copyright: http://j.mp/1pA8tpJ

40. Ressources

44. Resources
• http://www.alistapart.com/articles/responsive-web-design/
• http://scottjehl.github.io/picturefill/
• 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
• http://responsiveimages.org/

45. Be
responsive
responsible

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

47. Having a web app
or game?
Please let me know!

48. Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net