When most people think about responsive web design, they think about a website that restructures and reforms to fit the device where it is being displayed. While this is true, few know how this is actually achieved.
There are all types of different frameworks out there for building a responsive website. Most of them use media queries to get the job done. With all of the devices out there, at different screen sizes and resolutions, can you set up a media query for each one? Also, is there such a thing as too many media queries? To get started, let’s look briefly at what a media query is and what it actually does.
What is a media query?
A media query is a chunk of CSS that you use to specify a certain screen size, and they styles that will apply to that screen size. It is used to target a device that is a certain width and height, and can also be targeted by screen resolution. With a media query, you can also target a device by its orientation. You can specify portrait or landscape, so when the user rotates their device, the browsing experience is specified there, too.
To answer our question as to whether there can be too many media queries, you also need to understand the different types of media queries and how they affect performance. Media queries can either be embedded in a stylesheet, or you can call an external one from a style sheet. Personally, I prefer to keep everything in one stylesheet, even though it can seem a little overwhelming.
The reason is because it is easier to keep up with one stylesheet, instead of a stylesheet for every media query. You’ll have a bigger CSS file, but you’ll have fewer HTTP requests. In a WordPress site, it can cost more in performance to query multiple files than it would to load a single larger file. This strictly depends on the size of the image, but text, even a significant amount, loads faster than an extra 100KB image. If you end up downloading 10 images, that’s an extra MB of data to download that isn’t necessary.
Methods for structuring media queries
There are also different methods for structuring your media queries. You can stack your media queries, or you can overlap them. Overlapping causes browsers to download all of the images for the overlapping styles, while stacking only downloads one image, which is the one linked to the media query for that particular device.
The downsides of media queries
Complications
When you have a ton of media queries, having them overlap causes a lot of problems. If you don’t stack overlapping media queries properly, your site won’t look the way you want it to. You have to be careful how you stack overlapping media queries, because if you stack them improperly, one can override the other. This problem is further compounded when you have a lot of specific media queries that make visual changes depending on the screen size.
Imagine trying to edit a site with too many media queries. In the best case scenario, you’d have to sift through a stylesheet, hoping to find the media query for the screen size you are looking for. However, I seriously doubt you’ll be targeting just one screen size to make a change. You’ll have to hunt down that same selector, altering the style for every single media query.
In the worst case scenario, you may be trying to determine what CSS is controlling the look of an element, only to have a dozen media queries to choose from. I use Firebug, and even though it’s one of my major go-to tools, there’s only so much it can do. Also, if that style is on a hover state, it makes it much more of a hassle to pinpoint which style is overriding everything else. It can narrow it down, though. If you look closely at the breakdown, it tells you what the CSS is on in the stylesheet.
Bogging things down
Another issue is that the more media queries you have, especially if they overlap with each other, is the fact that browsers will download all of the images associated with all of the overlapping media queries included. There are scripts that can handle and control this, but that’s still a trade off. You have to compare how much performance you’ll get out of controlling the assets downloaded with a script, versus the load time of the script itself.
If you an find a lightweight script, then it may save more resources to use that script to control and limit the images that are downloaded by the browser.
A lot of changes
One of the things that designers hated before responsive web design was having to keep up with multiple versions of the same website. This was cumbersome, and created a lot of extra work. That’s why web designers rejoiced when responsive design came along. The problem with having too many media queries is that whenever you have to make a change, it has to be implemented and updated for every media query you’ve set up. That’s probably why you don’t see very many sites with more than a handful of media queries.
The optimal solution
There is no right or wrong way for every website and every scenario. That strictly depends on the project. However, after looking at the options, it’s important to remember to keep it simple all around. Stacking media queries provides a range for styles to be applied to. It also makes it easier for other designers to edit and change the CSS throughout the website. The styles won’t overlap, which can be big trouble for someone who didn’t build the site. That kind of problem can be tough to resolve, even when you use Firebug to inspect the site. You may run into the trouble of one style overriding another, without being sure which one it is.
Also, keeping media queries as few as possible makes it easy to go back and edit just a few. Not overlapping your media queries also cuts down on downloading images from different media queries all at the same time. The whole point of CSS in the first place is to give web designers an easy and consistent way to control how a site looks.
Conclusion
When it comes down to it, you have to use the methods that work best for your project. Maybe your client wants you to hand craft the look and experience for each device. No matter how many media queries you use, you’ll still have to specify a default style outside of the media queries section. There’s no way around that. Simply pick the best supporting media queries method to deliver the best possible user experience to website visitors.
