Open a site on your phone and you get maybe 600 pixels of it before anything needs scrolling. That visible chunk is what people mean by above the fold. Its size comes from the browser’s usable vertical space, which shifts with the device, the window, and how much room the browser’s own bars are taking up.
It carries less weight than it used to. Nielsen Norman Group’s eye-tracking work put 80% of page-viewing time above the fold in 2010, and by 2018 that share had fallen to 57% (Nielsen Norman Group, 2018). People scroll now. They did not always.
What Is Above the Fold?
Nothing folds on a screen. The boundary gets set by viewport height, the vertical space a browser actually hands to the page, and page length has no say in it. A short contact page and a 6,000 word guide both open with the same amount visible.
Someone on a widescreen monitor might take in a headline, a hero image, a button, and the top row of whatever sits underneath. On a phone held upright, that same layout shows the headline and part of the image.
Which is why designers point at the viewport rather than a pixel number when they talk about where the fold lands.
It is the first screen view, nothing else. Not the full page, not a fixed height, not a trend you can opt out of.
Where Does the Term Above the Fold Come From?
Newspapers. Broadsheets were folded in half to sit on a rack, so editors put the top half of the page to work with the headline and the photo meant to move copies that day. Anything under the crease had to fight for a second look, because a person walking past the stand never saw it.
Web designers took the phrase over once browsers became where people checked the news. The mechanics did not transfer cleanly. A paper crease is fixed by the size of the sheet, while a viewport changes with every device, so the borrowed term now describes something far less stable than it originally did.
Above the Fold vs Below the Fold
Everything in that first screen view is above the fold. Everything else, the part a visitor only reaches by scrolling, sits below it. The split decides what a page leads with, since one zone gets seen no matter what and the other has to be worth the effort.
| Attribute | Above the Fold | Below the Fold | Design Intent |
|---|---|---|---|
| Visibility | Seen on page load | Requires scrolling | Front-load the pitch |
| Typical content | Headline, hero image, CTA | Details, testimonials, footer | Support the decision already made |
| User attention | Highest and fastest | Lower, more selective | Reward continued reading |
| Common risk | Overcrowding with ads or clutter | Being ignored entirely | Balance density against depth |
Both halves can fail on their own. A weak first screen never earns the scroll, and a strong one followed by filler wastes it.
What Determines the Above the Fold Line on a Screen?
Viewport height, and nothing else. That is whatever remains of the screen once the browser’s own interface has taken its cut. A 200 pixel page and a 20,000 pixel page put the fold in the identical spot at first paint.
Viewport Height and Browser Chrome
Browser chrome means the address bar, the tabs, the toolbars. All of it comes out of the height a page gets to use. Design at a small screen resolution and you are already behind before chrome enters the math.
Things that quietly eat the rest:
- The address bar and search field
- Mobile bottom toolbars and tab switchers
- Cookie prompts and notification banners stacked over the page
- Sticky announcement bars nobody remembers approving
Pile up two or three of those and the real fold ends up noticeably higher than the mockup promised.
Historical Resolution Benchmarks
Tracking common resolutions has been part of the job for decades, mostly to settle arguments about where a headline or a button should land. The current picture:
- 1920×1080 is the single most common resolution worldwide, holding a 10.77% share of all recorded screens (StatCounter, August 2026)
- On desktop-only traffic it leads far more clearly, at 22.22% (StatCounter, August 2026)
- 393×852 is the CSS viewport on an iPhone 15, even though the physical display renders 1179×2556 pixels (device viewport benchmarks, 2025)
That third figure catches people out constantly. Physical resolution and usable viewport are two different measurements, and mixing them up produces a first screen that looks right in a screenshot and cramped in a hand. Media queries are the normal answer now, adjusting the layout across those benchmarks instead of betting on one height.
What Content Belongs Above the Fold?
A headline, some kind of hero visual, the main button, and the navigation. Less a rule than what usually survives the internal argument about what matters, and all of it competing for the same two or three seconds.
Headline and Hero Image
The headline says what the page is for, in words nobody has to decode. Near it, usually below or off to one side, sits the hero image, which sets the tone before a single word gets read.
Pairings that work state the offer in under ten words and commit to one visual instead of three competing ones. They also leave obvious room for the button, which sounds too basic to mention until you notice how often the button gets squeezed out of frame.
A mediocre headline gets forgiven when the image explains the product fast. The reverse almost never happens.
Primary Call to Action
This is where a button collects the most eyes for free. Placement beats color and copy at this stage, which is an unfashionable thing to say in a room full of people testing shades of green.
A call to action sitting underneath competing content gets skipped no matter how well it was designed. Keep it inside the first screen, with some visual separation from the text around it. If it lands after three paragraphs and has to fight secondary links for attention, something went wrong earlier in the layout.
Navigation Placement
Menus go at the top because that is where people look for them, and the sites that experiment with hiding them usually walk it back. A menu also shows what else exists before a visitor commits to scrolling, and search, cart, and account links need to stay reachable from anywhere on the page.
Simpler tends to win up there. Basecamp tested a simplified, icon-led version of its own above-the-fold layout and sent 14% more visitors to the signup page as a result (37signals).
How Above the Fold Affects User Attention and Behavior
Most of the judgment a visitor makes happens before any real reading does. You can watch it in how their eyes move across the screen, and you can watch it in whether they leave without scrolling once.
Eye Tracking and Reading Patterns
Eye tracking research from Nielsen Norman Group shows people scanning rather than reading line by line. The F-pattern reading shape is the one that keeps turning up: a sweep across the top, a slide down the left edge, then shorter sideways bursts the further down attention travels. Nearly all of that happens in the first screen view.
Banner blindness complicates it. Visitors have trained themselves to ignore anything ad-shaped, and that training does not stop to check whether the thing is actually an ad. Style a real button like a banner and it disappears.
Bounce Rate and Time on Page
Bounce rate and time on page both react to whatever loads first. A cluttered or slow first screen pushes bounce up before a visitor has evaluated anything, while a clean one buys enough time for someone to scroll far enough to convert.
Fixing this rarely calls for a redesign. Small changes at the top of the page move both numbers more than a full homepage rebuild does, and they are much easier to get approved.
How Google Treats Above the Fold Content
There is no penalty for any particular fold height. Google did go after above-the-fold content directly once, and it still shapes rankings today through speed measurement.
The Page Layout Algorithm
The Page Layout Algorithm launched on January 19, 2012, aimed at sites that buried real content under ad blocks. It affected less than 1% of English-language search queries (Google Search Central, 2012), which sounds small until you were one of those sites watching visibility vanish inside a day.
The pattern it caught was ads taking up most of the visible screen with little or no actual content beside them, so a visitor had to hunt for whatever the search listing had already promised.
Refreshes followed in October 2012 and again in February 2014, each one narrowing what counted as excessive rather than normal. A reasonable number of ads up there was never the target.
Core Web Vitals and Largest Contentful Paint
The judging moved from layout to load speed. Largest Contentful Paint, one of the three Core Web Vitals, measures how long the biggest visible element takes to render, which on most sites means the hero image or the headline block. Good scores sit at 2.5 seconds or less. Anything past 4.0 seconds counts as poor (web.dev, Google, 2025).
So a slow first screen costs a page roughly what a cluttered one cost in 2012. The content up there still matters to Google. The measurement is render time now instead of ad density.
Does Above the Fold Still Matter in Responsive and Mobile-First Design?
It matters. Treating it as one fixed line stopped working years ago. Google finished moving every website to mobile-first indexing by July 5, 2024 (Google Search Central, 2024), so the mobile version of a page, first screen included, is the one being evaluated. Responsive design went from a selling point to the floor.
Fixed-height layouts still have defenders, and the appeal is real. You know exactly what appears on load, and a team can mock one up and sign off on it in an afternoon. Then somebody opens it on a screen that does not match the target size and the whole thing crops badly.
Fluid layouts adapt to whatever screen shows up, which is the point of mobile-first design, starting at the smallest viewport and scaling up from there. The cost is testing. More breakpoints to check before launch, plus a vaguer sense of control for anyone used to pixel work.
Most teams land somewhere in between. Flexible layout, a handful of fixed rules about hierarchy, no rigid grid.
When Above the Fold Does Not Apply
Some pages have no meaningful first screen to design around, and forcing the idea onto them makes things worse. Articles, guides, and documentation assume scrolling from the first click, so compressing everything into one screen only hurts readability. Social feeds, news streams, and plenty of ecommerce category pages keep loading content as a visitor moves, which means there is no fixed remainder sitting below a single line. Single-page applications and progressive web apps often skip the page-load model entirely and swap views instead.
Even inside one industry the answer splits. Nielsen Norman Group’s September 2022 review found Nike.com running infinite scroll on its product listings while Adidas.com stuck with standard pagination.
Neither is wrong. Once scrolling becomes the main interaction, the way it does on a parallax scrolling page built around continuous storytelling, the fold stops being the thing you design toward.
How to Design an Effective Above the Fold Section
There is an order to this, and jumping to visuals before the earlier decisions are settled is where teams lose the most time.
- Decide the one action a visitor should take, then work backward to the headline, image, and button that support it
- Design against common viewport heights instead of whatever laptop the mockup was built on
- Compress the hero image, cut render-blocking scripts, and load the first screen’s content before anything else
- Remove the secondary links, badges, and banners competing with the main button
- Check the result on an actual phone, not a resized browser window
Some context for why step three keeps climbing the list: a widely cited Google and SOASTA study found that for 70% of mobile pages analyzed, the visual content above the fold took nearly seven seconds to display (Google/SOASTA Research, 2017). Expectations have tightened considerably since then, which is part of why current speed benchmarks sit in the low seconds rather than the high ones.
A landing page built for one campaign can follow that order strictly, since it has a single goal instead of ten. Homepages are messier by nature. And generous white space around the headline and button does more for clarity than another line of copy ever will.
How to Test and Measure Above the Fold Performance
Two kinds of tools, used together. Behavior tools show where attention goes and how far down people actually scroll. Speed tools answer the duller but more urgent question of whether that content rendered fast enough to be seen at all.
| Tool | Purpose | Best For |
|---|---|---|
| Hotjar | Heatmaps, scroll maps, session recordings | Seeing where attention drops off |
| Crazy Egg | Click and scroll tracking, A/B testing | Comparing fold layout variants |
| Google PageSpeed Insights | Lab and field speed data | Diagnosing slow-loading fold content |
Heatmap and Scroll Tracking Tools
Scroll maps report what percentage of visitors reach each point on a page, and the top always registers as the warmest zone. Still worth looking at, because the drop-off point is rarely where anyone guessed it would be.
Muc-Off used VWO’s heatmaps and A/B testing to move product imagery above the fold on its category pages, which drove a 106% increase in purchases (VWO, success story). Results like that are why teams keep testing fold layouts rather than debating them.
Hotjar covers heatmaps and session recordings, Crazy Egg does click and scroll maps, and Chartbeat handles real-time attention tracking for publishing sites. Pick one and look at it weekly. Owning three and checking none is the more common outcome.
Speed and Core Web Vitals Testing Tools
Only 48% of mobile sites achieved good Core Web Vitals scores in 2025, up from 36% in 2023 (HTTP Archive Web Almanac, 2025). Progress, sure, but more than half the mobile web still fails, and load speed accounts for most of it.
Google PageSpeed Insights and Chrome DevTools both report how long a page’s largest visible element takes to render, which points straight back at the first screen. Worth checking across more than one browser too, since rendering speed and layout can both shift with the engine running the page. Running cross-browser compatibility checks alongside the speed pass catches layout bugs a single-browser test never will.
FAQ on What Is Above The Fold
What Is the Difference Between Viewport Height and Above the Fold?
Viewport height is a measurement the browser reports: how much vertical space is visible, in pixels. Above the fold is what you choose to put in that space. The measurement does not care what you do with it.
What Is the Ideal Above the Fold Pixel Height Today?
No ideal height exists, because viewport height moves with the device and the browser’s own bars. Set a flexible target instead, sizing the hero section to common phone and desktop viewports and letting responsive breakpoints handle the rest.
Does a Long Above the Fold Section Slow Down Core Web Vitals Scores?
A tall, heavy hero area can hurt Largest Contentful Paint, and background video is the usual culprit. Oversized images come a close second. Compress the hero and defer the non-critical scripts and render time stays reasonable even when the section covers more vertical space than usual.
Should Ads Be Placed Above the Fold?
A few are fine by Google’s own standard. Trouble starts when they take over the space and shove real content down, which is the exact pattern the Page Layout Algorithm was built to catch.
What Mistakes Do Designers Commonly Make With Above the Fold Sections?
Overcrowding, mostly. Too many messages fighting inside one screen. After that: hero images nobody compressed, navigation that vanishes on mobile, and a button sitting just low enough that it needs a scroll to reach.
Where Does Above the Fold Break Down First?
Load speed, almost always. A hero section that has not rendered gives a visitor nothing to judge, and no amount of layout planning makes up for that.
Which sets the repair order. Render speed first, so the thing appears. Then content hierarchy, meaning headline, hero image, button. Then testing on real devices instead of a resized window.
That order trades a moment of visual roughness for reliability. The first screen sometimes ships plainer than planned while the speed work finishes, with the polish arriving once render numbers hold steady. Not a popular tradeoff with designers. It is still the right one.
Getting that screen right leans on visual hierarchy, the ordering principle that decides what a visitor notices before anything else.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
