Successfully reported this slideshow.
MEDIA QUERIES Mobile Elixir or CSS Snake Oil?      james williamson | lynda.com
Howdy y’all  james williamson                   | senior author     man-about-town   @jameswillweb on the Twitter
Let’s Take Your Temperature...
Global mobile internet usage | 2003
Global mobile internet usage | 2011
Why do designers fear the mobile web?        Because we’ve only just now            gotten this to work
...and now we have to deal with this             (images not to scale)
Past options for developing for the mobile web          Build a separate mobile site.          Hire a developer to build a...
Surely there must be another option                      CSS               MEDIA               QUERIES               R   ...
So, what’s a media query?CSS Media Queries give us a way to control the application of stylesbased on the presence or abse...
The concept isn’t exactly new...link	  rel="stylesheet"	  href="desktop.css"	  media="screen"                             ...
However, we can now apply a little logic...      link	  rel="stylesheet"	  href="desktop.css"	        media="screen	  and	...
Media Query syntax  Media Queries are logical expressions, they are either“true” or “false” depending upon how they are ev...
Media Query syntax    link	  rel="stylesheet"	  href="desktop.css"	  media="[not	  |	  only	  ]	  screen	  [and]	  (expres...
Media Query syntax  Logical operator “and” constrains a query based on theexpression that follows it. There is no “or” ope...
Media Query syntaxLogical operator “not” negates the results of the media queryand applies the styles if the conditions ar...
Media Query syntaxLogical operator “only” serves to hide style sheets fromolder or non-conforming user agents. Conforming ...
Media Query syntaxMedia Featureswidth                     colorheight                    color-­‐indexdevice-­‐width      ...
Media Query syntaxMedia Feature valueslength     width:500pxkeyword    orientation:	  landscape	  |	  portraitratio      a...
Media Query syntaxMedia Feature prefixesIn many cases, you can use the “min-” and “max-”prefixes to set less-than or greater...
Media Query syntaxBe careful!         width	  !=	  device-­‐width   (Honestly, even device-width != device width, or as   ...
Enough syntax!Let’s see it in action!   Visit mediaqueri.es for a gallery of sites using media queries
Oh snap! That changes everything!Except that it doesn’t.We still need to talk about how media querieswork in the real world.
“Media queries are fools gold...”                                           - Jason Grigsby*So what’s his beef?    Support...
“Media queries are fools gold...”                                           - Jason Grigsby*So what’s his beef?   Having b...
“Media queries are fools gold...”                                          - Jason Grigsby*So what’s his beef?      Unnece...
“Media queries are fools gold...”                                          - Jason Grigsby*So what’s his beef?    Hiding e...
“Media queries are fools gold...”                                          - Jason Grigsby*So what’s his beef?    Media qu...
Browser SupportBrowser                     Layout Engine           MQ supportFirefox                     Gecko            ...
Another big problem...it doesn’t just...work  For mobile, media queries are typically used to check for screen      size. ...
Oh...so....I guess we can go now right?                                     dang.Not so fast. Media queries CAN work, and ...
Let’s talk strategy                Mobile First*Popularized by Luke Wroblewski, it emphasizesstarting the design process w...
Mobile first media queriesIn terms of media queries, mobile first means startingwith your mobile styles, and then enhancing...
Now, about media query support...             Respond.js from the Filament Group                  https://github.com/scott...
Now, let’s tame the viewport!            CSS     MEDIA     QUERIES                                                +   VIEW...
Meta Viewport tagsMeta viewport tags can be combined with mediaqueries to help ensure consistent experiences.  <meta	  nam...
So what can meta viewport tags do?    Meta Viewport properties     width	  =	  [pixel	  |	  device-­‐width	  ]     height	...
So what can meta viewport tags do?   Meta Viewport properties    initial-­‐scale	  =	  0*	  -­‐	  10    minimum-­‐scale	  ...
So what can meta viewport tags do?   Meta Viewport properties    user-­‐scalable	  =	  [	  yes	  |	  no	  ]Controls whethe...
So what can meta viewport tags do?     Meta Viewport properties       target-­‐densitydpi	  =	  [	  dpi_value	  |	  device...
Let’s look at that again...    <meta	  name="viewport"	  content="width=device-­‐width,	      initial-­‐scale=1.0">This sy...
What about resource loading?             OMG. I cannot believe               I just ate all that!
The truth about media query loading...      <link	  rel="stylesheet"	  href="desktop.css"	  media="screen,	        project...
The truth about media query loading...      #actionCall	  {      	   display:	  none;      }  This doesn’t help you either...
The truth about media query loading...     @media	  //mobile	  {     #actionCall	  {     	   background:	  none;     	  	 ...
How can we control resource loading?     Modernizr 2 features both media query tests AND theYepNope.js library. This allow...
How can we control resource loading?Of course, if you prefer, you can roll your own. PPK reports in his   own testing, doc...
Media Query best practicesDesign with mobile in mind firstMake the mobile styles your default styles and progress upUse flui...
Looks like gold to me!                       CSS                MEDIA                QUERIES                R            ...
So...where does that leave us?Just like every other technique in your toolbox, mediaqueries simply add to your capabilitie...
THANK YOUjames williamson | lynda.com   jwilliamson@lynda.com@jameswillweb on the Twitter  www.simpleprimate.com
Nächste SlideShare
Wird geladen in …5
×

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

40.886 Aufrufe

Veröffentlicht am

CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.

Veröffentlicht in: Technologie

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

  1. MEDIA QUERIES Mobile Elixir or CSS Snake Oil? james williamson | lynda.com
  2. Howdy y’all james williamson | senior author man-about-town @jameswillweb on the Twitter
  3. Let’s Take Your Temperature...
  4. Global mobile internet usage | 2003
  5. Global mobile internet usage | 2011
  6. Why do designers fear the mobile web? Because we’ve only just now gotten this to work
  7. ...and now we have to deal with this (images not to scale)
  8. Past options for developing for the mobile web Build a separate mobile site. Hire a developer to build an app for you. Pray.
  9. Surely there must be another option CSS MEDIA QUERIES R Reflows content automatically, with no cramping or bloating. Works overnight, a soothing balm for your mobile ills Good for what ails you?
  10. So, what’s a media query?CSS Media Queries give us a way to control the application of stylesbased on the presence or absence of specific media features
  11. The concept isn’t exactly new...link  rel="stylesheet"  href="desktop.css"  media="screen" look familiar?
  12. However, we can now apply a little logic... link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px)" that narrows it down a bit.
  13. Media Query syntax Media Queries are logical expressions, they are either“true” or “false” depending upon how they are evaluated. If true, the styles are applied, if false, they are ignored. link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px)" In this example, the styles would only be applied if the UA supported the screen media type, and the display was at least 500px
  14. Media Query syntax link  rel="stylesheet"  href="desktop.css"  media="[not  |  only  ]  screen  [and]  (expression)" The keywords “not”, “only”, and “and” can be used to filter results, while expressions can be used to check for specific media features
  15. Media Query syntax Logical operator “and” constrains a query based on theexpression that follows it. There is no “or” operator, normal comma-separated lists serve as “or.” link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px)" Styles are applied for screen devices that have a width of 500px or greater link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px),  projection  and  (color)" Styles are applied for screen devices that have a width of 500px or greater, or color projection devices
  16. Media Query syntaxLogical operator “not” negates the results of the media queryand applies the styles if the conditions are NOT met. It negates the entire expression, not just media type. Use carefully. link  rel="stylesheet"  href="desktop.css"   media="not  screen  and  (min-­‐width:500px)" Styles are applied if the device is not a screen device with a width above 499px. This also means that styles WOULD be applied for screen devices with widths below 500px and other media types.
  17. Media Query syntaxLogical operator “only” serves to hide style sheets fromolder or non-conforming user agents. Conforming user agents are instructed to ignore “only.” link  rel="stylesheet"  href="desktop.css"   media="only  screen  and  (min-­‐width:500px)" Would be ignored by non-conforming agents. Other user agents would apply the styles to screen devices with widths 500px and above.
  18. Media Query syntaxMedia Featureswidth colorheight color-­‐indexdevice-­‐width monochromedevice-­‐height resolutionorientation scanaspect-­‐ratio griddevice-­‐aspect-­‐ratio
  19. Media Query syntaxMedia Feature valueslength width:500pxkeyword orientation:  landscape  |  portraitratio aspect-­‐ratio:  16/9integer color:8
  20. Media Query syntaxMedia Feature prefixesIn many cases, you can use the “min-” and “max-”prefixes to set less-than or greater-than rangesfor your values width min-­‐width max-­‐width
  21. Media Query syntaxBe careful! width  !=  device-­‐width (Honestly, even device-width != device width, or as PPK said, “a pixel is not a pixel*”) *http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  22. Enough syntax!Let’s see it in action! Visit mediaqueri.es for a gallery of sites using media queries
  23. Oh snap! That changes everything!Except that it doesn’t.We still need to talk about how media querieswork in the real world.
  24. “Media queries are fools gold...” - Jason Grigsby*So what’s his beef? Support for media queries isn’t that good *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  25. “Media queries are fools gold...” - Jason Grigsby*So what’s his beef? Having browsers scale images is a bad idea *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  26. “Media queries are fools gold...” - Jason Grigsby*So what’s his beef? Unnecessary resource downloading *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  27. “Media queries are fools gold...” - Jason Grigsby*So what’s his beef? Hiding elements doesn’t lower overhead *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  28. “Media queries are fools gold...” - Jason Grigsby*So what’s his beef? Media queries ignore the mobile context *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  29. Browser SupportBrowser Layout Engine MQ supportFirefox Gecko 3.6+Google  Chrome WebKit 10+Safari WebKit 3.2+Opera Presto 11+Internet  Explorer Trident 9+iOS  Safari WebKit 3.2Opera  Mini Presto 5.0Opera  Mobile Presto 10.0Android  Browser   Android  WebKit   2.1Nokia multiple s40Blackberry  Browser Mango/WebKit 4.7.1Samsung Android  WebKit ???OpenWave ???UC  Web proprietaryNetFront NetFrontPalm WebKit WebOS  1.4
  30. Another big problem...it doesn’t just...work For mobile, media queries are typically used to check for screen size. They do not perform browser or device sniffing. The multitude of different screen sizes, resolutions, pixel densities, and default scaling preferences can cause serious problems with how media query-driven sites display.
  31. Oh...so....I guess we can go now right? dang.Not so fast. Media queries CAN work, and can be an importantpart of your mobile development strategy... you just have to use them correctly, and combine them with other techniques
  32. Let’s talk strategy Mobile First*Popularized by Luke Wroblewski, it emphasizesstarting the design process with mobile in mind. *http://www.lukew.com/presos/preso.asp?26
  33. Mobile first media queriesIn terms of media queries, mobile first means startingwith your mobile styles, and then enhancing designs for other screen sizes including desktop.
  34. Now, about media query support... Respond.js from the Filament Group https://github.com/scottjehl/Respond (gzipped version is 1kb) css3-mediaqueries-js by Wouter van der Graaf http://code.google.com/p/css3-mediaqueries-js/ (15kb uncompressed)A mobile-first strategy makes using these libraries critical.
  35. Now, let’s tame the viewport! CSS MEDIA QUERIES + VIEWPORT R Reflows content automatically, with no cramping or bloating. Works overnight, a soothing balm for your mobile ills Controls scaling and resolution with no bloating, dizzyness, or unpleasant aftertaste. A true joy for the home. = feel better by morning!
  36. Meta Viewport tagsMeta viewport tags can be combined with mediaqueries to help ensure consistent experiences. <meta  name="viewport"  content="width=device-­‐width,   initial-­‐scale=1.0"> what’s this all about then?
  37. So what can meta viewport tags do? Meta Viewport properties width  =  [pixel  |  device-­‐width  ] height  =  [pixel  |  device-­‐height  ]You can set width and height to explicit pixel values, or setthem to device width and height, which instruct the device to set the viewport width to the device screen width
  38. So what can meta viewport tags do? Meta Viewport properties initial-­‐scale  =  0*  -­‐  10 minimum-­‐scale  =  0*  -­‐  10 maximum-­‐scale  =  0*  -­‐  10These values allow you to control the initial scaling of thepage (to control whether your page is initially zoomed outor not), and the minimum and maximum scaling allowed. * Android minimum is 0.01
  39. So what can meta viewport tags do? Meta Viewport properties user-­‐scalable  =  [  yes  |  no  ]Controls whether or not the user can change the scale of the page. If the value is set to no, any previously set minimum and maximum scaling values are ignored.
  40. So what can meta viewport tags do? Meta Viewport properties target-­‐densitydpi  =  [  dpi_value  |  device-­‐dpi   |  high-­‐dpi  |  medium-­‐dpi  |  low-­‐dpi  ]  ]Android Only: Allows you to target screen resolution. You can target a dpivalue (70 - 400), the device dpi (prevents default scaling), or you can targetone of three Android screen density categories. Content will then scale up or down if the resolution doesn’t match the target density. Essentially, it allows you to control how CSS pixels are scaled to device pixels. *For WebKit, you can use (-webkit-min-device-pixel-ratio: 2) to target higher density displays
  41. Let’s look at that again... <meta  name="viewport"  content="width=device-­‐width,   initial-­‐scale=1.0">This syntax tells the device to set the viewport width to theactual device width to ensure the proper media query styles are used, and set the initial page scale to 100%. Never use media queries without a meta viewport tag. Ever.
  42. What about resource loading? OMG. I cannot believe I just ate all that!
  43. The truth about media query loading... <link  rel="stylesheet"  href="desktop.css"  media="screen,   projection"> <link  rel="stylesheet"  href="tablet.css"  media="all  and   (min-­‐width:  481px)  and  (max-­‐width:  768px)"> <link  rel="stylesheet"  href="mobile.css"  media="all  and   (min-­‐width:  0px)  and  (max-­‐width:  480px)"> This is very inefficient. All three CSS files will load,regardless of which media styles are loaded. This creates additional HTTP requests with no added savings. Combine these files using inline @media syntax.
  44. The truth about media query loading... #actionCall  {   display:  none; } This doesn’t help you either. If a widget or image ispresent in the element, it is still downloaded, regardless of the display property.
  45. The truth about media query loading... @media  //mobile  { #actionCall  {   background:  none;    } } @media  //desktop  { #actionCall  {   background:  url(big_ole_image.jpg);    } } This is better. If the mobile property is set to nobackground image, iOS does not download the desktop version. Sadly it seems that Android currently does.
  46. How can we control resource loading? Modernizr 2 features both media query tests AND theYepNope.js library. This allows you to combine feature detection, media query success, and conditional resource loading. <BOOM> http://www.modernizr.com/
  47. How can we control resource loading?Of course, if you prefer, you can roll your own. PPK reports in his own testing, document.documentElement.clientWidth and screen.width give the same results as the width and device- width media queries*. This means you could do this: if  (screen.width  >=  600)  {   //  load  resources } or if  (document.documentElement.clientWidth  >=   600)  {   //  load  resources } *http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
  48. Media Query best practicesDesign with mobile in mind firstMake the mobile styles your default styles and progress upUse fluid layouts to deal with minor screen size differencesCombine CSS & JS files to reduce HTTP requestsMinimize and gzip compress your codeUse Data URL and CSS Sprites when you canDon’t use external libraries unless you really need toConsider using touch frameworks for interactivity
  49. Looks like gold to me! CSS MEDIA QUERIES R Reflows content automatically, with no cramping or bloating. Works overnight, a soothing balm for your mobile ills(That? Oh, that’s just the halo of truth...)
  50. So...where does that leave us?Just like every other technique in your toolbox, mediaqueries simply add to your capabilities.Are they right for every project? Of course not. Mobiledesign is far more than simply designing for a smallerscreen.However, given the right circumstances, media queriesallow you to optimize designs for the mobile environmentin a way that we weren’t able to do before.Deciding when, and if, to use them is, after all, your job.
  51. THANK YOUjames williamson | lynda.com jwilliamson@lynda.com@jameswillweb on the Twitter www.simpleprimate.com

×