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.

1. Intro to @viewport & other new
Responsive Web Design CSS features
Andreas Bovens | Opera Software | @andreasbovens | #SOTB4

2. What have we been up to?

3. Opera for Android
phones & tablets

4. Opera for
Windows & Mac

5. Opera Mini for
Java & BlackBerry

7. Opera Max for Android

9. http://operasoftware.github.io/upstreamtools/

10. Four new CSS features to optimize
websites for different devices.

11. Four new CSS features to optimize
websites for different devices.
@viewport
viewport-percentage lengths
resolution media queries
object-fit & object-position
CSS image values

12. ’00
How did we get here?
’10

13. ’00
fluid layouts
basic html
’10

14. ’00
fluid layouts
fixed layouts
basic html
tables & lots of hacks
’10

15. ’00
fluid layouts
fixed layouts
basic html
tables & lots of hacks
fixed CSS widths
’10

16. ’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

17. ’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

18. responsive web designexample

19. ’00 ’10
on Google Trends
responsive web design

20. ’00 ’10
but interestingly enough, it’s not such a new idea…
on Google Trends
responsive web design

21. Karl Gerstner
“Programme entwerfen”
’64

22. “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

23. Karl Gerstner, Programme entwerfen, 2007. Copyright 2007 Lars Müller Publishers — used with kind permission.

24. 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.

25. media queries + meta viewport

26. 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;}
}

27. Dealbreaker…

28. Dealbreaker…
Mobile browsers apply a default
zoom to deal with legacy web
pages…

29. Dealbreaker…
Mobile browsers apply a default
zoom to deal with legacy web
pages…

30. Dealbreaker…
Mobile browsers apply a default
zoom to deal with legacy web
pages…
Triggering “wrong” media queries…

31. to the rescuemeta viewport

32. <meta name="viewport"
content="width=device-width">
to the rescuemeta viewport

33. <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 +

34. <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 +

35. <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 +

36. <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 +

37. <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 +

38. After it was introduced in Safari, support for
viewport meta also landed in Opera,
Android browser, Firefox, Chrome, etc.
meta viewport

39. nice, but it’s not a real standard…

40. Safari had a long-time, infamous
scaling bug when changing orientation.
it’snota
realstandard…

41. Browser makers have to support both
comma & semicolon delimiters as everyone
mixes them up.
;
it’snota
realstandard…

42. Certain viewport edge cases are handled
differently by each browser.
it’snota
realstandard…

43. Certain properties are not supported
everywhere:
e.g. user-scalable=yes|no
it’snota
realstandard…

44. Android browser (& later Opera) added a
target-densitydpi property, which
was later discontinued.
it’snota
realstandard…

45. Internet Explorer interpretes
width=device-width as
width=320 for compatibility reasons.
it’snota
realstandard…

46. Safari on iPad applies a 1.333× zoom in
landscape mode even although
width=device-width is set.
it’snota
realstandard…

47. 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.

48. And when we thought things were
stable, Safari introduced a new,
minimal-ui property.
it’snota
realstandard…

49. You get the idea…
it’snota
realstandard…

50. So, we thought (in 2011):
Why not make a CSS spec for this?

51. Yes,

52. CSS,

53. because

54. it’s

55. layout!
So, we thought (in 2011):
Why not make a CSS spec for this?

56. CSS Device Adaptation / @viewport
Yes,

57. CSS,

58. because

59. it’s

60. layout!
So, we thought (in 2011):
Why not make a CSS spec for this?
http://dev.w3.org/csswg/css-device-adapt/

61. meta name=viewport content=width=device-width
@viewport {
width: auto;
}
Corresponds to

62. meta name=viewport
content=width=device-width, initial-scale=2
@viewport {
width: auto;
zoom: 2.0;
}
Corresponds to

63. meta name=viewport
content=width=device-width, user-scalable=no
@viewport {
width: auto;
user-zoom: fixed;
}
Corresponds to

64. meta name=viewport
content=width=device-width, user-scalable=yes
@viewport {
width: auto;
user-zoom: zoom;
}
Corresponds to

65. for widths up to 400px:
meta name=viewport content=width=400
for widths larger than 400px:
meta name=viewport content=width=device-width
Corresponds to
@viewport {
width: 400px auto;
}

66. meta name=viewport content=width=device-width
and page orientation is locked to landscape.
@viewport {
width: auto;
orientation: landscape;
}
Corresponds to

67. To try it out, turn on “experimental
web platform features” in
opera:flags or chrome:flags.

68. resolution media queries

69. https://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

70. What’s in a (CSS) pixel?

71. 1 device px
What’s in a (CSS) pixel?
Macbook Aire.g.

72. 1 device px 2,25 device px
What’s in a (CSS) pixel?
Macbook Aire.g. HTC Desire

73. 1 device px 2,25 device px 4 device px
What’s in a (CSS) pixel?
Macbook Aire.g. HTC Desire iPhone 4

74. 1 device px 2,25 device px 4 device px 9 device px
What’s in a (CSS) pixel?
Macbook Aire.g. HTC Desire iPhone 4 HTC One

75. 1 device px 2,25 device px 4 device px 9 device px
What’s in a (CSS) pixel?
this makes graphics look blurry…
(unless you serve oversized ones that are scaled down)

76. 1 device px 2,25 device px 4 device px 9 device px
this makes graphics look blurry…
(responsive image spec)
hence:

77. 1 device px 2,25 device px 4 device px 9 device px
this makes graphics look blurry…
resolution media queries
hence:
(responsive image spec)

78. 1 device px 2,25 device px 4 device px 9 device px
1 dppx 1,5 dppx 2 dppx 3 dppx
What’s in a (CSS) pixel?
(can) use dots per ‘px’ unitsresolution media queries

79. body {background: url(bg.png) 0 0 repeat;}
@media (screen and min-resolution: 2dppx) {
body {background-size: 50% !important;}
}
@media (screen and min-resolution: 3dppx) {
body {background-size: 33.3% !important;}
}
resolution media queries

80. body {background: url(bg.png) 0 0 repeat;}
@media (screen and min-resolution: 2dppx) {
body {background-size: 50% !important;}
}
@media (screen and min-resolution: 3dppx) {
body {background-size: 33.3% !important;}
}
resolution media queries
Pattern from http://subtlepatterns.com/tree-bark/ by Getdiscount. CC-BY-SA 2.0.

81. body {background: url(bg.png) 0 0 repeat;}
@media (screen and min-resolution: 2dppx) {
body {background-size: 50% !important;}
}
@media (screen and min-resolution: 3dppx) {
body {background-size: 33.3% !important;}
}
resolution media queries

82. body {background: url(bg.png) 0 0 repeat;}
@media (screen and min-resolution: 2dppx) {
body {background-size: 50% !important;}
}
@media (screen and min-resolution: 3dppx) {
body {background-size: 33.3% !important;}
}
resolution media queries

83. resolution media queries
Very useful to optimize background
graphics and other resources for hi-dpi
screens.

84. If this looks familiar…
It’s very similar to device-pixel-ratio,
but resolution is standardized, and
comes without quirky vendor prefixes.
!
However, for now, use both…

85. http://www.w3.org/TR/css3-values/#resolutionhttp://www.w3.org/TR/css3-mediaqueries/#resolution

86. object-fit object-position CSS image values

87. Photo from https://secure.flickr.com/photos/61508583@N02/10873650644/ by Butz.2013. CC-BY 2.0.

88. eh…

89. img {
object-fit: fill;
}

90. img {
object-fit: contain;
}

91. img {
object-fit: cover;
overflow: hidden;
}

92. img {
object-fit: cover;
overflow: hidden;
object-position: 20% 50%;
}

93. img {
object-fit: cover;
overflow: hidden;
object-position: 60% 50%;
}

94. Very useful to make small adjustments to images.

95. Note: there is some overlap here with responsive
image use cases. Best practices need to emerge.

96. http://dev.w3.org/csswg/css-images-3/#the-object-fit

97. viewport-percentage lengths

98. 100 × 100

99. 100 × 100

100. 100 × 100
1vw = 1/100 of viewport width
1vh = 1/100 of viewport height

101. 100 × 100
1vw = 1/100 of viewport width
1vh = 1/100 of viewport height
1vmax = 1/100 of whichever is bigger
1vmin = 1/100 of whichever is smaller

102. 100 × 100
vw, vh, vmax, vmin
can be used with font-size, width,
height, etc. to create designs that
work with small viewports, not
fight against them.

103. demo

104. http://www.w3.org/TR/css3-values/#viewport-relative-lengths

105. Four new CSS features to optimize
websites for different devices.
@viewport
viewport-percentage lengths
resolution media queries
object-fit object-position
CSS image values

106. Thank you!
Any questions? :-)
Andreas Bovens | Opera Software | @andreasbovens | #SOTB4