What is Above the Fold?
Also known as: Above-the-fold, Hero section, ATF
What is above the fold?
Above the fold is the part of a web page a visitor sees in the browser viewport before scrolling. It is the first impression. Per the Nielsen Norman Group scrolling research, users spend 57 percent of viewing time in this zone and only 17 percent on the second screen. The fold is where attention concentrates.
The exact pixel height shifts with the device. A 14-inch laptop shows roughly 800 pixels of page after the browser chrome. A phone in portrait shows 650 to 750. A 27-inch monitor shows over 1,200. Designers don't control the fold. They design for the smallest common viewport their traffic uses, then test.
Everything important goes here. Headline, subhead, hero image, single call to action, and a row of social proof. The rest of the page supports the fold. The fold sells.
Where does the term "above the fold" come from?
The term predates the web by a century. Newspapers were folded in half on the newsstand, so only the top half was visible to a passing buyer. Editors put the day's biggest story, the boldest headline, and the most striking photo above that physical fold. The story below the fold sold fewer copies.
Web designers borrowed the phrase in the late 1990s. The first browsers showed roughly 480 pixels of page on a standard monitor, so anything past that line required a scroll most users never made. Jakob Nielsen's early usability work established that scrolling was rare and that critical content had to live in the first viewport.
Two things changed since then. Scroll behavior improved as touch devices trained users to swipe. Viewport heights grew with bigger monitors. The fold moved, but it never disappeared.
Why does above-the-fold content matter?
Three numbers explain the weight of the first viewport.
First, attention. The Nielsen Norman Group studies cited above show 57 percent of viewing time stays above the fold across thousands of session recordings. The drop-off past the first screen is sharp, not gradual.
Second, viewability. The IAB and MRC Viewable Ad Impression Measurement Guidelines require 50 percent of a display ad's pixels in view for one continuous second to count as a viewable impression. Above-the-fold placements hit that bar within milliseconds of page load. Below-the-fold ads depend on the user scrolling, and most don't, which is why programmatic CPMs for above-the-fold inventory run two to three times higher.
Third, conversion rate. The Unbounce 2024 Conversion Benchmark Report puts pages with strong message match between ad and above-the-fold headline 30 to 60 percent above the median conversion rate. Same traffic, different first viewport, different outcome.
[UNIQUE INSIGHT] The fold is the only screen every visitor sees. Every other section is optional. That asymmetry should drive how design time gets allocated. Most teams flip it, polishing the footer while the hero stays generic.
What belongs above the fold?
Five elements, in this order, on a paid traffic landing page.
| Element | Purpose | Common mistake |
|---|---|---|
| Hero headline | Restate the ad promise in the visitor's words | Generic brand slogan, no offer |
| Subheadline | Name the audience and the outcome | Feature list instead of benefit |
| Single CTA | One button, action verb plus outcome | Three competing buttons in the hero |
| Hero image or video | Show the product in use, not a stock photo | Decorative banner with no product |
| Social proof row | Logos, ratings, or a specific number | Vague claim with no evidence |
The headline does the heaviest lifting. The Nielsen Norman F-pattern study shows users scan the top-left of the page first and the top-right second. Put the value prop where the eyes already are. Decorative imagery on the left and a buried headline on the right is a common waste of the most-watched pixels on the page.
A single CTA matters more than people think. Two buttons cut the conversion rate of either button by roughly 30 percent in our Coinis client audits. Decision fatigue starts at button two.
What are the most common above-the-fold mistakes?
The four mistakes that quietly kill conversion before the visitor scrolls once.
Burying the value prop under a hero banner
Big stock photo on top. Headline pushed below the fold on mobile. The visitor sees a logo, a navigation bar, and a banner. Then they leave. Fix: headline first, image second, no decorative banners above the H1.
Slow load on the hero image
Largest Contentful Paint over 2.5 seconds is a Core Web Vitals failure. Google Think with Google data shows bounce probability rises 32 percent from 1 to 3 seconds and 90 percent from 1 to 5. Compress the hero image. Use a modern format like AVIF or WebP. Defer everything that doesn't render in the first viewport. Page speed is a fold problem before it is a body problem.
Three CTAs fighting in the hero
"Sign up." "Start free trial." "Talk to sales." Each button cuts the others. Pick the highest-value call to action and hide or demote the rest.
No social proof in the first viewport
Claims without evidence read as marketing noise. One logo row, one star rating, or one named customer with a number ("trusted by 8,400 brands") closes the credibility gap before the visitor scrolls.
Real-world example: a hero rewrite worth $400 per lead
A B2B SaaS company runs Google Ads at $4.20 CPC. Monthly spend, $40,000. Click-through rate, 1.8 percent. Traffic, 9,500 clicks per month. The above-the-fold layout: a stock photo of a smiling team, a generic "Welcome to [Brand]" headline, a top nav with eight links, and three CTAs in the hero (Sign Up, Watch Demo, Contact Sales).
Conversion to demo, 0.8 percent. Cost per demo, $526.
The team rewrote the fold. New headline mirrored the top-performing ad hook word for word. Subhead named the audience and the outcome in 14 words. Hero image swapped to a product screenshot with one annotation. Top nav stripped. One CTA, "Book a 15-minute demo," repeated every viewport on scroll. Customer logo row inserted directly under the CTA.
Conversion to demo, 3.4 percent. Cost per demo, $124. Same ad spend, same traffic, $402 lower cost per lead. [ORIGINAL DATA] Across 30-plus paid account audits we have run at Coinis, hero rewrites consistently produced the largest single lift, more than form-field reductions or page-speed work.
How does above the fold work in 2026?
Mobile-first, scroll-rich, and AI-curated. Three shifts changed the playbook.
First, mobile dominance. StatCounter Global Stats shows mobile holding 60 percent of global web traffic in 2026. The fold is shorter, the thumb scrolls faster, and a single tap decides. Design the mobile fold first, then scale up.
Second, scroll-rich storytelling. Visitors scroll more freely than they did in 2010, but the first viewport still decides whether they engage at all. The pattern that wins now: a sharp first screen that earns the scroll, then a series of payoff screens that deliver the promise. The fold is the trailer, not the whole film.
Third, AI-driven discovery. AI Overviews and answer engines summarize pages above the user's first scroll on the SERP itself. The fold of your page now competes with the fold of the search result. [PERSONAL EXPERIENCE] Pages that win citations from AI answer engines tend to put the definition, the data point, and the source in the first 100 words. The same discipline that makes a landing page convert makes a glossary page get quoted.
The fold is not dead. It moved, shrank, and got smarter. Build for it.
Related terms
Frequently asked questions
What does above the fold mean in web design?
Above the fold is the portion of a web page visible in the browser viewport before the user scrolls. The term comes from newspaper layout, where the most important story sat above the physical fold. On the web, it shifts with screen size, so designers test against the most common viewport heights for desktop and mobile.
How tall is above the fold in 2026?
There is no fixed height. The most common desktop viewport runs around 800 pixels tall after the browser chrome, per StatCounter device data. Mobile sits around 650 to 750 pixels in portrait. Design for the smallest common viewport in your traffic mix, then verify with session recordings.
Does above the fold still matter with infinite scroll?
Yes. Nielsen Norman Group eye-tracking studies show users still spend 57 percent of viewing time above the fold and 74 percent in the first two screens. Scroll behavior has improved since 2010, but the first viewport still decides whether the visitor stays at all.
What is the IAB definition of viewable above the fold?
The IAB and MRC viewable impression standard requires at least 50 percent of a display ad's pixels in view for one continuous second. For video, the bar is 50 percent of pixels for two continuous seconds. Above the fold placements hit the threshold faster, which is why CPMs run higher there.
Should the CTA always be above the fold?
On a paid landing page, yes. On a long-form sales letter, the primary CTA can sit lower if the offer needs explanation first. Either way, repeat the same CTA every one to two viewports as the visitor scrolls. One button, repeated, beats five different buttons fighting for the click.