Successfully reported this slideshow.
Your SlideShare is downloading. ×

FITC - 2012-04-23 - Responsive Web Design

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 54 Ad

More Related Content

Slideshows for you (20)

Similar to FITC - 2012-04-23 - Responsive Web Design (20)

Advertisement

More from Frédéric Harper (20)

Recently uploaded (20)

Advertisement

FITC - 2012-04-23 - Responsive Web Design

  1. 1. Frédéric Harper Developer Evangelist @ Microsoft Canada @fharper | outofcomfortzone.net
  2. 2. Sorry…
  3. 3. How we viewed the web… • The Desktop Browser
  4. 4. How we view the web today… • The Desktop Browser • Mobile Browsers • Tablet form-factors • Televisions • Game Consoles • More…
  5. 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. 6. The Anti-Pattern
  7. 7. Responsive Web Designs
  8. 8. 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.
  9. 9. The way to go
  10. 10. Elements of Responsive Web Design
  11. 11. Elements of Responsive Web Design • A flexible, grid-based layout,
  12. 12. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media,
  13. 13. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media, • Media queries.
  14. 14. Elements of Responsive Web Design • A flexible, grid-based layout, • Flexible images and media, • Media queries. • Something else.
  15. 15. Flexible, Grid-based Layout
  16. 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. 17. Pixels to Ems Algorithm
  18. 18. 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
  19. 19. And the Grid?
  20. 20. Flexible Images and Media
  21. 21. A Simple Solution img { max-width: 100%; } Works on images, as well as other media like <video>.
  22. 22. Another Possibility Filament Group – depends on cookies and JavaScript
  23. 23. Media Queries
  24. 24. 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.
  25. 25. 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.
  26. 26. Simple Example @media screen and (max-width: 600px) { body { font-size: 80%; } }
  27. 27. 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)
  28. 28. 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”>
  29. 29. Supported Media Properties • min/max-width • device-aspect-ratio • min/max-height • color • device-width • color-index • device-height • monochrome • orientation • resolution • aspect-ratio
  30. 30. Supported Media Properties • min/max-width • device-aspect-ratio • min/max-height • color • device-width • color-index • device-height • monochrome • orientation • resolution • aspect-ratio
  31. 31. Little Pea Bakery
  32. 32. What About Devices? • viewport meta tag • <meta name=“viewport” content=“width=device- width”> • device-width vs. width • maximum-zoom
  33. 33. 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
  34. 34. 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/
  35. 35. Hey, what was that 4th thing?
  36. 36. Hey, what was that 4th thing? Design
  37. 37. Hey, what was that 4th thing? Design • Do we start with mobile-first?
  38. 38. Hey, what was that 4th thing? Design • Do we start with mobile-first? • Is it best that all sites are responsive?
  39. 39. 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?
  40. 40. 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.
  41. 41. 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!
  42. 42. 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!
  43. 43. Free t-shirts to first 50 people Paul Laberge 2:15 tomorrow Like a boss: crushing it with the new Web standards
  44. 44. Questions? Frédéric Harper Developer Evangelist @ Microsoft fredh@microsoft.com @fharper http://webnotwar.ca http://outofcomfortzone.net

Editor's Notes

  • http://www.lukew.com/ff/entry.asp?1514

×