Motive [Home].Glossary.

Guides

The Motive Web Design Glossary

above-the-fold, fold, scroll-line, canvas, screen size

The part of a webpage that is visible in the web browser window when the page first loads is described as being ‘above-the-fold’.

A more appropriate, medium-specific equivalent to ‘above-the-fold’, is ‘before-the-scroll’: the portion of a webpage that is visible without scrolling.

‘Fold’ is a reference to the area of a newspaper that is visible when folded for display in a news stand. As the fold may be the only portion of the newspaper visible, it typically contains the masthead identifying the newspaper and a key image or heading from the lead story.

The first-fold of a webpage is typically used to display:

The concept of a fold was seen as key in the early days of the web, based on the belief that only content placed in this area of the page – usually the first 300 vertical pixels – could be guaranteed “eyeballs”. Over time, people have become more accustomed to scrolling, however the first fold continues to be highly sought-after by advertisers.

Where is the fold?

Where the fold falls depends on how a person browses the web: the physical size of the screen they are using; and the resolution that the screen has been set to.

Minimum first-fold dimensions

The table below list the first-fold dimensions, in pixels, for popular web browsers (up to version 6 IE and NN) accounting for maximum browser chrome and system menu bars (for WIN and Mac), by monitor size and default screen resolution.

As minimum values, content placed within this area of a webpage is guaranteed to be seen by people browsing with their monitor set to the listed resolution.

Monitor size Typical resolution
(w × h)
Width
(with scrollbar)
Width
(no scrollbar)
Height
(first fold)
15" monitor (4:3) 640 × 480 584 599 290
17" monitor (4:3) 800 × 600 744 759 410
19" monitor (4:3) 1024 × 768 968 983 578

Key

Default visible screen dimensions (thumbnail)First-fold dimension guide

Source: Webmonkey

CRT vs. LCD resolution

There are two main types of technology used to create computer monitors.

In addition to the differing aspect ratio, the other major difference between the monitor technologies is the issue of optimal screen resolution.

While CRT monitors can be set to a range of different resolutions with minimal impact on display, LCD monitors typically have only one optimal (or native) resolution. When set to a non-native resolution, text and images on an LCD monitor may appear ‘blurry’ or ‘fuzzy’.

Digital Trends provides a handy table that lists the pixel dimensions of LCD monitors.

Related terms: banner ad, browser chrome, default, pop-up window.

 

Motive Web Design Glossary Trivia