1. Frédéric Harper
Developer 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
• Thinking of the user’s needs instead of ours.
• Adapt to various device capabilities instead of
configurations.
• Help future-proof our sites.

10. The way to go

11. Elements of Responsive Web Design

12. Elements of Responsive Web Design
• A flexible, grid-based layout,

13. Elements of Responsive Web Design
• A flexible, grid-based layout,
• Flexible images and media,

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

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

16. Flexible, Grid-based
Layout

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

18. Pixels to Ems Algorithm

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

21. And the Grid?

22. Flexible Images and
Media

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

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

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 Devices?
• viewport meta tag
• <meta name=“viewport” content=“width=device-
width”>
• device-width vs. width
• maximum-zoom

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

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

45. Hey, what was that 4th thing?

46. Hey, what was that 4th thing?
Design

47. Hey, what was that 4th thing?
Design
• Do we start with mobile-first?

48. Hey, what was that 4th thing?
Design
• Do we start with mobile-first?
• Is it best that all sites are responsive?

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

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

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

53. Free t-shirts to first 50 people
Paul Laberge
2:15 tomorrow
Like a boss: crushing it
with the new Web
standards

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