Above the Fold

In a newspaper, the most valuable space is "above the fold"--the top half of the front page. That's what people can see when the paper is folded up in a newsrack. People use the information above the fold to help them decide whether to buy a paper, so it has to be the most enticing content in the whole newspaper.

The same philosophy applies to Web site design. Whatever shows up on a page without scrolling has to sell the page--or the site. You must make sure that when people see that first screenful, they scroll or use your menu rather than hitting their "back" button.

In a newspaper, the editor knows exactly what will appear above the fold. He (with the publisher) controls the typeface, print size, ink colors, and paper size. Not so in Web site design. Your site will look different on a Macintosh than it does on a Windows PC or a Linux computer. Some viewers will have their screens set for 32-bit color, others for 8-bit color. Some will have the fonts you expect loaded, and others won't. Some will be 640x480 resolution (or even less), and others will have 1600x1200 resolution (or even more).

Web designers take one of two approaches. The easy way is to use fixed-width tables to try and control the amount of information presented. With a bit more work, however, a site can be designed that stretches to fit the window or screen. Try it with this site. Make your browser window narrower. Now maximize it to fill the whole screen. Notice how the page grows and shrinks?

Well, what's wrong with taking the lazy way and making a fixed-width site? If you check your Web logs and find out most of your users have 800x600 screens, why not just make your site fit that screen size? Why not optimize the number of characters per line according to typographical rules for ease of reading? There are a lot of things wrong with that approach!

1. Some people will have lower resolution. Especially people with bad eyesight that want the text enlarged. You will force those people to scroll sideways to see your whole page. Unless your site is very compelling, they'll just leave, and that's the last thing you want.
2. Some people will have higher resolution. Those folks will see a whole bunch of empty space in a column down the right side of your page (or sometimes both sides). You've just wasted a lot of valuable "above the fold" space by filling it with blank space, and you've forced people to scroll down to get content they could have had in the first screen.
3. You can't control characters per line anyway. Almost all Web browsers let viewers increase and decrease text size. This allows people with old tired eyes to enlarge their text (I do this myself near the end of the day), and people with good eyes and/or big screens to shrink their text to fit more of it. Even forcing the issue with style sheets doesn't work with newer browsers like Netscape 6 with the Gecko engine. This is a good thing. The web was designed to adapt to the viewer, not the other way around. It makes a designer's work a bit harder, but the payoff is far greater usability.

Some Web designers use design tools that force them into a fixed-width design. I think they need to pick some new tools. I wrote my own site generator and I use an HTML editor to code the content directly. You can always make pages that stretch and shrink, if you're willing to put in just a little bit more effort, and that puts the maximum possible amount of information above the fold--right where you want it.