1. Frédéric Harper
Technical Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net

2. Sorry…

3. How we viewed the web…
• The Desktop Browser

4. How we view the web today…
• The Desktop Browser
• Mobile Browsers
• Tablet form-factors
• Televisions
• Game Consoles
• More…

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

6. The Anti-Pattern

7. Responsive Web
Designs

9. Responsive Web Design

10. Responsive Web Design
• Thinking of the user’s needs instead of ours.

11. Responsive Web Design
• Thinking of the user’s needs instead of ours.
• Adapt to various device capabilities instead of
configurations.

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

13. The way to go

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

15. Flexible, Grid-based
Layout

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

17. Pixels to Ems Algorithm

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

20. And the Grid?

21. Flexible Images and
Media

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

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

24. Picture element, draft proposed
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg
1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg
1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>

25. Media Queries

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

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

28. Simple Example
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}

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

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

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

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

33. Little Pea Bakery

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

36. Mostly Fluid

37. Column Drop

38. Layout Shifter

39. Tiny Tweaks

40. Off Canvas

50. Resources
• http://www.alistapart.com/articles/responsive-web-design/
• http://quirktools.com/screenfly/
• 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

51. Hey, what was that 4th thing?
Design
• Do we start with mobile-first?
• Is it best that all sites are responsive?
• Do we need or want to do visual comps for every device?
• Don’t dismiss mobile as walking and looking something up.
• We are at the beginning, that’s what makes this interesting!

52. Questions?
Frédéric Harper
fredh@microsoft.com
@fharper
http://webnotwar.ca
http://outofcomfortzone.net