Glossary

Why Above the Fold Is a Behavior, Not a Pixel Height

Taras Shynkarenko
Taras Shynkarenko
•Updated: •7 min read
Why Above the Fold Is a Behavior, Not a Pixel HeightWhy Above the Fold Is a Behavior, Not a Pixel Height

TL;DR, Quick Answer

7 min read

The fold is a newspaper term for the crease in a folded broadsheet, and it survives because screens still end somewhere. Nielsen Norman Group eyetracking of 120 participants found 57% of viewing time above the fold in 2018, down from 80% in 2010, with 74% inside the first two screenfuls. Chartbeat data published in Slate in 2013 found the median reader stops around halfway. People scroll, but attention thins fast, and a responsive design has as many folds as it has breakpoints.

What does above the fold mean?

Content above the fold is whatever a visitor can see without scrolling, which makes it a property of their screen rather than a number you can write into a design file. The term is borrowed from broadsheet newspapers, which were folded in half for display on a newsstand so that only the top half of the front page faced a buyer. Editors put the story that had to sell the paper up there.

The web inherited the idea because screens still end somewhere. Nielsen Norman Group's Amy Schade put the mechanism plainly in 2015: "What is visible on the page without requiring any action is what encourages us to scroll." The fold does not stop people. It decides whether they bother.

Why is a fixed pixel height the wrong way to define the fold?

Because there is no single fold to define. Schade's argument against a fixed number is direct: "A responsive design may have 2, 3, 4, or more different folds, specific to the devices and screen sizes that the design was optimized for." Any one value you pick is correct for a minority of your visitors and wrong for everyone else.

The height available to your content moves for reasons that have nothing to do with your layout:

  • Browser chrome. Toolbars, tab strips and bookmark bars eat different amounts on every browser and OS.
  • The mobile address bar, which collapses on scroll, so the viewport is physically taller after the first swipe than it was before it.
  • OS-level display scaling and the visitor's default font size.
  • Zoom level, which is nonzero more often than designers assume.
  • Device orientation, which halves or doubles the number in one rotation.

Treat the fold as a distribution rather than a line. The useful question is not "where is the fold" but "what does the 25th percentile of my visitors see before they scroll", and that is answerable from your own data instead of a blog post's number.

What does the research say about scrolling above the fold?

Nielsen Norman Group ran eyetracking across news, ecommerce, blog, FAQ and encyclopedic pages, with 120 participants on 1920 by 1080 screens, gathering over 130,000 eye fixations. Therese Fessenden published the results on 15 April 2018. The headline is that people do scroll, and that attention still stacks heavily at the top.

Region of the pageShare of viewing time
Above the fold57%
First two screenfuls (to 2160px)74%
First three screenfuls81%
Top 20% of the pagemore than 42%
Top 40% of the pagemore than 65%

The change over time is the part worth arguing about. In NN/g's 2010 study, run on 1024 by 768 monitors, 80% of viewing time was spent above the fold. By 2018 that was 57%. Scrolling became normal, so the fold got less absolute and more relative, but it did not stop mattering: more than 65% of the above-the-fold viewing time was concentrated in the top half of the viewport, which means attention thins inside the first screen, not just after it.

Schade's 2015 measurement of the boundary itself is the sharpest version of the effect. The 100 pixels just above the fold were viewed 102% more than the 100 pixels just below it, and across her data the average difference in how users treat information above versus below the fold was 84%. A single pixel row of movement changes very little; crossing the boundary roughly doubles the odds that content is seen.

Above the fold, then and now
2010 study80%
2018 study57%
Time spent above the fold fell from 80% to 57% between NN/g's two eyetracking studies.

How far down the page do readers actually get?

Farhad Manjoo published Chartbeat's scroll data for Slate on 6 June 2013, and the numbers have aged better than most web statistics because they describe a behavior rather than a technology.

BehaviorSlateChartbeat network
Arrive and leave without engaging38%not stated
Never scroll at allabout 5%about 10%
Median reader reachesabout 50% of the articleabout 60%
Get past the 1600th pixel25%not stated

Manjoo's framing was the memorable part: for every 161 people who landed on the page, about 61 were already gone, and of the 100 who stayed, five would never scroll. The finding he buried is the one that should change behavior. There is a very weak relationship between scroll depth and sharing, so the articles that get tweeted most are not the articles that get read deepest. Anyone treating shares as evidence that content was consumed is measuring a different thing entirely.

Two things follow from putting the NN/g and Chartbeat numbers side by side. Most people scroll, so hiding everything important in the first 600 pixels is unnecessary. And attention decays steeply, so the order of your content matters far more than whether a given element clears an imaginary line. If you want to know where your own readers stop rather than where Slate's did in 2013, that is what scroll depth tracking is for.

A person scrolling on a phone past the first screen, past the point where a false floor would have stopped them.

What is a false floor, and why does it cost more than a tall page?

A false floor is the failure mode that the fold actually causes. Kim Flaherty named it the illusion of completeness at NN/g on 17 January 2016: "The illusion of completeness happens when the visible content on the screen appears to be complete, when in fact more information exists outside of the viewable area."

In one usability test she describes, six of eight participants failed to scroll down a page at all, and 75% of participants became frustrated after entering personal information only to find the service was not available in their area, because they never realized more content existed below. The page was not too long. It looked finished at the boundary.

The fix is visual rather than structural. Let something cross the line. A heading cut in half, an image that continues past the edge, a row of cards where the fourth is clipped: all of them tell the eye that the page has not ended. Full-viewport hero sections with a clean horizontal edge at the bottom are the single most reliable way to manufacture a false floor.

Flowsery
Flowsery

Start Your 14-Day Free Trial

Real-time dashboard

Goal tracking

Cookie-free tracking

How should viewport variety change what you put up top?

Stop designing for the fold and start designing for the first screen of your actual traffic. Three practical moves:

  • Measure your own viewport distribution. window.innerHeight at page load, bucketed and reported, tells you the real shape. Combine it with visualViewport if you care about zoom and on-screen keyboards. A heatmap segmented by device class shows the same thing spatially, which is usually easier to argue with; our guide to reading a website heatmap covers how to avoid over-reading one.
  • Use viewport units that know about the address bar. CSS offers svh, lvh and dvh alongside vh precisely because the mobile viewport changes size during a scroll. A hero sized at 100vh overflows on the small viewport and leaves a gap on the large one.
  • Put the promise above the fold, not the whole page. The first screen has one job: let someone confirm they are in the right place and see that there is more. Everything else can live below, because the research says they will get there.

Speed interacts with all of this. Content that is technically above the fold but has not painted yet is not above anything, which is why Largest Contentful Paint is scored on the largest element inside the viewport rather than on the page as a whole. A hero image that arrives at four seconds is below the fold in every way that matters to the visitor. If you are working through a specific page, our walkthrough of how to analyze a landing page puts these checks in order.

Frequently asked questions

Does the fold still matter now that everyone scrolls?

Yes, but as a weighting rather than a wall. NN/g measured 57% of viewing time above the fold in 2018 and a 102% difference between the 100 pixels just above the boundary and the 100 just below it. People scroll past it; they do not pay equal attention on both sides of it.

What pixel height is the fold?

There is not one. A responsive design has as many folds as it has target screen sizes, and browser chrome, zoom, display scaling and the collapsing mobile address bar move the boundary again on every device. Measure your own visitors instead of adopting a number.

Should the call to action always be above the fold?

Only if the visitor has enough information to act by then. On a page selling something familiar, a CTA in the first screen works. On a page that has to explain something first, an early CTA gets ignored and the useful placement is after the argument. Repeating it is usually better than moving it.

How much content should be in the first screen?

Enough to answer "am I in the right place", plus a visible signal that the page continues. NN/g found more than 65% of above-the-fold attention lands in the top half of the viewport, so the top half of the first screen is doing most of the work regardless of how much you put there.

Do long pages perform worse than short ones?

Not by length alone. Chartbeat's data showed the median reader stopping around halfway through an article, which penalizes padding rather than length. A long page with the value front-loaded outperforms a short page that looks finished at the fold.

A newspaper folded in half on a newsstand, showing only its top headline, the origin of the term above the fold.

Where does the term above the fold come from?

From newspapers. Broadsheets were folded in half for display, so only the top half of the front page was visible to someone walking past a newsstand, and the strongest headline went there. The web borrowed the word when screens turned out to have the same property.

How much less attention does content below the fold get?

Nielsen Norman Group found the 100 pixels just above the fold got 102% more views than the 100 pixels just below it. Across Schade's full data set, the average gap in attention above versus below the fold was 84%. Crossing the boundary roughly doubles the odds that a visitor notices something.

Why does the fold move on a phone after you start scrolling?

The mobile address bar collapses once a visitor scrolls, so the viewport is physically taller after the first swipe than it was on load. The same page has one fold when it opens and a different one a second later, on the same phone. That is one more reason a single pixel number cannot describe the fold.

What is the illusion of completeness?

Kim Flaherty's term for a page that looks finished at the edge of the screen even though more content sits below it. In one NN/g test she describes, six of eight participants never scrolled at all, and 75% of participants got frustrated after entering personal information only to find the service was not available in their area. The page had not ended; it just looked like it had.

Do social shares prove people read an article?

Chartbeat's data behind Farhad Manjoo's 2013 Slate piece says no. The relationship between scroll depth and sharing was very weak, and the articles that got shared the most were not the ones read the deepest. Share counts measure something other than how far someone actually read.

Was This Article Helpful?

Let us know what you think!

See us more often in Google

One click marks Flowsery as a preferred source, so our articles sit higher in your Top Stories, AI Mode, and AI Overviews.

Before you go...

Flowsery

Flowsery

Revenue-first analytics for your website

Track every visitor, source, and conversion in real time. Simple, powerful, and cookie-free.

Real-time dashboard

Goal tracking

Cookie-free tracking

Related Glossary Terms

Related Articles