Intro to @viewport & other new Responsive Web Design CSS features

17,706 views
17,622 views

Published on

From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.

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

No Downloads
Views
Total views
17,706
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
28
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Intro to @viewport & other new Responsive Web Design CSS features

  1. 1. Intro to @viewport & other new Responsive Web Design CSS features Andreas Bovens | Opera Software | @andreasbovens | #SOTB4
  2. 2. What have we been up to?
  3. 3. Opera for Android phones & tablets
  4. 4. Opera for Windows & Mac
  5. 5. Opera Mini for Java & BlackBerry
  6. 6. Opera Max for Android
  7. 7. http://operasoftware.github.io/upstreamtools/
  8. 8. Four new CSS features to optimize websites for different devices.
  9. 9. Four new CSS features to optimize websites for different devices. @viewport viewport-percentage lengths resolution media queries object-fit & object-position CSS image values
  10. 10. ’00 How did we get here? ’10
  11. 11. ’00 fluid layouts basic html ’10
  12. 12. ’00 fluid layouts fixed layouts basic html tables & lots of hacks ’10
  13. 13. ’00 fluid layouts fixed layouts basic html tables & lots of hacks fixed CSS widths ’10
  14. 14. ’00 fluid layouts fixed layouts liquid / fluid layouts basic html tables & lots of hacks fixed CSS widths %, em-based CSS widths, 
 max/min-widths ’10
  15. 15. ’00 fluid layouts fixed layouts liquid / fluid layouts responsive web design basic html tables & lots of hacks fixed CSS widths %, em-based CSS widths, 
 max/min-widths %, em-based CSS widths, 
 max/min-widths, media queries and more ’10
  16. 16. responsive web designexample
  17. 17. ’00 ’10 on Google Trends responsive web design
  18. 18. ’00 ’10 but interestingly enough, it’s not such a new idea… on Google Trends responsive web design
  19. 19. Karl Gerstner “Programme entwerfen” ’64
  20. 20. “Gerstner defined a design “programme” as a set of rules for constructing a range of visual solutions. Connecting his methodology with the new field of computer programming, Gerstner presented examples of computer- generated patterns that were made by mathematically describing visual elements and combining them according to simple rules.” ! — Ellen Lupton, Thinking with Type (2nd edition), 2010, Princeton Architectural Press, p165
  21. 21. Karl Gerstner, Programme entwerfen, 2007. Copyright 2007 Lars Müller Publishers — used with kind permission.
  22. 22. FFWD to today Image from http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ by Addy Osmani for HTML5 Rocks. CC-BY 3.0.
  23. 23. media queries + meta viewport
  24. 24. media queries + meta viewport article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} }
  25. 25. Dealbreaker…
  26. 26. Dealbreaker… Mobile browsers apply a default zoom to deal with legacy web pages…
  27. 27. Dealbreaker… Mobile browsers apply a default zoom to deal with legacy web pages…
  28. 28. Dealbreaker… Mobile browsers apply a default zoom to deal with legacy web pages… Triggering “wrong” media queries…
  29. 29. to the rescuemeta viewport
  30. 30. <meta name="viewport" content="width=device-width"> to the rescuemeta viewport
  31. 31. <meta name="viewport" content="width=device-width"> article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  32. 32. <meta name="viewport" content="width=device-width"> applied on screens with width >= 800px article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  33. 33. <meta name="viewport" content="width=device-width"> applied on screens with width < 800px article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  34. 34. <meta name="viewport" content="width=device-width"> applied on screens with width < 480px article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  35. 35. <meta name="viewport" content="width=device-width"> by setting 1:1 zoom, media queries are triggered as intended! article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  36. 36. After it was introduced in Safari, support for viewport meta also landed in Opera, Android browser, Firefox, Chrome, etc. meta viewport
  37. 37. nice, but it’s not a real standard…
  38. 38. Safari had a long-time, infamous scaling bug when changing orientation. it’snota realstandard…
  39. 39. Browser makers have to support both comma & semicolon delimiters as everyone mixes them up. ; it’snota realstandard…
  40. 40. Certain viewport edge cases are handled differently by each browser. it’snota realstandard…
  41. 41. Certain properties are not supported everywhere: e.g. user-scalable=yes|no it’snota realstandard…
  42. 42. Android browser (& later Opera) added a target-densitydpi property, which was later discontinued. it’snota realstandard…
  43. 43. Internet Explorer interpretes width=device-width as width=320 for compatibility reasons. it’snota realstandard…
  44. 44. Safari on iPad applies a 1.333× zoom in landscape mode even although width=device-width is set. it’snota realstandard…
  45. 45. width=device-width, initial-scale=1 forces a 1× zoom. Say what? it’snota realstandard…Safari on iPad applies a 1.333× zoom in landscape mode even although width=device-width is set.
  46. 46. And when we thought things were stable, Safari introduced a new, minimal-ui property. it’snota realstandard…
  47. 47. You get the idea… it’snota realstandard…
  48. 48. So, we thought (in 2011): Why not make a CSS spec for this?
  49. 49. Yes,

×