Adding @media query device support in css3 - its too simple to skip
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.
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.
@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.
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.
@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
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.
- 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
onlykeywords in media queries, which is documented more here.
Like I said - its so simple, why not do it?