Beyond Media Queries — It’s Time to Get Elemental

When Ethan Marcotte wrote this piece outlining the concepts behind Responsive Web Design, I wonder if he knew how popular the concept would become. Or that it would be mainstream in just a few years. Today, every responsive site on the net relies heavily on media queries to adapt the layout and other elements to the size of the viewport. It’s almost like a bit of magic. We suddenly don’t have to create separate code, files and the works for each mobile device size. Our website magically ‘responds’.

But sometimes, I wonder if we took Ethan’s words too literally. That we got complacent about media queries. We pounced on media queries as the golden solution for responsive designs… and stopped looking beyond.

Don’t get me wrong. I love Responsive Web Design. I love that it enables us to show the same content, well enough, on all kinds of device sizes. And I love media queries — the technology that makes it possible for me to change layouts based on the device size (simplistically speaking). But the more I work with them, the more painfully aware I am of how inadequate and grossly overused they are.

Media Queries: The Origins

Those of you who are familiar with media queries, just bear with me for a minute.

Media queries came about from the need to tailor presentation to a range of output devices, without changing the content itself. A media query checks the media type against the user agent string, and if there’s a match, it goes on to check against certain physical attributes of the device, like height, width, orientation, etc. This is a simple and effective way to serve different presentations on devices with varying dimensions. It’s no coincidence that the need for media queries grew along with the increasing adoption of smart phones and other mobile devices worldwide.

The most commonly used media query features are the ones for height and width. For the browser window or view port there are width, height, min/max-width, min/max-height and for the device there are device-width, device-height, min/max- device-width, min/max- device-height. So you can effectively specify how you want things to change when the viewport or device size changes.

Yes, that’s more or less what it’s all about. Why am I repeating the basics? To draw the focus back to the basics of media queries — the basic concepts that we tend to overlook in our love for media queries:

1. Media Queries were meant to address the problem of displaying the same content across multiple device sizes.


2. They are not modular.

And this is where media queries start becoming a problem — when you really want to build modular, independent components.

Continue reading %Beyond Media Queries — It’s Time to Get Elemental%

by Richa Jain via SitePoint