mm

November 26, 2015 WATB Team
Follow me on Twitter

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.

Stop just blindly copying device specific queries ๐Ÿ™

This fixation leads many front-end developers to automatically drop in de-facto media queries into their code. Usually, they roll with something like:

screenshot of ipad media queries

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.

Mobile First – Then respond to content ๐Ÿ™‚

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.

If I’ve not convinced you, try read more about this approach by other seasoned developers.

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up โ†’