The Motive Web Design Glossary
above-the-fold, fold, scroll-line, canvas, screen size
On this page
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:
- branding: identifying who owns the website;
- positioning statement: identifying the website content/subject matter;
- navigation: typically menus and a search tool that people can use to get around the website; and
- advertising.
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
- Monitor Size is a physical measurement: the length of a diagonal line drawn between the top-left and bottom-right corner of the screen.
- Resolution is the number of horizontal and vertical pixels displayed on a screen.
Computer monitors have only one monitor size, but may be run at different resolutions.
The smaller the resolution, the larger the content on the screen appears. For example, the text of a webpage will be larger when a monitor is set to a resolution of 800 × 600 pixels than when the monitor is set to a resolution of 1024 × 768 pixels. - Aspect ratio describes the horizontal and vertical proportions of a monitor.
- Vertical and horizontal scrollbars are shown when a webpage extends beyond the boundaries of the browser window.
First-fold dimension guide Source: Webmonkey
CRT vs. LCD resolution
There are two main types of technology used to create computer monitors.
- Cathode Ray Tube (CRT) monitors are the large bulky monitors that are gradually being phased-out of production, as they are costly to manufacture.
CRT monitors, being based on the technology used to create standard definition television screens, usually have an aspect ratio of 4:3. - Liquid Crystal Display (LCD) monitors are the successor to CRT displays.
LCD monitors are less-bulky and are cheaper to manufacture. As the computer monitor is increasingly at the centre of consumer entertainment systems, and is used not only for Word processing and browsing the web, but also for gaming and watching movies; the aspect ratio of LCD monitors is trending toward 16:9 or 16:10.
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.
banner ad, browser chrome, default, pop-up window.
References and further reading
- Computer screens getting bigger (Jacob Neilsen, useit.com)
7 May 2012: The 1024 × 768 pixel display became the leading monitor size in 2004 and has only just been dethroned by screen resolution of 1366 × 768, according to StatCounter. - As the page scrolls (User Interface Engineering)
Users are willing to scroll. However, they’ll only do so if the page provides strong cues that scrolling will help them find what they’re looking for. - Browser display statistics (w3schools.com)
Display resolution trends for people viewing teh w3schools website. As at January 2009, 57% were running their monitors at a resolution higher than 1024 × 768 pixels. - CRT vs. LCD monitors: Pros and cons (Mark Kyrnin, About.com)
Comparing the merits of CRT and LCD display technologies. - Blasting the myth of [the importance of] the fold (Milissa Tarquini, Boxes and Arrows)
24 July 2007:It is clear that where a given item falls in relation to the fold is becoming less important.
- Eyetrack III: What we saw through their eyes (Steve Outing and Laura Ruel, Poynter Institute)
Webpage layout and design can be evaluted mechnically by analysing where a person looks when browsing a website. The emphasis of this research is on evaluating use of news websites, but the ideas and principles are applicable to the design of most content websites. - LCD resolution: When bigger is actually smaller (Jeff Fila, Digital Trends)
Although LCD monitors come in larger sizes they typically only have one optimal resolution. - Screen size tester (anybrowser.com)
Tool/checker for opening a webpage in a range of standard window sizes. - Scrolling and scrollbars (Jacob Nielsen, Usability.com)
Common usability issues with scrollbars. Scrollbar graphic user interface conventions, including example of confusing and effective custom scrollbar design. - Sizing up the browsers: Canvas
size (Webmonkey)
Comprehensive listing of canvas sizes by browser and platform, and a selection of Photoshop browser chrome templates. - Scrolling research report v.2 (ClickTale)
Oct 2007: User research on scrolling behaviour.
Glossary A-Z