The document discusses the principles and techniques of responsive web design, emphasizing its importance for accommodating various devices and users' needs. Key elements include flexible grid layouts, responsive images and media, and the use of CSS3 media queries to adapt styles based on device capabilities. The author also addresses challenges associated with non-responsive sites and provides resources for further reading on the topic.

1. Responsive Web Design
Frédéric Harper
Senior Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
2013-09-18

3. How we view the web today…
• The Desktop Browser
• Mobile Browsers
• Tablet form-factors
• Televisions
• Game Consoles
• More…
• So what’s the problem?

4. The Anti-Pattern

5. Responsive Web
Designs

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

8. The way to go

9. Elements of Responsive Web Design
• A flexible, grid-based layout,
• Flexible images and media,
• Media queries.
• Something else.

10. Flexible, Grid-based
Layout

11. Ok, so what’s the problem?
• Non-responsive sites are no fun.
• Fixed-width sites are not the best experiences.
• Design tools tend to use pixels.
• Sometimes a pixel does not equal a pixel.
• So how do we turn pixels to their em counterparts?

12. Pixels to Ems Algorithm

14. h1 {
font-size: 24px;
}
24 / 16 = 1.5
h1 {
font-size: 1.5em;
}
h1 a {
font-size: 11px;
}
11 / 24 =
0.458333333+
h1 a {
font: 0.458333333+;
}
32
Responsive Web Design READ MORE >>
1
em
%

15. And the Grid?

16. Flexible Images and
Media

17. ASimple Solution
Works on images, as well as other media like <video>.
img {
max-width: 100%;
}

18. Another Possibility
Filament Group –
depends on cookies
and JavaScript

19. Responsive images

20. Picture element, draft proposed
<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>

21. srcset, draft proposed
<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x,
small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">

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)
@media not print and (max-width:600px)
@media screen (x) and (y), print (a) and (b)

27. Can be declared…
In the Stylesheet
Import Rule
@import url(mq.css) only screen and (max-
width:600px)
link Element
<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. Supported Media Properties
• min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution

30. Little Pea Bakery

31. What about non-supportive browsers?
css3-mediaqueries-js by Wouter van der Graaf
Just include the script in your pages
Parses the CSS and applies style for positive media
tests

33. Mostly Fluid

34. Column Drop

35. Layout Shifter

36. Tiny Tweaks

37. Off Canvas

47. Resources
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.lukew.com/ff/entry.asp?1514
• http://filamentgroup.com/examples/responsive-images/
• http://code.google.com/p/css3-mediaqueries-js/
• http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
• http://www.stunningcss3.com/index.php
• http://www.abookapart.com/products/responsive-web-design
• http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-
strategies/
• http://mediaqueri.es/
• http://www.w3.org/TR/css3-mediaqueries/
• http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html

48. Hey, what was that 4th thing?
Design
• Dowestartwithmobile-first?
• Isitbestthatallsitesareresponsive?
• Doweneedorwanttodovisualcompsforeverydevice?
• Don’tdismissmobileaswalkingandlookingsomethingup.
• Weareatthebeginning,that’swhatmakesthisinteresting!

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