Einar's blog
09 mars 2023

Why do webpages with text waste so much of my screen space?

The Arch Wiki changed its design some months ago from text and a sidebar that floats to fill the size of the screen to the content now only being inside a narrow box that takes up only parts of the width of a larger screen. The Arch wiki is not alone in making text-based content visible only inside a narrow box in the middle of the screen. It is a general trend in web-design when the content is text and images and is very common on blogs. It is also used in the Reading mode in Firefox. The idea is that it should somehow be easier to read the text when it is centred and narrow. I do not know exactly why people think this is the case, but many people do. There might be user interface research to suggest people read faster in a narrow column, or it might just be based on how books and newspapers with columns were traditionally laid out. I am not a user interface designer, so my knowledge is limited to my own thoughts and experiences. Even so, I know I am not alone in being annoyed by this trend in web-design, so I thought I'd write a few words about it in the hope that I could convince some people to rethink the use of the max-width attribute in their CSS file.


I think the idea that it is easier to read text in a narrow column is just balderdash. At least to me, the disadvantages of a narrow column are far greater than any possible advantages and I do not read any faster when the text is laid out like this. The disadvantages of narrow text columns on a wide screen are many. Firstly, you have to jump lines more often which makes it easier to loose where you are in the text. Secondly, you have to scroll more often which interrupts the flow of reading the text with unnecessary movement. For most people, this involves lifting their hands from the keyboard to a trackpad or mouse. For more keyboard-centric users, it involves using arrow keys or PageDown, the middle button and a trackpoint, ctrl-n (Emacs keybindings) or j (Vim keybindings). How this is done depends on the browser and the hardware. More keypresses (or mouse actions) makes digesting the information in the text into a slower process with more interruption from actual reading than necessary and wastes time and energy. I also find it aggrevating to have to scroll more often than necessary. Thirdly, it wastes a lot of space on the screen that could have been used for content but is now just empty background. Fourthly, it disregards the choice of screen size and window size the user has made. Some people like very wide screens with a 21:9 ratio while others like 16:9, 3:2, 16:10, or 4:3. Personally, I feel that for smaller laptop screens like my 12,5 and 14 inch laptops, a less wide aspect ratio like 16:10 or 4:3 is preferable, but for a larger external screen, 16:9 is usable (and much easier to find used at a reasonable price) because you have enough pixels of height with a larger screen at normal pixel densities to avoid too much scrolling even if it is 16:9. Additionally, the width of the screen is not necessarily the width of a window. The user can choose for themselves how wide a window they would like to read the text within. For those of us using tiling window managers, splitting the screen into smaller areas is just a keypress away. I don't need a web designer to choose how narrow my window should be for me when I use a smaller window, and when I want a wide window for the text of a website, I definitely would prefer not to be limited to a narrow strip in the middle to avoid unnecessary scrolling, space waste and moving lines more often. If the content just resized to fit the window, maybe with some small margins to look less cluttered, that would be preferable to me.

I cannot think of any advantages to narrower columns of text on a webpage. Human vision is wider than it is tall and that is the argument many give for widescreens in the first place. It is also why films and pictures usually are wider than they are tall unless shot in the portrait orientation because the human body is in that orientation or because the display medium is going to be a smartphone. You do not need to move your head when reading text filling the width of a wide screen unless the screen is really large and you are really close to it, so that is not an argument against letting the text flow wider. For computer screens, most people use screens small enough that you never need to move your head. At normal computer screen viewing distance (which is different than for instance TV viewing distance and smartphone viewing distance) that means that anything smaller than a 27 inch screen is small enough. I use a 25 inch 1440p external screen often and it is definitely small enough that I never need to move my head to read a long line of text. You do have to move your eyes no matter how wide the column is, so making it narrower does not mean any less eye movement, just more up-down movement to change lines instead of more left-right movement. Smartphones are taller than they are wide when held normally, so maybe mobile-friendly design is the motivation, but if the text would just flow to the width of the screen minus a small margin, that would work just as well on phones as on tablets, two-in-ones, laptops and desktops and not annoy users of any device.

I think narrow columns were initially used in newspapers because newspapers in the past often were not in the tabloid format and therefore a bit of narrowing was useful because usually you would have to fold the paper to be able to hold it, but for webpages today, I just don't get why people want less content, more line breaks and more scrolling. This trend is actually a good reason to use terminal-based web browsers that disregard CSS or use custom CSS in a more mainstream browser. There might be reasons I do not know for making content only fit a narrow strip in the middle of larger screens that do not apply to my use of the web, but for me, this trend is definitely annoying. I have changed the CSS for this website to reflect this view.

All content is licensed as Creative Commons Attribution-ShareAlike.