0
Frédéric HarperDeveloper Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net
Sorry…
How we viewed the web…• The Desktop Browser
How we view the web today…• The Desktop Browser• Mobile Browsers• Tablet form-factors• Televisions• Game Consoles• More…
How we view the web today…• The Desktop Browser• Mobile Browsers• Tablet form-factors• Televisions• Game Consoles• More…• ...
The Anti-Pattern
Responsive WebDesigns
Responsive Web Design• Thinking of the user’s needs instead of ours.• Adapt to various device capabilities instead of  con...
The way to go
Elements of Responsive Web Design
Elements of Responsive Web Design• A flexible, grid-based layout,
Elements of Responsive Web Design• A flexible, grid-based layout,• Flexible images and media,
Elements of Responsive Web Design• A flexible, grid-based layout,• Flexible images and media,• Media queries.
Elements of Responsive Web Design•   A flexible, grid-based layout,•   Flexible images and media,•   Media queries.•   Som...
Flexible, Grid-basedLayout
Ok, so what’s the problem?•   Non-responsive sites are no fun.•   Fixed-width sites are not the best experiences.•   Desig...
Pixels to Ems Algorithm
Responsive Web Design READ MORE >>     h1 {                                         h1 {em     font-size: 24px;       24 /...
And the Grid?
Flexible Images andMedia
A Simple Solution img {    max-width: 100%; }Works on images, as well as other media like <video>.
Another Possibility  Filament Group – depends on cookies    and JavaScript
Media Queries
Not so long ago…•   We could define media types: screen and print.•   But not easily respond to the user’s display.•   Lot...
CSS3 Media Queries• The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a s...
Simple Example@media screen and (max-width: 600px) {   body {      font-size: 80%;   }}
Other Queries@media screen and (min-width:320px) and (max-width:480px)@media not print and (max-width:600px)@media screen ...
Can be declared…In the StylesheetImport Rule   @import url(mq.css) only screen and (max-   width:600px)link Element   <lin...
Supported Media Properties•   min/max-width    •   device-aspect-ratio•   min/max-height   •   color•   device-width     •...
Supported Media Properties•   min/max-width    •   device-aspect-ratio•   min/max-height   •   color•   device-width     •...
Little Pea Bakery
What About Devices?• viewport meta tag  • <meta name=“viewport” content=“width=device-    width”>• device-width vs. width•...
What about non-supportive browsers?• css3-mediaqueries-js by Wouter van der Graaf• Just include the script in your pages• ...
Resources• http://www.alistapart.com/articles/responsive-web-design/• http://www.lukew.com/ff/entry.asp?1514• http://filam...
Hey, what was that 4th thing?
Hey, what was that 4th thing?Design
Hey, what was that 4th thing?Design• Do we start with mobile-first?
Hey, what was that 4th thing?Design• Do we start with mobile-first?• Is it best that all sites are responsive?
Hey, what was that 4th thing?Design• Do we start with mobile-first?• Is it best that all sites are responsive?• Do we need...
Hey, what was that 4th thing?Design• Do we start with mobile-first?• Is it best that all sites are responsive?• Do we need...
Hey, what was that 4th thing?Design• Do we start with mobile-first?• Is it best that all sites are responsive?• Do we need...
Hey, what was that 4th thing?Design• Do we start with mobile-first?• Is it best that all sites are responsive?• Do we need...
Free t-shirts to first 50 people                           Paul Laberge                           2:15 tomorrow           ...
Questions?Frédéric HarperDeveloper Evangelist @ Microsoftfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfort...
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
Upcoming SlideShare
Loading in...5
×

FITC - 2012-04-23 - Responsive Web Design

1,716

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,716
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • http://www.lukew.com/ff/entry.asp?1514
  • Transcript of "FITC - 2012-04-23 - Responsive Web Design"

    1. 1. Frédéric HarperDeveloper 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• 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-basedLayout
    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 andMedia
    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 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 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 HarperDeveloper Evangelist @ Microsoftfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×