What are CSS Media Queries? | Resources | K2L 

What Are CSS Media Queries?

Gone are the days of maintaining multiple versions of your website to provide mobile users with a small screen friendly version of your website.

So, what are CSS media queries?

CSS Media queries allow you to write conditional css without having to resort to an ugly javascript screen/browser detection and redirect a user to a second site, which must be kept updated to match the desktop version, or to load an alternative stylesheet.

You can now add a few tiny media queries to the end of your stylesheet and completely change the layout of your site so fit neatly into a mobile, be it a low res iPhone or a high end phone like the Nexus 5. And if you write your desktop css with responsive layouts in mind, and use percentage based widths, then the additional css needed to handle a really low res screen can be extremely minimal.

You can be as specific as you like when it comes to what devices you are targeting. You could say everything below a certain screen width, or write css just for an iPad. You can even write different rules for portrait and landscape, and this is the case for any device.

Changing the layout for screens of different shapes and sizes is easy. Where things become a little cloudy is where you take the decision to start hiding content. Occasionally, this can be easily justified, say, for instance, you have a complex sign up form. This could be replaced, for mobiles, with a smaller form so the user can request a call back, or even just display phone number. But, even here, it could easily be argued that you are denying mobile users access to your website’s content, a thing which many mobile users would find frustrating – and the reason behind the frequently added ‘show desktop version’ button.

Personally, I think that if a website has content that can be hidden from mobile users, then that content probably shouldn’t be included on the desktop version. At the very least, I think equivalent alternative content should be provided. That being said, each site is different and it really comes down to what the site is tasked with achieving for the client, and making the site as user friendly as possible.

If you’re still struggling to get your head around css media queries or anything to do with web development then call us on 0161 848 9008 or fill out the form on the right and we’ll get straight back to you.