Adding @media query device support in css3 - its too simple to skip

Background

For those not in-the-know, @media queries are a CSS3 capablity that allows you to group css rules or load an entire stylesheet dependent on specific properties of the client browser. CSS2 had the "media" attribute when adding stylesheets, but CSS3 adds to this. Styles can be conditionally controled dependent on width, aspect-ratio, colour profile, scan method and more. @Media queries are only in CSS3 so not all browsers support it, but all the most recent ones do including - importantly - webkit which is the source for most smart phone browsers these days. They are therefore ideal for targetting handheld/mobile devices that can't achieve the resolutions your site visitors are expected to have on the desktop. I've just added @media queries to the stylesheet to this site and it was so incredibly simple I felt compelled to evangelise it.

For mobiles

Achieving mobile support through media queries is a different approach to traditional methods. In the past developers relied upon perhaps using a subdomain like "mobile.mysite.com" or "iphone.mysite.com", or at least some awkward browser sniffing and separate CSS files, perhaps even a separate codebase. The intention was to target just the mobile users, often as an afterthought, treating them like bandwidth-starved simpletons who couldn't manage a full site, diddums. However with the advent of smart phones, the iPad and numerous other tablet devices, "mobile" is an increasingly large percentage of many sites' traffic and no longer refers to a small demographic of people on badly worn Nokias.

With @media queries, the goal is still to provide the best experience without necessarily the best hardware, but with simplicty that makes multi-platform support something achievable during the core development of your site. Mobile users can finally be treated as first-class citizens! You don't have to care what specific hardware they're on - just what that hardware can do.

...and desktops

@Media queries also herald a change in treatment of desktop users. Most sites to this day are still designed for users on either 800x600 resolution, or 1024x768. Despite a huge number of people (particularly in creative sectors) capable of over twice those resolutions, the common denominator is still 1024 or 800. A site tends to be designed for one or other res', occasionally both, but all the while missing a key point (oft screamed in anger by my colleague @garrettc) that screen resolution does not equal viewport size. Many users would - if only you supported it - view your site at less than the intended resolution; having a browser window fill your screen is often plain awkward!

What the simplicity of @media queries advocates is that a site does not have to look exactly the same for all users. If someone wants to view your 1024px site at screen only 600px wide, why penalise them? Why add horizontal scroll bars and risk that vital bargain offer advert never being seen?

The other thing about media queries is that they aren't just for mobiles - they're for you, the designer. You want your site to look its best at all resolutions, right? So why target just the mobile users? There are bound to be a range of resolutions where your site looks commically small, ridiculously spread out, or horribly positionned.

In practice

Why use @media queries? Because more and more people are browsing your website using handheld devices. Machines for which that enforced resolution you spent so long umming and ahing over poses a problem.

Try resizing the browser window while viewing this site, even right down to just a couple of hundred pixels wide. Notice how things shift around, realign and and resize? Thats @media queries - no Javascript necessary. If you check the CSS to this site, my media queries don't even target the common handheld widths (320, 480, 600), they target the widths at which things start to look a bit odd even on a desktop browser. You do of course need some overlap with handheld resolution, but my point is they're still a small demographic and @media queries are for everyone. Take the first,

@media all and (max-width:1000px)

This is basically just saying "target all media" (which includes screen, print, mobile, handheld) where the max width of the page is 1000px i.e everything below 1000px. I'm doing this because although i've designed the site for 1024, I care how it looks when not viewed at that resolution - I'm not even targetting a particular device.

@media all and (max-width:700px)

As above, this is aiming at any devices lower than 700px. I could have chosen 600 which is a common mobile resolution, but the logo and social media links at the top started to look cramped at 680-ish.

Also note that one rule overlaps the next: max-width:1000 means "anything up to 1000", which covers max-width:700 too. This is intentionally loose, since I want the changes for <1024 to affect users at <700 too. I could be more prescriptive and define min-width, to exclude the changes at 1000 from users at 700, but in this case I don't.

The point is that i'm killing a whole flock of birds with one stone here:

  • I can ensure my site looks good for my own personal happiness, at any resolution.
  • Users who are limited in resolution still get a nice looking site.
  • I don't force users to go full-screen just to see the site as I intended.
  • This requires no additional technology (with the exception of CSS3 which all my targets support anyway); no subdomains, no javascript sniffing.
  • I don't even really need to create an iphone app for my site (were it to be more than just a blog) since @media queries could allow me to do a great deal more customisation than i've done already and make it look like an app. I could even target just iOS platforms with the only keywords in media queries, which is documented more here.

Like I said - its so simple, why not do it?