Media queries are the CSS3 feature that gave way to responsive design. And with responsive design, came along a fixation with devices and all their many different widths and proportions, an issue further complicated by retina iPads, large screen smartphones and even Kindles.
This fixation leads many front-end developers to automatically drop in de-facto media queries into their code. Usually, they roll with something like:
I’d insert them as text – but then this post could end up just being another resource for developers looking for device-specific media queries. And it’s that which is so terrible.
First of all, the problem with this approach is it completely fails to acknowledge the existence of other devices besides iPads that sit within these resolutions.
Secondly, by using this method you aren’t actually doing responsive design at all. You’re pre-empting and creating layouts and styles for specific device sizes. That isn’t responsive at all.
Remember the term mobile-first? It exists for a reason. A better process is to completely forget about pre-determined device media queries and instead start from the ground up.
Create your mobile layout first – but even at this stage, stop fixating in widths. Not every mobile device is 320px wide, so while you are developing, start increasing the width of your browser. Continue doing so until something breaks with your layout, or the site doesn’t look how you’d like it to.
Then add in your media query for that width up, and start making adjustments. Continuing this process, you’ll find that instead of targeting specific device, you are adjusting your layout and styles depending on the width of the browser – in other words, true responsive design.
You should also already have content to work with before you do this, because ideally the content of the website should dictate the layout – not the other way around. In other words, consider the length of your sentences, the sizes of your images and other content when laying out your pages. At what point does a sentence become too long, or an image too big? Now you have your media query.
Am I guilty of fixating too much on device widths myself? Many, many times. But since I adopted this approach, I’ve found my websites work much better across devices anyway. Content doesn’t look warped and is easier to digest, and the whole process makes more sense.
Stay up to date with the latest marketing, web design, and branding tips and news.