The Future of Media Queries

Responsive web design, in its current incarnation, has been primarily about adapting to viewport width, but viewport width is just a single vector that we can consider. Right now, at this moment, the underlying idea is that a change in context is only tied to a change in screen size. It’s a reasonable start point; after all, it's just simple physics (or optics, or something) that we can't read the same amount on a smaller screen as we can on a bigger screen.

Responsive web design should grow to be more than this; it should grow to capture and adapt to the variable parts of the visitor’s experience. In this future, the design process will depend on what we decide to be the vectors on which the context changes sufficiently to warrant a different experience.

Another that seems particularly salient at this point in time is bandwidth; if we want to provide an adequately speedy experience to all users, we have to consider the range of network speeds our users might be experiencing. But now we have an issue; two vectors of change means we now have a three-dimensional problem. Three dimensional problems are more challenging to solve with a simple on-off toggle like media queries. And what about other vectors of change that we may not have encountered or even imagined of yet? What if we have a future where we know much more about our users' preferences, or other devices they own, or even the specific information they are looking for?

To illustrate, take a look at these (beautiful) hand-drawn charts by yours truly. When we optimize only for width, the required number of contexts to adapt to is very manageable. If we have three targeted widths, we have three contexts to adapt to.


Let’s add in, say, a height condition too (maybe you want to adjust text size based on the height of the viewport). If you have three different target heights, your contexts have grown to nine.


And how about that bandwidth media query? If you could limit yourself to two such checks, you’re now up to 18 contexts.


The question is: how are we going to deal with these four-, five-, six-dimensions of change?1 Will we merely resign ourselves to changing on only one or two contexts? I think this would be a sad defeat. The web is multi-dimensional and requires us to change on many dimensions. Screen size adaptation is a good start, but we would be remiss if we did not go further. If we did not create something more. Users may not know what they are missing, since they have never seen something optimized on so many dimensions. But we should not be happy with users being happy; we should not simply give them faster horses, no matter how much they may say they want them.

That’s why I feel that all this talk about breakpoints is misguided (though, it is a good place to start the discussion). The user’s experience is tied just as strongly to other factors besides width, whether we like to think about it or not. Just because we can more easily tackle the viewport width problem does not make it the only one to think about. We run into the classic folly perfectly articulated by this quote by Dr. Robert Anthony:

If you find a good solution and become attached to it, the solution becomes your next problem.

Of course, the danger is that we start to think we know what the user wants base on their context. That's obviously a mistake, and I think that sufficient argument has been made to close this case. But there is a difference between optimizing for a given set of variables and locking a user in based on how they visit your site. It’s a fine line to tread, but it’s a line that will become increasingly central as our knowledge of our visitors, and our tools to cater to them, continues to evolve. 2

1. It’s true that many of the contexts can be grouped together and fed the same styles. However, it won’t always be this way, and I bet that if we had the ability to detect some more interesting things about the visitor, we might, even today, consider more precisely targeting each individual combination of variables.  ↩

2. So where do we go form here? I think there is more we can do with existing tools. Media queries for viewport area, for example, might help in simultaneously allowing for optimization along width and height. But, as is so often the case, the tools we need to build the future just don’t quite seem to be here yet.  ↩