Web Design in a Nutshell, 3rd 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.

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 800 × 600 monitor—approximately 780 × 400 pixels. That’s not much room.

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 as a list of links down the left edge of the page) doesn’t fit, at least get it started in the first screen; hopefully users will scroll to see the remainder. If it is out of sight completely, it is that much more likely to ...