@media mobilism and (year: 2011)              MEDIA QUERIESA CLOSER LOOK AT        BY           STEPHEN HAY
B. Rowser
Hi handsome.
@media mood and (min-level: fine)      Fine.
@media screen and (min-width: 600px)        Yes.
@media all and (orientation: landscape)What are you, an idiot?
As you wish.
MEDIA QUERIES@media [not|only] type [and] (expr) {  rules;}== Feature detection
MEDIA TYPES @media screen { ... }  @media print { ... }@media handheld { ... }
MEDIA TYPES  @media screen { ... }   @media print { ... } @media handheld { ... }Let’s add some logic...@media screen and ...
MEDIA TYPES    @media screen { ... }     @media print { ... }   @media handheld { ... }  Let’s add some logic...  @media s...
MEDIA TYPES      @media screen { ... }       @media print { ... }Hey—@media handheld { ... }     tell them some more about...
logical AND@media screen and (min-width: 600px)and (max-width: 1200px) constrains a query
logical OR@media screen and (min-resolution:300dpi), screen and (-webkit-min-device-pixel-ratio: 2) the comma is an OR
logical NOT@media not screen and (color)
logical NOT@media not screen and (color)    be careful...
logical NOT@media not screen and (min-width: 600px)
logical NOT @media not screen and (min-width: 600px)  does not evaluate as:@media (not screen) and (min-width: 600px)
logical NOT @media not screen and (min-width: 600px)  does not evaluate as:@media (not screen) and (min-width: 600px)     ...
ONLY      @media only all and (device-aspect-ratio: 16/9)hides the CSS from older browsers
ONLY          @media only all andEnough. Enough.    (device-aspect-ratio: 16/9)What about theMedia Features?  hides the CS...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
Media Featureslikely you’ll use these most:width                 colorheight                color-indexdevice-width       ...
Testing
TestingYes, you are.
Prefixed Features
Prefixed FeaturesHow many device pixels per CSS pixel?
Prefixed FeaturesHow many device pixels per CSS pixel?   -webkit-[min|max]-device-pixel-ratio     [min|max]--moz-device-pi...
Prefixed FeaturesHow many device pixels per CSS pixel?   -webkit-[min|max]-device-pixel-ratio     [min|max]--moz-device-pi...
Prefixed FeaturesA pixel is not a     pixel.
Prefixed Features Is this a touch device?    -moz-touch-enabled
Prefixed Features       Is this a touch device?           -moz-touch-enabled@media screen and (-moz-touch-enabled) {  /* t...
Viewport@media screen and (max-device-width: 320px)
Viewport@media screen and (max-device-width: 320px)                 device-width                                layout vie...
Viewport@media screen and (max-device-width: 320px)   Meta viewport.
Meta viewport    <meta name="viewport"content="width=device-width">
Meta viewport         <meta name="viewport"     content="width=device-width">use that in combination with WIDTH @media scr...
Meta viewport          <meta name="viewport"      content="width=device-width,            initial-scale=1">use that in com...
viewport in CSS?@viewport {  width: device-width;  zoom: 1; /* No, not THAT zoom */}
viewport in CSS? Enough already.   @viewport {How zoom: 1; /* No, not THAT     can we apply     width: device-width;      ...
Applying media queries
Applying media queries      as blocks in css
Applying media queries       as blocks in cssmedia attribute of link element
Applying media queries       as blocks in cssmedia attribute of link element           @import
Applying media queries
You don’t always need them
omg
Layout is not design.
Design is the art of putting form andcontent together.      Paul Rand said that
The media query is a   screwdriver.Layout is only one of the components of       design.
Hey dude, remember when we designed    web PAGES?
Pages   toComponents   to Systems
Layout strategy    wireframes         drupal.org/node/413910
Layout strategy    wireframes      graffletopia.com/stencils/358
Layout strategyReference wireframing A         B           C D     g       E   H           F
Layout strategy         Breakpoint graphs0 px     600 px     900 px   We have no idea
Layout strategy         Breakpoint graphs0 px     600 px     900 px   We have no ideaStructured content first
Layout strategy         Breakpoint graphs0 px     600 px     900 px   We have no ideaStructured content first
Layout strategy         Breakpoint graphs0 px     600 px     900 px   We have no ideaStructured content first
Layout strategy         Breakpoint graphs0 px     600 px     900 px   We have no ideaStructured content first
Layout strategy         Breakpoint graphs0 px     600 px           900 px   We have no idea                  Fluid layoutS...
Order-independentlayout mechanisms
NSE
Flexible BoxLayout moduleS     N    E
Flexible BoxLayout module                tb    S    N    E
HCAF
Grid layout  module
HGrid layout   C       A  module                  F
HGrid layout  module      C       A(templates)                  F
Grid layout  module(templates)
F              CGrid layout  module(templates)   H              A
Not as cool as two bears fighting a    F  hockey player.                     C  Grid layout    module  (templates)        ...
Media queries / (meta) viewport
Media queries / (meta) viewport        fluid layouts
Media queries / (meta) viewport         fluid layoutsdevice/browser support profiles
Media queries / (meta) viewport         fluid layoutsdevice/browser support profilescontent reference wireframing
Media queries / (meta) viewport         fluid layoutsdevice/browser support profilescontent reference wireframing  layout ...
Media queries / (meta) viewport         fluid layoutsdevice/browser support profilescontent reference wireframing  layout ...
Think in terms ofdesign principles & systems
The art of letting go
We need to think up new ways to design layout, and new waysto communicate these new designs        to our colleagues      ...
Thank you!Starring magician Howard Thurstonas B. Rowser
http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you!Starring ma...
http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you!        @st...
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Meta layout: a closer look at media queries
Upcoming SlideShare
Loading in...5
×

Meta layout: a closer look at media queries

15,686

Published on

0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,686
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
231
Comments
0
Likes
40
Embeds 0
No embeds

No notes for slide

Meta layout: a closer look at media queries

  1. 1. @media mobilism and (year: 2011) MEDIA QUERIESA CLOSER LOOK AT BY STEPHEN HAY
  2. 2. B. Rowser
  3. 3. Hi handsome.
  4. 4. @media mood and (min-level: fine) Fine.
  5. 5. @media screen and (min-width: 600px) Yes.
  6. 6. @media all and (orientation: landscape)What are you, an idiot?
  7. 7. As you wish.
  8. 8. MEDIA QUERIES@media [not|only] type [and] (expr) { rules;}== Feature detection
  9. 9. MEDIA TYPES @media screen { ... } @media print { ... }@media handheld { ... }
  10. 10. MEDIA TYPES @media screen { ... } @media print { ... } @media handheld { ... }Let’s add some logic...@media screen and { ... }
  11. 11. 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) { ... }
  12. 12. 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) { ... }
  13. 13. logical AND@media screen and (min-width: 600px)and (max-width: 1200px) constrains a query
  14. 14. logical OR@media screen and (min-resolution:300dpi), screen and (-webkit-min-device-pixel-ratio: 2) the comma is an OR
  15. 15. logical NOT@media not screen and (color)
  16. 16. logical NOT@media not screen and (color) be careful...
  17. 17. logical NOT@media not screen and (min-width: 600px)
  18. 18. logical NOT @media not screen and (min-width: 600px) does not evaluate as:@media (not screen) and (min-width: 600px)
  19. 19. 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)))
  20. 20. ONLY @media only all and (device-aspect-ratio: 16/9)hides the CSS from older browsers
  21. 21. ONLY @media only all andEnough. Enough. (device-aspect-ratio: 16/9)What about theMedia Features? hides the CSS from older browsers
  22. 22. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  23. 23. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  24. 24. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  25. 25. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  26. 26. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  27. 27. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  28. 28. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  29. 29. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  30. 30. Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  31. 31. Media Featureslikely you’ll use these most:width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  32. 32. Testing
  33. 33. TestingYes, you are.
  34. 34. Prefixed Features
  35. 35. Prefixed FeaturesHow many device pixels per CSS pixel?
  36. 36. Prefixed FeaturesHow many device pixels per CSS pixel? -webkit-[min|max]-device-pixel-ratio [min|max]--moz-device-pixel-ratio -o-[min|max]-device-pixel-ratio
  37. 37. Prefixed FeaturesHow 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
  38. 38. Prefixed FeaturesA pixel is not a pixel.
  39. 39. Prefixed Features Is this a touch device? -moz-touch-enabled
  40. 40. Prefixed Features Is this a touch device? -moz-touch-enabled@media screen and (-moz-touch-enabled) { /* touchy styles */}
  41. 41. Viewport@media screen and (max-device-width: 320px)
  42. 42. Viewport@media screen and (max-device-width: 320px) device-width layout viewport
  43. 43. Viewport@media screen and (max-device-width: 320px) Meta viewport.
  44. 44. Meta viewport <meta name="viewport"content="width=device-width">
  45. 45. Meta viewport <meta name="viewport" content="width=device-width">use that in combination with WIDTH @media screen and (max-width: 320px) { div { width: 80%; } }
  46. 46. 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%; } }
  47. 47. viewport in CSS?@viewport { width: device-width; zoom: 1; /* No, not THAT zoom */}
  48. 48. viewport in CSS? Enough already. @viewport {How zoom: 1; /* No, not THAT can we apply width: device-width; zoom */ these things? }
  49. 49. Applying media queries
  50. 50. Applying media queries as blocks in css
  51. 51. Applying media queries as blocks in cssmedia attribute of link element
  52. 52. Applying media queries as blocks in cssmedia attribute of link element @import
  53. 53. Applying media queries
  54. 54. You don’t always need them
  55. 55. omg
  56. 56. Layout is not design.
  57. 57. Design is the art of putting form andcontent together. Paul Rand said that
  58. 58. The media query is a screwdriver.Layout is only one of the components of design.
  59. 59. Hey dude, remember when we designed web PAGES?
  60. 60. Pages toComponents to Systems
  61. 61. Layout strategy wireframes drupal.org/node/413910
  62. 62. Layout strategy wireframes graffletopia.com/stencils/358
  63. 63. Layout strategyReference wireframing A B C D g E H F
  64. 64. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no idea
  65. 65. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  66. 66. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  67. 67. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  68. 68. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first
  69. 69. Layout strategy Breakpoint graphs0 px 600 px 900 px We have no idea Fluid layoutStructured content first
  70. 70. Order-independentlayout mechanisms
  71. 71. NSE
  72. 72. Flexible BoxLayout moduleS N E
  73. 73. Flexible BoxLayout module tb S N E
  74. 74. HCAF
  75. 75. Grid layout module
  76. 76. HGrid layout C A module F
  77. 77. HGrid layout module C A(templates) F
  78. 78. Grid layout module(templates)
  79. 79. F CGrid layout module(templates) H A
  80. 80. Not as cool as two bears fighting a F hockey player. C Grid layout module (templates) H A
  81. 81. Media queries / (meta) viewport
  82. 82. Media queries / (meta) viewport fluid layouts
  83. 83. Media queries / (meta) viewport fluid layoutsdevice/browser support profiles
  84. 84. Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing
  85. 85. Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing layout breakpoint graphs
  86. 86. Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing layout breakpoint graphs new layout mechanisms
  87. 87. Think in terms ofdesign principles & systems
  88. 88. The art of letting go
  89. 89. We need to think up new ways to design layout, and new waysto communicate these new designs to our colleagues and our clients.
  90. 90. Thank you!Starring magician Howard Thurstonas B. Rowser
  91. 91. http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you!Starring magician Howard Thurstonas B. Rowser
  92. 92. http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you! @stephenhayStarring magician Howard Thurstonas B. Rowser
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×