The document discusses media queries and responsive web design. It covers topics such as media types, logical operators, media features, viewports, layout strategies, and new CSS layout mechanisms. Throughout the document, B. Rowser engages in a comedic back-and-forth dialogue to help explain and expand on the concepts around responsive design. In the end, the document emphasizes thinking about design principles and systems rather than specific layouts.

1. @media mobilism and (year: 2011)
MEDIA QUERIES
A CLOSER LOOK AT
BY
STEPHEN HAY

3. B. Rowser

4. Hi handsome.

5. @media mood and (min-level: fine)
Fine.

6. @media screen and (min-width: 600px)
Yes.

7. @media all and (orientation: landscape)
What are you,
an idiot?

9. As you wish.

13. MEDIA QUERIES
@media [not|only] type [and] (expr) {
rules;
}
== Feature detection

14. MEDIA TYPES
@media screen { ... }
@media print { ... }
@media handheld { ... }

15. MEDIA TYPES
@media screen { ... }
@media print { ... }
@media handheld { ... }
Let’s add some logic...
@media screen and { ... }

16. MEDIA TYPES
@media screen { ... }
@media print { ... }
@media handheld { ... }
Let’s add some logic...
@media screen and { ... }
and a feature to query
@media screen and (color) { ... }

17. MEDIA TYPES
@media screen { ... }
@media print { ... }
Hey—@media handheld { ... }
tell them some
more about logic,
Let’s add
you bastard. some logic...
@media screen and { ... }
and a feature to query
@media screen and (color) { ... }

18. logical AND
@media screen and (min-width: 600px)
and (max-width: 1200px)
constrains a query

19. logical OR
@media screen and (min-resolution:
300dpi), screen and (-webkit-min-
device-pixel-ratio: 2)
the comma is an OR

20. logical NOT
@media not screen and (color)

21. logical NOT
@media not screen and (color)
be careful...

22. logical NOT
@media not screen and (min-width: 600px)

23. logical NOT
@media not screen and (min-width: 600px)
does not evaluate as:
@media (not screen) and (min-width: 600px)

24. logical NOT
@media not screen and (min-width: 600px)
does not evaluate as:
@media (not screen) and (min-width: 600px)
does evaluate as:
@media (not (screen and (min-width: 600px)))

25. ONLY
@media only all and
(device-aspect-ratio: 16/9)
hides the CSS from
older browsers

26. ONLY
@media only all and
Enough. Enough.
(device-aspect-ratio: 16/9)
What about the
Media Features?
hides the CSS from
older browsers

27. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

28. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

29. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

30. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

31. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

32. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

33. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

34. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

35. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

36. Media Features
likely you’ll use these most:
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

37. Testing

38. Testing
Yes, you are.

39. Prefixed Features

40. Prefixed Features
How many device pixels per CSS pixel?

41. Prefixed Features
How many device pixels per CSS pixel?
-webkit-[min|max]-device-pixel-ratio
[min|max]--moz-device-pixel-ratio
-o-[min|max]-device-pixel-ratio

42. Prefixed Features
How many device pixels per CSS pixel?
-webkit-[min|max]-device-pixel-ratio
[min|max]--moz-device-pixel-ratio
-o-[min|max]-device-pixel-ratio
-webkit-min-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2

43. Prefixed Features
A pixel is not a
pixel.

44. Prefixed Features
Is this a touch device?
-moz-touch-enabled

45. Prefixed Features
Is this a touch device?
-moz-touch-enabled
@media screen and (-moz-touch-enabled) {
/* touchy styles */
}

46. Viewport
@media screen and (max-device-width: 320px)

47. Viewport
@media screen and (max-device-width: 320px)
device-width
layout viewport

48. Viewport
@media screen and (max-device-width: 320px)
Meta viewport.

49. Meta viewport
<meta name="viewport"
content="width=device-width">

50. Meta viewport
<meta name="viewport"
content="width=device-width">
use that in combination with WIDTH
@media screen and (max-width: 320px) {
div {
width: 80%;
}
}

51. Meta viewport
<meta name="viewport"
content="width=device-width,
initial-scale=1">
use that in combination with WIDTH
@media screen and (max-width: 320px) {
div {
width: 80%;
}
}

52. viewport in CSS?
@viewport {
width: device-width;
zoom: 1; /* No, not THAT zoom */
}

53. viewport in CSS?
Enough already.
@viewport {
How zoom: 1; /* No, not THAT
can we apply
width: device-width;
zoom */
these things?
}

54. Applying media queries

55. Applying media queries
as blocks in css

56. Applying media queries
as blocks in css
media attribute of link element

57. Applying media queries
as blocks in css
media attribute of link element
@import

58. Applying media queries

59. You don’t always need them

60. omg

61. Layout is not design.

62. Design is the art of
putting form and
content together.
Paul Rand said that

63. The media query is a
screwdriver.
Layout is only one of
the components of
design.

64. Hey dude, remember
when we designed
web PAGES?

65. Pages
to
Components
to
Systems

66. Layout strategy
wireframes
drupal.org/node/413910

67. Layout strategy
wireframes
graffletopia.com/stencils/358

68. Layout strategy
Reference wireframing
A B C
D g E H
F

69. Layout strategy
Breakpoint graphs
0 px 600 px 900 px We have no idea

70. Layout strategy
Breakpoint graphs
0 px 600 px 900 px We have no idea
Structured content first

71. Layout strategy
Breakpoint graphs
0 px 600 px 900 px We have no idea
Structured content first

72. Layout strategy
Breakpoint graphs
0 px 600 px 900 px We have no idea
Structured content first

73. Layout strategy
Breakpoint graphs
0 px 600 px 900 px We have no idea
Structured content first

74. Layout strategy
Breakpoint graphs
0 px 600 px 900 px We have no idea
Fluid layout
Structured content first

75. Order-independent
layout mechanisms

77. N
S
E

78. Flexible Box
Layout module
S N E

79. Flexible Box
Layout module
tb
S
N
E

81. H
C
A
F

82. Grid layout
module

83. H
Grid layout C A
module
F

84. H
Grid layout
module C A
(templates)
F

85. Grid layout
module
(templates)

86. F
C
Grid layout
module
(templates) H
A

87. Not as cool as two
bears fighting a F
hockey player.
C
H
A

89. Media queries / (meta) viewport

90. Media queries / (meta) viewport
fluid layouts

91. Media queries / (meta) viewport
fluid layouts
device/browser support profiles

92. Media queries / (meta) viewport
fluid layouts
device/browser support profiles
content reference wireframing

93. Media queries / (meta) viewport
fluid layouts
device/browser support profiles
content reference wireframing
layout breakpoint graphs

94. Media queries / (meta) viewport
fluid layouts
device/browser support profiles
content reference wireframing
layout breakpoint graphs
new layout mechanisms

95. Think in terms of
design principles & systems

96. The art of letting go

97. We need to think up new ways
to design layout, and new ways
to communicate these new designs
to our colleagues
and our clients.

98. Thank you!
Starring magician Howard Thurston
as B. Rowser

99. http://www.delicious.com/stephenhay/mobilismconf2011
http://www.slideshare.net/stephenhay/mobilism2011
Thank you!
Starring magician Howard Thurston
as B. Rowser

100. http://www.delicious.com/stephenhay/mobilismconf2011
http://www.slideshare.net/stephenhay/mobilism2011
Thank you!
@stephenhay
Starring magician Howard Thurston
as B. Rowser