This article is hosted on the personal home page of John Ankarström.
It was originally published on April 21, 2021.

The anti-pattern of responsive design

The body of the page is replaced by the small left side bar, which now occupies 100% of the page's width.The animated GIF to the right demontrates what happens on Invidious when I reduce the width of the browser window by a couple of pixels.

The whole spatial arrangement of the page changes: the original three-column layout is abruptly replaced by a single-column layout, in which what was originally the small, irrelevant column on the left is placed first.

I'm sure I'm not alone in frequently experiencing this phenomenon. I personally like to my browser windows to be reasonably narrow, but in the last decade, web pages have started to arbitrarily decide that this means that I'd like a mobile-oriented, less capable version. There is more than one big problem with this.

Spatial gaslighting

One of the fundamental concepts that informed the design of the Macintosh, the first true consumer-oriented graphical user interface, was the idea that humans could interact with computers spatially. Instead of having to remember written commands to organize their files on the disk, the user could move the files around visually and – here's the real insight – remember their location in space. The user could remember where they put their file without worrying about what they called it, just like they'd remember where they put their wallet, their keys or that very important paper.

This idea of spatial orientation is fundamental to all user interface design, including web design. As a user visits your web site again and again, they start learning where things are. The more time they invest into the design of your web site, the more efficiently they can use it – and the more enjoyable they find it. Ever wondered why so many of the web's greatest scandals have been redesigns? This is your answer. Users don't like having their investment thrown away at the whim of a bored designer.

This is also the problem that I have with responsive design. Most implementations of responsive design are effectively akin to redesigning your web site every time the user resizes their window. The most striking example is when a horizontal menu bar is converted to a vertical menu bar: all the user's spatial memory of the menu bar's links flies out the window! That option that you thought were there? It's actually here!

Cross-site inconsistency

But even if users dislike responsive design, it is very hard for them to escape it. The bulk of what we call responsive design is implemented using CSS media queries, which are conditional statements that tell the browser to activate an array of CSS rules if certain conditions are met – for example, whether the width of the browser window is above or below a given number of pixels. The exact number is defined by the web designer; the result is that two web designers will almost never select the same width.

Now, I think we can all agree that, on our desktop computers, we prefer viewing the full-width layout of most web pages. There are exceptions where the reduced-width version is actually more usable, but those are rare and far between. In general, the full versions of web pages are much more pleasant and easier to use.

In order to escape the reduced-width versions of web pages, it is up to the user themselves to resize their browser window to be wide enough to fit the page. But because two web designers almost never happen to select for the same width in their media queries,it is impossible for the user to select a window width that consistently fits the full versions of all web pages, unless they just give up and use the full screen or an otherwise unreasonably wide window. But apart from having access to the full versions of web pages, it is usually in the user's interest to be able to have multiple windows visible at once, which requires the windows to be limited in their widths.

One might think that users could just resize the window if they happen upon a web page that requires a wider window. After all, users had to do this even before responsive design was possible, as there have always been web pages designed for certain widths. But it isn't quite that simple: on non-responsive pages, it is very clear if the window needs to be resized to fit the whole page, but on responsive pages, there isn't anything signaling to the user that hey! the whole page doesn't fit with your current window size – no scrollbar, no cut-off content; at best (or worst, I guess), just a hamburger menu, or an otherwise weird, mobile-sort-of-looking interface.

What can the user do?

One could imagine that users could solve this problem by disabling media query support in their web browsers. If only it were so simple! The crux is that it is not uncommon for web designers to lock the full-width design behind a media query and serve the mobile version by default. Disabling media queries would do the opposite of the desirable thing on these pages.

A better solution would be to find some way to have the browser report a single, user-defined width to the stylesheets and scripts served by web pages. This is already desirable from a privacy perspective.

The perfect solution would be able to identify the media query (if any) that enables the full-width version of the site and enable that, while disabling all other media queries that select on the window width. Potentially, such a feature could be implemented as a browser extension, using JavaScript to parse and go through all media queries in the stylesheet, selectively removing them as needed.

What can the web designer do?

I have left this section for last, because it is the most important section. What I've written above leads to a simple conclusion: web designers need to think long and hard about how they implement responsive design.

On a higher level, though, we ought to question the purpose of responsive design. It is clearly very useful: the modern web is accessed from a range of devices with varying screen widths, and responsive design is a solution to that problem. But perhaps the problem with responsive design is that it is too general a solution. It tries to support every conceivable screen size, but is the diversity in screen sizes actually that big? Is it not rather the case that they have grown to be standardized on a few, easily defined categories?

  1. Desktop/laptop
  2. Tablet
  3. Phone

Wouldn't the user experience be a lot better if each of these screen sizes were designed for separately? Then, the user could actually invest in the user interface of a web site, because it would be consistent on all devices of the same type.

I can't believe that I'm saying it, but maybe it would be better if we went back to some form of user agent detection:

let mobile = navigator.userAgent.match(/Mobi/);
let ipad = navigator.userAgent.match(/iPad/);
let android = navigator.userAgent.match(/Android/);
if (mobile && !ipad)
this is a phone
else if (ipad || android)
this is a tablet

The code above may not be complete, but I think it should cover a lot of ground. Just make sure that the desktop version is the default case, as not all desktop browsers consistently support JavaScript, while all phones and tablets do.