This article is hosted on
the personal home page of John Ankarström.
It was originally published on April 21, 2021.
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.
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!
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.
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.
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
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?
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
while all phones and tablets do.