The expression originates from newspaper printing: broadsheet newspapers are folded in half, and in the newspaper rack, you first see the top half above the fold line. On websites, the term now serves as a reference point for visible content in web design., SEO and online advertising.
Above the fold can also extend beyond areas like the hero section and the header.
Anything that is only reachable by scrolling is called „below the fold.“.
Above the fold has no fixed pixel height
The problem for every web designer: There are countless different screens, window sizes, and zoom levels out there. This means that „above the fold“ can look different for every user.
Historical rules of thumb like 1000 x 600 pixels for the then standard resolution of 1024 x 768 are only interesting as a timestamp today. Even within the same device, the boundary shifts when the user changes the window size or shows and hides browser bars.
On mobile devices, the fold is a dynamic element. The address bar and toolbars expand and collapse as you scroll, changing the visible height. The CSS unit 100vh calculates with the maximum viewport height and thus cuts off content as long as the address bar is still visible. The newer viewport units SVH (smallest visible area), lvh (and biggest) CDH (dynamically adjustable) are the right solution for this. CDH Dynamically reacts to the expanding and collapsing of browser toolbars.
Practically, this means: whoever designs the above-the-fold area is always designing it for a specific device or group of devices. The question isn't „where is the fold,“ but rather „which fold counts for which target audience.“.
Above the Fold, Hero, Header, Viewport
Four terms are regularly confused, although they lie on different levels.
- Above the Fold is the area visible on page load without scrolling. Spatial category, not a component.
- Header is a fixed component at the top of the page, usually with a logo, navigation, and search. The header is in the above-the-fold area, but does not fill it.
- Hero Section is a design element directly below the header, often with a large-format image or video and a central statement. It is a possible inhabitant of the above-the-fold area, not the area itself.
- Viewport is the currently visible image section that moves with scrolling. Above the Fold is the state of the viewport at the time of page load, meaning the initial viewport.
Those who separate these levels can formulate statements like „the hero completely fills the above-fold area“ precisely, instead of „the hero is above the fold.“.
Don't users scroll anyway?
Yes, but unevenly. Eyetracking studies by the Nielsen Norman Group in 2010 showed about 80 percent of viewing time above the fold. The follow-up study in 2018 found about 57 percent above the fold and 74 percent within the first two screenfuls up to 2160 pixels. The share has decreased because scrolling has become commonplace. However, the basic pattern remains: over 42 percent of viewing time is spent on the top 20 percent of a page, and over 65 percent on the top 40 percent. In 2013, Chartbeat measured only four to nine seconds until the first scroll attempt.
These numbers reveal two pitfalls. The first is the „Illusion of Completeness“: If the visible area appears self-contained, users assume they've seen everything. In an NNG study, 75 percent didn't realize the page continued. The second is the „False Floor“: Full-viewport heroes, dominant dividing lines, or large empty spaces visually create a page end where there isn't one.
The consequence: Above the fold is no longer the sole deciding factor, but it remains the area that generates the most attention. It must solve two tasks: conveying the central message and visibly signaling that content continues below.
What belongs in the visible range
The above-the-fold section should contain the page's central value proposition and a primary call to action, nothing more. The most common mistake is overcrowding: long blocks of text, multiple images, simultaneous animations, and several competing CTAs cognitively overload the user and additionally slow down loading times. The opposite extreme, an empty full-viewport hero with just one line of text, can lead to early bounces because there's nothing to invite further reading.
An effective middle ground against the false floor effect is to consciously cut off the next section. If subsequent content begins a few pixels from the bottom of the initial viewport, it subtly signals: "this continues." A full-viewport hero that ends precisely at the fold line does not do this.
Regarding the design process order: Mobile-first design builds the above-the-fold area from the smallest screen upwards. The reverse approach, scaling down a desktop layout for mobile, regularly produces above-the-fold areas where neither the message nor the CTA is fully visible on a smartphone.
Above the Fold and Largest Contentful Paint
Largest Contentful Paint (LCP) measures when the largest visible element in the initial viewport has rendered and is part of the Core Web Vitals. Crucially for the context: LCP exclusively evaluates elements within the above-the-fold area. Anything that appears only after scrolling is not an LCP candidate. The choice of above-the-fold composition thus directly determines which element is measured.
The thresholds are fixed: ≤ 2.5 seconds is considered good, 2.5 to 4 seconds requires improvement, and over 4 seconds is considered poor. Typical LCP elements include hero images, large block-level text, or the poster frame of a video.
This makes the design decision technical: a text block as an LCP element renders faster than a large photo because the text is already present with the stylesheet, while the image still needs to be loaded. Autoplay hero videos are unfavorable for LCP because the video asset is heavy and blocks the critical rendering path. A practical approach: a static, compressed poster image as the LCP element, with the video being loaded only after the initial paint.
Online advertising visibility
In an advertising context, „above the fold“ is no longer just a positional description but is tied to a measurable condition: the viewable impression according to the 2014 IAB/MRC standard. It applies when at least 50 percent of ad pixels are in the visible browser area for at least one continuous second. For in-stream video, 50 percent of pixels for two seconds apply. For large-format displayDisplay From 242,000 pixels, 30 percent is enough for one second because such formats will practically never fully fit into the viewport.
This shifts the criterion away from the layout concept of „ad above the fold“ towards actual visibility for the user. An ad can be placed above the fold and still not count as viewable, for instance, if the page is scrolled past too quickly to reach the one-second threshold. Conversely, an ad placed lower down can become viewable through scrolling. With this knowledge, viewability reports read more precisely: the value measures not placement, but fulfilled visibility conditions.
Above the Fold in SEO
On January 19, 2012, Google introduced a filter called the Page Layout Algorithm (also known as „Top Heavy“) that demotes pages where the above-the-fold area consists predominantly of ads or where relevant content is pushed down by large ad blocks. Refreshes followed on October 9, 2012 (Top Heavy 2, affecting 0.7 percent of English-language search queries) and February 6, 2014 (Top Heavy 3). According to Google, the filter targets pages with „only a small amount of visible content above-the-fold.“.
In practice, this means that if ads dominate the initial viewport and the main content is only accessible by scrolling, that's a ranking risk, not a layout detail. Furthermore, through mobile-first indexing, Google primarily evaluates the mobile view. The relevant above-the-fold zone for SEO is therefore that of the smartphone, not the desktop. An above-the-fold area that looks clean on desktop can become critical on mobile due to shifted ad blocks or large consent banners.