Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design

  • Login to see the comments

  • Be the first to like this

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design

  1. 1. Frédéric HarperTechnical 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 WebDesigns
  8. 8. Responsive Web Design
  9. 9. Responsive Web Design• Thinking of the user’s needs instead of ours.
  10. 10. Responsive Web Design• Thinking of the user’s needs instead of ours.• Adapt to various device capabilities instead of configurations.
  11. 11. 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.
  12. 12. The way to go
  13. 13. Elements of Responsive Web Design• A flexible, grid-based layout,• Flexible images and media,• Media queries.• Something else.
  14. 14. Flexible, Grid-basedLayout
  15. 15. 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?
  16. 16. Pixels to Ems Algorithm
  17. 17. 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
  18. 18. And the Grid?
  19. 19. Flexible Images andMedia
  20. 20. A Simple Solution img { max-width: 100%; }Works on images, as well as other media like <video>.
  21. 21. Another Possibility Filament Group – depends on cookies and JavaScript
  22. 22. Picture element, draft proposed<picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg1x, 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>
  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 QueriesThe CSS3 Media Queries Module specifies methodsto enable web developers to scope a style sheet to aset 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 StylesheetImport 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 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. 33. Mostly Fluid
  34. 34. Column Drop
  35. 35. Layout Shifter
  36. 36. Tiny Tweaks
  37. 37. Off Canvas
  38. 38. 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
  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?• Don’t dismiss mobile as walking and looking something up.• We are at the beginning, that’s what makes this interesting!
  40. 40. Questions?Frédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net

×