Fixed Width

I personally like fixed width web pages - specifically ones that fit in a 800px screen without horizontal scroll, but according to Jakob Nielsen’s readers it’s the number 9 on the Top Ten Web Mistakes of 2005.

Last time I really paid attention, this was all the rage in web design, and I did the same thing with my site back in the spring when I updated it. So I just went out to do a survey, determined to get examples from the top web designers to refute this. Unfortunately, I came back a bit empty handed. There are still a few hold-outs - Zeldman, Todd Dominey, and Mike Davidson among others. There was an argument (sorry, I forget where it was posted) that users have difficulty focusing on text contained in too wide an area, that it’s hard to visually scroll to the next line, or get back to your spot if you’re momentarily distracted. The traditional layout of newsprint was cited as an example. But I noticed that in the last round of redesigns, most people are adopting designs that flow into the window size. Most of these are still optimized, or at least still fairly readable, at 800px wide, but gratiously widen in a larger window.

I personally like 800px width because I have my window resolution set at 1600×1200, and it allows me to have the web browser open in exactly half the window while I do what-ever else it is I’m working on in the other half of the window. Surely buying another monitor could resolve this, but I’ve got enough desk clutter to deal with.

One of the primary points that Nielsen points out in this piece recurs from a web design mistake much higher in the list… fixed text sizes. Given my resolution preferences, sites that have fonts fixed down to 8pts are painfully hard to read. I have to use the old firefox ctrl++ trick to bump up the font to a readable size. And this is where a flowing layout is really important. If you have your layout firmly strapped down and then someone blows up the font, they are going to see some strange issues where the text no longer fits inside it’s container. For an example, just blow up the font (either using browser default, or by hitting ctrl++) on this site and see what happens to some of the headings to the right. Yech… that’s ugly.

So rest assured, in my next re-design I will be addressing this issue. The site will still be created so that it is perfectly viewable with a decent font size in an 800px window, but it will flow gratiously if you have a nice wide screen monitor.

Aside from the fixed vs. flowing debate, there is one thing that really aggravates me and that I think is almost a laughable oversite by many designers. They’ll build a site intending there to be no horizontal scroll at 800px, but they forget to take into account that the veritcal scrollbar takes up a small amount of space. The result is usally 1-2 characters cut off on the right of the screen, and the tiniest bit of horizontal scroll. You really need to make your site a little narrower than that. I generally use 770px. And when designing sites to be easily printed, or designing your print.css, be sure to be kind to the rest of the world that uses A4 instead of letter sized paper.

4 Responses to “Fixed Width”

Ed C. Says:

I think I’m with you Gregory. Give me a web page that will fit in a 800 pixel wide web browser any day (especially if the text is centered on the page). One reason that I dislike flowing text is that I have seen countless example where flowing text makes the page makes the text very difficult to read because of things like long one-line paragraphs. Another reason why I really don’t like it is if you jump between computers, or browsers, with different settings, things like hyperlinks may appear in different places on the different computers. This effects usability tremendously. I have clinked on the wrong link a number of times because I knew right where what I wanted was, only it wasn’t there because the page was using flowing text and the browser was set differently. It also makes its difficult to help someone over the phone or e-mail - something I need to do often as an academic librarian. I think flowing text websites often lead to lower readability. There is a reason why books, newspapers, and other print media have columns. It makes it so you don’t have to scroll your eyes (and/or head) too much - something that I need to do way to much on a many flowing text sites. Ironically - in contrast to Nielsen’s assertion that one reason to not use fixed width web sites is because it may cause people to have to resize their browser in order to read them - I had to resize my browser to comfortably and efficiently read Nielsen’s Top Ten Web Design Mistakes of 2005 flowing text web page.

Dave Harding Says:

The motovation for small column width in newspapers and other print media isn’t readability. The motovation is reducing whitespace after paragraph breaks. Whitespace is wasted paper. To demonstrate, here are two copies of the GPL:

http://gnuisance.net/tmp/gpl-columnless.pdf

http://gnuisance.net/tmp/gpl-columns.pdf

Like printed matter, websites should use columns with a fixed number of characters. 64 characters per line is the recomendation[1]. Is this even possible in HTML?

[1] This assumes justification, which HTML can only partially do.

Ed C. Says:

Dave, I won’t argue with you about weather or not the reasoning behind the columns is less white space or not. I honestly don’t know the original thinking behind it, so I’ll accept that you are correct.but I can certainly understand the white space argument. However, even if it isn’t the primary goal, it does lead to much better readability.

Dave Harding Says:

I agree that text columns shouldn’t be very wide. By not limiting the width of the text columns, web designers are making their pages less readable to lazy people with high screen resolutons. But people who don’t have high screen resolutions or are not lazy gain the advantage of having the web page customized to their needs or wants.