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.
Intro to @viewport & other new
Responsive Web Design CSS features
Andreas Bovens | Opera Software | @andreasbovens | #SOTB4
What have we been up to?
Opera for Android
phones & tablets
Opera for
Windows & Mac
Opera Mini for
Java & BlackBerry
Opera Max for Android
http://operasoftware.github.io/upstreamtools/
Four new CSS features to optimize
websites for different devices.
Four new CSS features to optimize
websites for different devices.
@viewport
viewport-percentage lengths
resolution media q...
’00
How did we get here?
’10
’00
fluid layouts
basic html
’10
’00
fluid layouts
fixed layouts
basic html
tables & lots of hacks
’10
’00
fluid layouts
fixed layouts
basic html
tables & lots of hacks
fixed CSS widths
’10
’00
fluid layouts
fixed layouts
liquid / fluid layouts
basic html
tables & lots of hacks
fixed CSS widths
%, em-based CSS ...
’00
fluid layouts
fixed layouts
liquid / fluid layouts
responsive web design
basic html
tables & lots of hacks
fixed CSS w...
responsive web designexample
’00 ’10
on Google Trends
responsive web design
’00 ’10
but interestingly enough, it’s not such a new idea…
on Google Trends
responsive web design
Karl Gerstner
“Programme entwerfen”
’64
“Gerstner defined a design “programme” as a set of rules for constructing a
range of visual solutions. Connecting his meth...
Karl Gerstner, Programme entwerfen, 2007. Copyright 2007 Lars Müller Publishers — used with kind permission.
FFWD to today
Image from http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ by Addy Osmani ...
media queries + meta viewport
media queries + meta viewport
article, aside {width: 100%;}
@media screen and (min-width: 480px) {
article {float: left; w...
Dealbreaker…
Dealbreaker…
Mobile browsers apply a default
zoom to deal with legacy web
pages…
Dealbreaker…
Mobile browsers apply a default
zoom to deal with legacy web
pages…
Dealbreaker…
Mobile browsers apply a default
zoom to deal with legacy web
pages…
Triggering “wrong” media queries…
to the rescuemeta viewport
<meta name="viewport"
content="width=device-width">
to the rescuemeta viewport
<meta name="viewport"
content="width=device-width">
article, aside {width: 100%;}
@media screen and (min-width: 480px) {
a...
<meta name="viewport"
content="width=device-width">
applied on screens
with width >= 800px
article, aside {width: 100%;}
@...
<meta name="viewport"
content="width=device-width">
applied on screens
with width < 800px
article, aside {width: 100%;}
@m...
<meta name="viewport"
content="width=device-width">
applied on screens
with width < 480px
article, aside {width: 100%;}
@m...
<meta name="viewport"
content="width=device-width">
by setting 1:1 zoom,
media queries are
triggered as intended!
article,...
After it was introduced in Safari, support for
viewport meta also landed in Opera,
Android browser, Firefox, Chrome, etc.
...
nice, but it’s not a real standard…
Safari had a long-time, infamous
scaling bug when changing orientation.
it’snota
realstandard…
Browser makers have to support both
comma & semicolon delimiters as everyone
mixes them up.
;
it’snota
realstandard…
Certain viewport edge cases are handled
differently by each browser.
it’snota
realstandard…
Certain properties are not supported
everywhere:
e.g. user-scalable=yes|no
it’snota
realstandard…
Android browser (& later Opera) added a
target-densitydpi property, which
was later discontinued.
it’snota
realstandard…
Internet Explorer interpretes
width=device-width as
width=320 for compatibility reasons.
it’snota
realstandard…
Safari on iPad applies a 1.333× zoom in
landscape mode even although
width=device-width is set.
it’snota
realstandard…
width=device-width, initial-scale=1
forces a 1× zoom. Say what?
it’snota
realstandard…Safari on iPad applies a 1.333× zoom...
And when we thought things were
stable, Safari introduced a new,
minimal-ui property.
it’snota
realstandard…
You get the idea…
it’snota
realstandard…
So, we thought (in 2011):
Why not make a CSS spec for this?
Yes,
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Upcoming SlideShare
Loading in …5
×

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

19,617 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
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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,

×