By Mehdi Hassan"Put it above the fold" is one of the most repeated pieces of web advice, and one of the most misused. Teams cram logos, badges, three buttons and a form into the first screen, then wonder why the page feels noisy. This guide explains what the fold actually is today, why the strict version of the rule doesn't hold up, and the short list of things that genuinely need to be there.
What does above the fold mean?
Above the fold means the portion of a web page visible on screen before the visitor scrolls. The term comes from newspapers, where the top half of the front page was what passers-by saw on the newsstand. On the web, the fold is wherever the bottom of the browser window falls on a given device.
That makes the fold a range, not a line. A large desktop monitor might show a whole hero and the next section, while a small phone shows only the headline and part of the subheadline. When people say "above the fold website", they usually mean the first screen of the hero section, and that's the useful way to think about it: the first screen on the devices your visitors actually use.
Is the fold a myth?
The fold is real, but the idea that visitors won't scroll past it is a myth. People scroll all the time on phones and desktops. What they don't do is scroll past a first screen that gives them no reason to continue. The fold is a test of whether the first screen earns attention, not a hard limit on what gets seen.
Think about the reasoning behind scroll behavior. A visitor arrives, reads the headline and decides within moments whether the page is relevant. If it is, scrolling costs almost nothing, so they keep going. If it isn't, they leave, and no amount of content packed above the fold will change that. Content below the fold gets read when the content above it creates interest.
So the right goal isn't to fit everything into the first screen. It's to make the first screen clear enough that the right visitor wants the second. Scroll depth data on your own pages will show where attention drops; a steep drop right after the hero is usually a clarity problem, not a fold problem.
What should be above the fold on a landing page?
Four things should be above the fold on a landing page: the outcome, the mechanism, one primary action and a credibility cue. Together they answer what this is, how it works, what to do next and why to believe it. If any of the four is missing, visitors have to scroll to find out whether to stay, and many won't.
Element | Question it answers | What it looks like |
|---|---|---|
Headline (outcome) | What do I get? | A specific result for a specific reader |
Subheadline (mechanism) | How does it work? | One or two sentences on how the promise is delivered |
Primary CTA | What do I do next? | One button with a specific label |
Credibility cue | Why should I believe it? | A product visual, a recognizable logo strip or a review score |
Each element has its own guide in this series. Our article on the landing page headline covers formulas for the outcome, the subheadline guide covers the mechanism, and our comparison of hero image vs video covers which visual earns credibility for your product type.
For example, suppose a phone screen only fits half the hero
For example, suppose your hero on a small phone shows the logo, a menu icon, a two-line headline and the first line of the subheadline before the fold. The button and the product visual sit just below.
The fix isn't to shrink the type until everything fits. It's to tighten the headline to one or two lines, trim the subheadline to one sentence, reduce the top padding, and place the button right after the subheadline with the visual below it. Now the visitor sees the outcome, the mechanism and the action on load, and the visual rewards the first scroll.
What doesn't need to be above the fold?
Anything that supports a decision rather than starting it can live below the fold. Feature lists, detailed testimonials, pricing tables, FAQs and long explanations all work better further down, where a visitor who has decided to stay reads them properly.
- A second and third CTA. One primary action is enough; extra buttons split attention.
- Long forms. A short email field can sit in the hero; a demo form with many fields belongs lower or on its own page.
- Full testimonial blocks. A single proof cue goes in the hero; detailed stories go below.
- Announcement bars and cookie banners that cover the headline. Keep them small, or they push the essentials down.
- Autoplay carousels. They divide the first screen between several messages, and most visitors only see one.
If you sell to both technical and business buyers, the first screen should speak to the person who arrives first, usually the business buyer, with a clear path for the technical one further down. Our guide to selling to technical and non-technical buyers covers how to structure that.
Where is the fold on mobile and desktop?
There's no single fold position, because screen sizes, browser chrome and zoom settings vary widely. Design for a range: check the first screen on a small phone, a large phone, a laptop and a large desktop. The small phone is the hardest case and the one to solve first.
Check your analytics for real screen sizes
Look at the most common viewport widths and heights among your visitors, not just mobile versus desktop.
Design the small-phone first screen
Make sure the headline, at least part of the subheadline and the CTA fit without zooming or scrolling.
Check what browser chrome takes
Address bars, tab bars and in-app browsers from social apps take vertical space and change the visible area.
Scale up, don't cram down
On larger screens, add breathing room and a larger visual instead of adding more elements.
Why does load speed matter more than fold placement?
Load speed matters more because a first screen that renders slowly loses visitors before they read anything. The best-arranged hero is worthless if the headline appears after the visitor has already left. The original SOASTA data cited in our research found roughly a 7% conversion drop for a 100-millisecond delay and about 20% for a one-second delay.
Other tests have found smaller effects; a SiteSpect controlled test in the same research found -4.4% on mobile. The exact number varies by site, but the direction is consistent. Google's guidance on Largest Contentful Paint measures how fast the biggest element in the first screen loads, which is usually your headline or hero visual. Render the text first, size and compress the visual, and lazy-load everything below the fold.
How do you check what's above the fold on your site?
Check what's above the fold by looking at your page on real devices and asking strangers what they understood. Screenshots at common viewport sizes show what's visible. A 5-second test shows whether what's visible is clear. Together they tell you whether the first screen is doing its job.
Add an on-page survey that asks departing visitors what was missing; our guide to website exit surveys lists the questions that work. If the answers keep pointing to confusion about what the product does, the issue is copy, and our guide on explaining a complex product is the next read.
