However, we can now apply CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

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 an app for you. Pray.

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?

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 speciﬁc media features

The concept isn’t exactly new...link rel="stylesheet" href="desktop.css" media="screen" look familiar?

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.

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

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 ﬁlter results, while expressions can be used to check for speciﬁc media features

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

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.

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.

Media Query syntaxMedia Featureswidth colorheight color-‐indexdevice-‐width monochromedevice-‐height resolutionorientation scanaspect-‐ratio griddevice-‐aspect-‐ratio

Media Query syntaxMedia Feature valueslength width:500pxkeyword orientation: landscape | portraitratio aspect-‐ratio: 16/9integer color:8

Media Query syntaxMedia Feature preﬁxesIn many cases, you can use the “min-” and “max-”preﬁxes to set less-than or greater-than rangesfor your values width min-‐width max-‐width

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

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 for media queries isn’t that good *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

“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/

“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/

“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/

“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/

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

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 sniﬃng. The multitude of diﬀerent screen sizes, resolutions, pixel densities, and default scaling preferences can cause serious problems with how media query-driven sites display.

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

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

Mobile first media queriesIn terms of media queries, mobile ﬁrst means startingwith your mobile styles, and then enhancing designs for other screen sizes including desktop.

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-ﬁrst strategy makes using these libraries critical.

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!

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?

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

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

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.

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

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.

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

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.

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.

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/

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

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

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

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.

THANK YOUjames williamson | lynda.com jwilliamson@lynda.com@jameswillweb on the Twitter www.simpleprimate.com