The fold is not a pixel value
"Above the fold" originally referred to the top half of a folded newspaper. On the web, it means whatever a visitor sees before scrolling. That breakpoint shifts with every device: on a 13" laptop it might be 650px; on a phone in portrait mode, closer to 500px; on a phone in landscape, under 400px.
Don't obsess over exact dimensions. The real constraint is time. Most visitors decide whether to scroll or leave within two to three seconds. In that window, your page has to answer three questions: What is this? Is it for me? What do I do next? Fail any one and most visitors leave without scrolling.
This is why "above the fold" matters more on a phone than on a desktop. Desktop visitors can see more before they have to move. Mobile visitors get less space and they're usually more impatient. If your hero section is a large background image with headline text placed low, a mobile visitor may see nothing but the image. The text is technically on the page, just not in the visible area.
The five elements that earn their spot
Not everything belongs in this space. Here are the five elements that do, in order of visual priority.
1. A headline that states the core offer. It needs to pass the grunt test: could someone glance at it for five seconds and tell you what you offer and why it matters? (If they can't, the reasons your page isn't converting usually start here.) "AI-powered landing page audits in 60 seconds" works. "Empowering businesses to thrive in the digital economy" does not. Be specific. Name the outcome.
2. A subheadline that clarifies how. The headline says what you get. The subheadline says how it works or why it's different. Handle the top objection or add the detail that makes the headline credible. Two sentences max.
3. One primary call-to-action. Not "Start Free Trial" next to "Book a Demo" next to "Watch Video." When you give visitors multiple options, they hesitate. Pick the one action you most want, and make the button text complete the thought "I want to..." so "Get my free score" beats "Submit."
4. One trust signal. Not five. Not a wall of logos. One proof point that reduces the biggest objection your audience has right now: a customer count ("2,847 teams use this"), a recognizable logo, or a short testimonial. Social proof works best when the proof is specific and relevant to the reader's situation.
5. A value-supporting visual. A product screenshot, demo, or result preview. Show the outcome, not the process. A dashboard with real numbers beats a stock photo of a smiling team. If your product is hard to visualize, show the artifact the user receives.
Five elements. Everything else can wait below the fold.
What a good headline actually looks like
The most common headline problem isn't bad writing. It's vagueness. A vague headline makes the visitor do work: they have to figure out what you mean before they can decide if it's for them. Most won't bother.
Here are some common patterns and what they look like when rewritten:
"Empowering teams to do their best work" says nothing. It could be a project management tool, an HR platform, or a motivational coaching service. A clearer version: "Project management for teams of 5-20. Plans start at $10/month." Now the visitor knows the category, the audience, and what it costs.
"The future of analytics" is confident but empty. What is the product? What does it do today, not in the future? A clearer version: "See which pages lose visitors and why. Takes 60 seconds to set up." That tells you what the product shows you, names the result (fewer visitors lost), and removes a common objection (time to set up).
"Connecting people with ideas" could be a news aggregator, a matchmaking service, or a brainstorming tool. "A weekly digest of startup ideas, each rated by market size and demand" is specific enough that the right reader knows immediately whether to continue.
"Your all-in-one business platform" describes nearly every SaaS product built in the last ten years. Try naming the specific job your product does: "Send invoices, track payments, and file taxes from one place." Three concrete verbs beat one abstract noun.
The pattern in every rewrite: name the category, name who it's for, or name the outcome. Preferably two of the three.
What doesn't belong above the fold
A few things that routinely get shoved into the first screen and hurt more than they help:
- Expanded navigation. If your top bar has seven links plus a dropdown, you're handing visitors seven exit paths before they read your headline.
- Feature lists. Features are how-it-works details. They belong further down the page. Above the fold, sell the outcome.
- Autoplay video. It slows page load and visitors overwhelmingly pause or mute it. A static image with a play button converts better.
- Multiple competing CTAs. When there are two buttons, neither gets full attention. Pick one.
- A slider or carousel. Visitors see slide one. Almost nobody waits for slide two. Whatever you put on slides two through five is invisible to most of your traffic.
- A giant background image with no text on it. Beautiful photography is not a headline. If the first thing a visitor sees is a full-screen image with no words, you've spent your two seconds saying nothing.
- A "Welcome to our website" headline or any headline that tells the visitor what they're looking at rather than what they get.
CTA button text matters more than you think
The button is the moment of decision. What it says shapes whether someone clicks.
"Submit" is probably the worst button label in common use. It says nothing about what happens next and sounds like paperwork. "Get started" is vague but at least sounds like forward motion. Better options name the specific thing the visitor gets: "Get my free score," "See the audit," "Start my free trial," "Try it free."
A good test: read the button label and ask what the visitor receives. If the answer isn't clear from the label alone, rewrite the label. "See my score" passes. "Continue" fails. "Book a demo" passes. "Go" fails.
Button length is less important than people think. "Start my 14-day free trial" is longer than "Sign up" but it converts better because it answers two unspoken questions at once: How long is the trial? Is it free?
If you have a secondary CTA (like "Book a demo" alongside "Start free trial"), make one of them visually dominant and one visually quiet. A filled button next to a text link reads as one main choice with one supporting option. Two filled buttons of equal size read as a real decision, and visitors often choose neither.
Mobile above the fold
Desktop visitors see a lot before they scroll. Phone visitors see much less. The hero image that fills a laptop screen beautifully might push your headline and button completely out of view on a phone.
A few things to check specifically on mobile:
Are both the headline and the button visible without scrolling? If a visitor has to scroll to find the button, you're adding friction at the worst possible moment. The button should be on screen before the visitor has done anything.
Does the headline get cut off? On a phone, a headline written for desktop often wraps awkwardly or gets truncated. Read it on an actual phone, not just a resized browser window. A resized browser window does not show you what a phone user sees. The browser viewport, font rendering, and tap target sizes all behave differently on a real device.
Is the text readable without pinching? If the font size is comfortable on a laptop but too small on a phone, your CSS may be scaling it down. Check it.
Is there enough contrast between the text and the background? Light gray text on a white background looks fine on a high-resolution monitor in a dark room. In sunlight on a phone screen, it disappears.
Mobile visitors make up more than half of web traffic for most landing pages. If your above-the-fold section only looks right on a laptop, you're optimizing for the smaller half of your audience.
Four mistakes and what they cost
Vague headlines that say nothing. When your headline could apply to any company in any industry, you've wasted the highest-impact element on the page. Visitors don't scroll to figure out what you mean. If something is hard to understand in the first glance, most people assume it's not for them and leave.
Burying the CTA below a paragraph of text. Your call-to-action should be visible without reading anything else. If someone has to scan past a full paragraph to find the button, you've added friction at the exact moment you need to reduce it.
Using a hero image instead of a product image. Generic visuals (abstract gradients, lifestyle photography) tell the visitor nothing about your product. Swap in a real screenshot or result preview. It shows what you do and proves the product exists.
No trust signal at all. Without social proof, you're asking the visitor to take your headline on faith. That's a big ask from a stranger. Even a single data point reduces perceived risk. If you're early stage, a specific testimonial or "used by teams at [Logo]" row can close the gap.
Run the five-second test
Show your landing page to someone unfamiliar with your product for exactly five seconds, then hide it. Ask three questions:
- What does this company offer?
- Who is it for?
- What's the next step to take?
If they can't answer all three, something above the fold needs to change. You can run this informally with a colleague, or use a tool like Conversion Probe to get an automated clarity and trust score across your full page. Either way: don't guess whether your first screen is working. Measure it.
| Element | Job it does | Common failure |
|---|---|---|
| Headline | States what you offer in under 8 words | Too vague or clever |
| Subheadline | Clarifies how or handles top objection | Missing entirely |
| Primary CTA | Tells visitor exactly what to do next | Competing with a second CTA |
| Trust signal | Reduces perceived risk with proof | Absent or generic |
| Visual | Shows the product outcome | Stock photo or abstract art |
Quick checklist
Run through this before you consider the section done.
- Can a stranger tell what you sell in five seconds? Show someone outside your company and ask.
- Is the headline specific? Does it name a category, an audience, or an outcome?
- Is there one clear button? Not two, not three.
- Does the button label say what the visitor gets when they click?
- Does it work on mobile? Check on an actual phone, not a resized browser window.
- Is there at least one trust signal visible without scrolling?
- Is the page load fast? A slow load means visitors see nothing for the first second or two, which cuts into your already short window.
- Is anything on the first screen moving or animating in a way that competes with the headline?
Eight questions. If you can say yes to all eight, your above-the-fold section is doing its job.