Since its inception, responsive design has found good response from the design community, with more and more designers and developers favoring responsive design, owing to the steady rise of mobile devices such as tablets and smartphones.
Speaking of responsive design, media queries form an integral and essential part of the responsive web design process. While a large number of responsive frameworks do exist—including responsive WordPress themes—nearly all of them rely on media queries to differentiate one screen size and resolution from another.
So, what exactly is a media query? Are media queries the ultimate means to achieve responsive design? In this post, I will answer these questions.
Media Queries In Responsive Design
In simple words, a media query refers to the CSS code that specifies the types of styles that need to be applied to a given screen size. But not just width, height, or resolution, you can also specify styles on the basis of screen orientation: If a user rotates his or her smartphone, the orientation changes, and so do the concerned styles and layout for your design.
Often, it is more convenient to retain all media queries embedded within one stylesheet, but you can also employ external media queries across multiple stylesheets. In the first case, you will have one bulky CSS stylesheet to work with, but fewer HTTP requests, whereas in the second case, your CSS code will be sub-divided across multiple agile stylesheets, although the number of HTTP requests will rise. The general consensus is that querying multiple stylesheet files is more memory-intensive than querying one gigantic stylesheet file.
Now, since media queries have long become the de facto method of implementing responsive design, is there a possibility that one might end up overusing them?
When is a media query one too many?
There is no direct answer to this question. However, the use of media query depends on the nature of website or app that you are working on. As such, you should add only those media queries that are actually required by your website or application.
However, there is also a catch to this: Every website or application needs to be future-proof. Thus, you need to stack media queries in order to offer a range of styles, and also help any future developer or designer who might need to edit the respective website or app.
Therefore, overuse of media queries clearly needs to be avoided. Ideally, your website should have nothing more than a handful of media queries.
Here are the direct benefits of following this model:
The direct benefit of having fewer media queries is that each time you implement a new change, you need to implement it across different media queries, and the lower the number, the easier it is to make changes to your design.
In order to implement the visual looks of your website across different screen resolutions and orientations, you need to stack your media queries well, especially if they are overlapping.
Keeping your media queries few and simple is the key here. Assume, that your design makes use of multiple media queries. Now, if you ever need to make a change to your design, you will probably have to browse through the multiple media queries, in order to locate the one that matters. Clearly, this is too much of work for even the most experienced designer.
Lastly, web browsers tend to download all the images that are associated with overlapped media queries. As such, the higher the number of media queries, the greater the load time. Thus, you need to pay special attention to the number of media queries in your project: There is always a trade off involved in terms of load time, and a script that makes use of too many media queries will take longer time to load properly.
In terms of a practical approach, at times, necessity demands that we use overlapping media queries. As such, even if you are forced to use multiple media queries or overlapping queries, consider including a separate stacked media queries section to deal with the images. This separate media query section will not let your scripts slow down the overall site, even if it means that you need to declare that similar media query in more than one place.
All said and done, media queries are by far the back-bone of responsive web design projects, and as a result, their usage is a norm and necessity, not luxury. However, you should be judicious when using media queries. While it is true that modern-day web browsers load media queries fast enough, it is still advisable to ensure that you do not bloat down your design by overusing media queries.
What are your thoughts regarding the usage of media queries in responsive design? Share them with us in the comments below!