Opera Developer News

CSS3 Media Queries have generated quite a bit of discussion in the last few days, notably with a well-thought out but critical article by Jason Grigsby and an informed follow-up by PPK.

Media Queries misunderstood?

Opera have championed media queries for several years now so we're delighted that they're finally receiving so much attention, although there seems to be some misunderstanding as to what they can achieve.

Certainly, Jason's article seems based on the fact that many web developers believe adding media queries to a site will magically make it mobile-ready. As he points out, they can indeed make the visual design mobile-friendly but are unable to affect other areas, notably the size of resources that are downloaded [1]. In the mobile environment where speed is a priority, this is like putting a spoiler on your car and saying it's ready for the race track. Having said that, calling media queries a fool's gold is going a bit too far.

Thankfully, in that page's comments Jason clarified his headline and suggested a revised summary:

“CSS Media Query for mobile—particularly as it has been thus far promoted—hides tough problems and gives developers a false promise of a simple solution for designing for multiple screens.”

He's right. In our enthusiasm to try out media queries and in our rush to skim the latest articles and tutorials, it's easy to overlook caveats and restrictions. Media queries are good at what they do but are just a single tool for a job where two or three are probably needed. In particular, combining them with JavaScript as PPK and others advocate seems to me the most practical solution for web developers to adopt at the moment [2].

The benefits of a single site

One further thing that caught my attention in Jason's commentary was his question:

"I don’t understand why web developers are so obsessed with delivering the same HTML to different devices."

Opera's belief in One Web encompasses the approach of having a single site that can adapt to different devices, users and infrastructures. Like any one-size-fits-all solution, there are compromises to be made but overall the pros outweigh the cons. For the developer, there's the obvious benefit of having only one codebase, albeit possibly more complex, to update and maintain, but a couple of other benefits exist as well.

One is that lists and databases such as WURFL, as extensive as it is, are inevitably a catch-up solution and there's always likely to be an off-the-wall or cutting-edge device that falls between the cracks. And spare a thought for the volunteer maintainers who have to keep the database up-to-date and online.

More importantly in my opinion, however, is that the distinction between mobile and non-mobile devices is becoming fuzzier all the time. Mobile phones are becoming more computer-like, mobile operating systems such as iPhone OS and Android are appearing in tablets and even netbooks, browsers can be found in portable and home gaming devices as well as TVs, media players, digital photo frames and car navigation systems. I would go so far as to say that there are no longer PC and mobile categories—there are only devices on a sliding scale of capabilities.

Designing for low spec, slow connection speed devices and then progressively enhancing, although not a silver bullet, seems to be the best foundation for a maintainable, accessible and future-proof site. To achieve this, CSS3 media queries are an essential tool to have but equally essential is to understand their limitations and to be aware of other tools and methods available.

Notes

[1] Background images are an exception to this. If they appear within a media query, they are only downloaded when that condition is true, as are stylesheets included via @import within a media query.
[2] Opera has made available a free library for combining JavaScript detection with media query syntax.
[3] Image source: http://www.openclipart.org/detail/3292