The document discusses four new CSS features for responsive web design, including @viewport, viewport-percentage lengths, resolution media queries, and object-fit & object-position. It highlights the evolution of web design methodologies and the importance of adapting CSS to cater for different devices and screen sizes. Additionally, it emphasizes best practices and necessary standards for improved usability across various platforms.

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