One of the most useful CSS tools for building responsive layouts are @media queries. Defined by the W3C as “expressions that check for the conditions of particular media features“, they allow developers to create CSS that only applies when certain conditions are met.

They’re great. Going overboard with too many fixed @media breakpoints isn’t really responsive; pages should scale to all widths, not just jumping from one hard-coded breakpoint to another. But in the right situation a nicely placed media query can allow you to make neat layout changes, like clearing a six column layout into three, complimenting your responsive scaling in between.

Writing some media queries today, I found myself in the situation where I had two approaches to choose from. It inspired this blog post, as I quickly realised:

 

Min vs Max: What they do

Making a media query based on browser size often uses some form of width checking in the media query, most commonly min-width or max-width. For example:

@media all and (max-width: 500px) { ... }

Any CSS within this query will only be applied if the viewport is no wider than 500px.

@media all and (min-width: 500px) { ... }

Any CSS within this query will only be applied if the viewport is 500px or wider.

Two different properties, two different approaches to the same issue. Do you start small, and use your media queries to build on your styling as the browser size increases? Or start big and use them to override and rework the layout as the browser size decreases?

 

Mobile first

“Mobile first” is a popular approach to responsive web design, considered by some as the “best” way. The basic principle is that the page should be designed for a mobile (which typically means small-screen) device first, with larger devices being considered an expansion of the original page. In development terms, this can mean loading fewer / smaller images and other resources first, and only loading larger images / additional resources if appropriate for the device.

It makes sense, and can make sites a lot more efficient for mobile by deferring or ignoring unnecessary resources. Assuming we want to build a mobile / small screen layout, and then expand on the styling for larger browsers, min-width is our weapon of choice for media queries.

Your stylesheet creates a mobile-friendly layout, and then your media queries include more CSS as the device width increases. If the page isn’t as wide as the minimum width you’ve specified, there’s no need to apply that CSS or load those background images*.

 

Leaving older browsers behind

Unfortunately, using min-width comes with its own set of problems. Media queries aren’t compatible with all browsers. Most of them, yes – but not all. If your site visitors happen to be using Internet Explorer 8 or – perish the thought – an even earlier version, they’re not going to benefit from any of the CSS contained in your media queries. Your small-scale version might look great on smaller devices, but a desktop user might find it frustrating if their browser is only capable of displaying the initial version.

 

(You can also use Media Queries as a basic level browser check based on this compatibility: read my blog post on older browsers)

 

The alternative is styling the site for a desktop browser, using max-width queries instead to apply new CSS as device width decreases. But that’s contrary to the “mobile first” approach, and asks the browser to apply a lot more CSS than the user needs (not to mention potential background images).

How do you choose?

 

Know your audience

As of April 2013, just under 12% of web users are browsing with IE 7 & 8 (according to W3C). That may not seem like many people to worry about, but visitors using iOS and Android are only 2% higher when you combine the two. So who do you code for: the 12% who won’t benefit from your media queries, or the 14% that want a smoother mobile experience?

That’s up to you. Statistics from 3rd parties may sound impressive, but they may differ wildly from site to site. Less than 1% of your visitors might be @media incompatible, while over 50% are mobile users. Knowing your audience can show you were to focus your efforts. Something like Google Analytics can show you who your visitors are, and what kind of devices / browsers they’re using. If it turns out that a much larger portion of your visitors are using IE8 than mobile, then you have my sympathies – but at least you know.

 

(Google Analytics and Webmaster Tools can also help you start looking at your site’s SEO health in a simple, straightforward way: read my Simple SEO Health Check: Part One)

 

There are various Javascript libraries out there that try to polyfill functionality back into older browsers like IE, which would render this problem largely irrelevant. But they are an extra consideration in terms of performance, especially when an older version of IE might imply an older and much less powerful PC is in use. If they’re still using IE 7 or 8, it’s probably crawling along with malware and bloatware galore.

In my mind, it’s about shaping the best user experience for your actual users, not just the trends you hear about. That’s not to say don’t be prepared for both, or for your user base to grow and change. But if you’re finding it difficult to decide where to start with a responsive layout for your site, it’s good information to keep in mind.

I’m going to continue using a combination of the two: min-width for more “heavy” styling (including background images, etc), and max-width for more subtle layout changes that I want to be visible for even the most archaic browsers. It’s certainly a reminder that the sheer variety and flexibility of the web continues to present interesting questions and challenges for developers, even in small ways.

 


* This gets a little more complicated, but Tim Kadlec has a great article on loading CSS background images with media queries.