Web Design in a Nutshell, 2nd Edition

Designing “Above the Fold”

Newspaper editors have always designed the front page with the most important elements “above the fold,” that is, visible when the paper is folded and sitting in the rack.

Likewise, the first screenful of a web site’s homepage is the most important real estate of the whole site, regardless of whether the page is fixed or flexible. It is here that the user makes the decision to continue exploring the site or to hit the “Back” button and move along. Web designers have adopted the term “above the fold” to apply to the contents that fit in that important first screen. My personal experience shows that users tend not to scroll beyond the first page, even when the vertical scrollbar is visible. Thus, the first screen bears the entire burden of enticing users to stay at your site.

As discussed throughout this chapter, a “screenful” can be quite different depending on the resolution of the monitor. To play it absolutely safe, consider the space available for the lowest common denominator 640 × 480 monitor—approximately 600 × 300 pixels. That’s not a lot of space!

Some elements you should consider placing above the fold include:

• The name of the site.

• Your primary marketing message.

• Some indication of what the site is about. For instance, if it is a shopping site, you might place the credit card logos or shopping cart in the top corner to instantly communicate that “shopping happens here.”

• Navigation to other parts of the site. If the entire navigation device (such ...