Horizontal Scroll

In the early days of the web, monitors were small. You can't quite appreciate that statement unless you have browsed the web on a Mac Color Classic with a 9" screen!

Horizontal scroll allowed people with minuscule monitors to view pages that were wider than their screens. And back then, in order to fit very much onto a page, you really had to make it wider than the smaller screens.

But requiring a large percentage of your site visitors to scroll in two directions to see your content is rude. Generally, about 40% of the site visitors to an average site (not a highly technical one, where screen sizes tend to average higher) will have the current "average minimum" screen size. This has been 800X600 for about two years now, and is on the verge of changing.

What that means is, your site, by one means or another, should be easy to view on a monitor that is only 800 pixels wide. In another year or so you will be able to increase that to 1024 pixels.

You have two strategies to handle monitor size issues:

  1. Fixed width design. This means (at the current time), a design width that is 780 pixels wide (giving 20 pixels on the side for the scrollbar, on an 800 pixel screen). This is the most predictable, and least time consuming method of addressing this issue.

  2. Flexible width design. The design stretches and moves to grow with the width of the browser window. Now, this has several issues:

  • No matter how carefully you design it, it will always have a problem of some elements not looking right, either because the screen is too narrow, or because someone stretched it out full size on a massive cinema display.
  • At wider widths, rows of text can be very difficult to read. The rule is about three alphabets wide, and on a very wide screen, your content can end up five to eight alphabets wide. This makes tracking from one row to the next hard to do.
  • Some items will get wider as the design is stretched, some will not. This means that column lengths will be increasingly mismatched as the width increases. It also means that you'll end up with unexpected white space, or worse, elements out of place, as the width changes.
  • You may not be able to view the design on your own screen at the width that someone else views it, so it may do unexpected things on their monitor that it does not do on yours.
  • It will take more time, and more experience, to get a reasonably predictable layout using flexible width design. And no matter how experienced you are, it will still do odd things sometimes.
  • Methods for setting minimum and maximum widths are not yet predictable across all major browsers.

I know designers who just have fits over fixed width designs, equating them with unprofessionalism. I know others who refuse to tolerate the unpredictability of flexible width designs, and who feel that they are simply not an economical choice. Still others could care less, as long as the design looks good and works good most of the time.

It is important to insure that your site performs for 95% or more of the people who will visit your site. So make sure that the width of your design will be friendly to their typical usage habits. If you make even 25% of your visitors scroll in two directions to see what you have, then your site will not be appreciated.

Written by Laura Wheeler