Two messages from friends within 12 hours of each other have me thinking. Both people, a communications professional and web designer, were wrestling with the width taken up by content on a website.
I’ve been working on a website and I have noticed that their blog is very wide. I find it hard to read.
and
One of the reasons that I hold on to the “traditional” sidebar is because on desktop it’s about the only way to keep line widths 66-110 characters…
A Fundamental Limit?
It seems to me that web design ran headfirst into a fundamental usability principle years ago. The ideal number of characters per line for optimal readability is 60-75.
Once a large number of computer monitors exceeded 1200px or so in the early 2010’s, web site widths more or less quit expanding so they wouldn’t exceed that limit. Things haven’t changed much for years since.
Sure, plenty of sites fill the full width of a screen with an image or background color, but the primary content area rarely exceeds 800px or so.
My blog is just around 70-characters-per-line at its max. When I view that in a browser at a size I normally use, it looks pretty good!
But in a browser that fills my ultra-wide monitor, you’ll see there’s quite a bit of unused space:
It’s not just my site. Almost any site you go to will significantly limit the maximum width of the content area:
The New York Times Twitter Medium.com Gates Foundation WordPress.org
To be clear: websites do this because if the content were wider, it would become extremely hard to read.
I generally keep my browser windows far below the full width of my screen for this reason. But from years of conversations and design feedback, I know many people on wide screens do view websites at or near their maximum screen width.
No Obvious Solutions
As I mentioned earlier, some websites obscure the “empty space” on each side of content with background colors and images. Interestingly, this “fixes” the “problem” for some people but not others.
I’ve noticed over the years that people perceive the space surrounding website content quite differently, even when looking at the same design. Some see it as “empty”, others refer to the left and right sides as “bars”, and some don’t perceive the space so much as they focus on the content not expanding to fill the browser window.
One potential alternative is to write in multiple columns and lay pages out so they scroll from left-to-right rather than top-to-bottom. However, usability studies recommend against horizontal scrolling. The only way this would ever happen is if a significant number of prominent websites made this change in quick succession in order to “train” users how to use a page like that. I don’t even know if that would work.
Even disregarding the problematic mechanics (great band name!) of horizontal scrolling, I wonder if the information density of such a page layout would simply be too great.
Is this a fundamental limit of web design? It feels like it. White space be damned, this is what I’d rather read:
What do you think?
Thanks to Scott Marlow for partially inspiring and reviewing this post.
Line width is based on the ease of reading by the eyes. If the lines are too long the eyes are fatigued. But with all the white space other people are fatigued by the blaring light. Why not have a minimum width for the blog? Use a neutral background to fill the background.
Thanks for commenting, Sharon. You highlight a tricky issue of contrast and light. There are even energy usage and battery impacts of using white so aggressively in design. More and more, people are using “dark mode” or “night mode” to customize their reading experiences. If that’s something you prefer, look into your operating system’s dark/high-contrast mode or try using a browser add-on or feature like Firefox’s reader mode that allows customizing the color, font-size, and more!
Such a great post Mark. This brought back memories from my print design days. I looked up my old self-promotion piece from 2006! Interestingly they sort of still apply… Tip 1: Apply the dollar bill test to assure that no overpowering blocks of body-copy turn off readers.Place a dollar bill anywhere on the page. If it touches only body copy, redesign it. Tip 2: Here’s a very old rule of thumb that says a lineof type should not be any longer than an alphabet anda half in the same point size (font size x 2 or lowercasealphabet x1.5). A line with 55-60 characters (9-10 words) provides optimum readablity. As line length increases, both paragraph indentations and leading (line spacing) should also increase. In addition, take into consideration the x-height and overall legibility ofthe typeface, ink color and paper to decide the best line length for your situation. Thanks for the trip down memory lane. If you’re curious to see what I looked like back then and other tips: https://hoffmangraphics.com/wp-content/uploads/2016/02/newsletter.pdf
Thanks for sharing that excerpt from your old newsletter, Sheila! Some truths almost never change. I love following the Nielsen Norman Group who continues to find the biggest website usability recommendations are extremely stable. Most of fundamental usability best practices from the late 90s are still true today! https://www.nngroup.com/articles/top-10-enduring
Whatever the answer ends up being It does point to an itch that seems to have existed since web design has been a thing. More creativity and breath in our designs ( and then I am reminded of time and budget ), including what to do with that horizontally space in a very vertically driven space. The monitor has grown in size thanks to productivity and video games ( probably more the latter ), and the website is just a page in an application frame. But as you have pointed out the fundamentals don’t change about what makes a comfortable reading expierance. The four-five column layout is definitely a overkill and too information dense. But I could see a three column design, with more spacing and better typography and graphics potentially working nicely ( the big assumption being that your always designing for long for content ). If it is an itch a designer has then we can certainly learn more from traditional graphic design. Reminds me of Jen Simmons talk at An Event Apart two years ago ( https://vimeo.com/209812549 ).
Thanks for sharing your thoughts, Patrick. You have a lot of good stuff in here! The web has certainly grown more homogenous over the years. The tricky part is researched-based usability best practices that drive us to similar looking designs and “Jakob’s Law” that reminds us people spend most of their time on other websites. There are reasons, even if the results may leave us wanting.
I love the Jen Simmons recommendation, and she’s certainly one of the most prominent voices calling for us to push our designs to new places. Maybe Wired can push the boundaries again! They have great interesting print layouts and were one of the first major websites to use CSS for layout!