Above-the-Fold CTA
An above-the-fold CTA is a call-to-action button or form visible on a landing page without any scrolling, sitting in the area users see immediately on load.
Key takeaways
- No single fold exists, only a distribution of viewport heights across your traffic.
- Mobile address bars shrink the visible area at first paint, then expand it.
- Low-commitment actions survive early placement; high-commitment asks usually do not.
- A refused early ask makes a later yes harder, so repeat the action.
- The first screen's job is to justify scrolling, not to close the decision.
In depth
There is no single fold, only a distribution of viewport heights across the devices in your traffic. The operational question is therefore what share of sessions render the primary action without scrolling, and that is answerable from your own analytics rather than from a design rule. Mobile browsers complicate the arithmetic: the address bar occupies vertical space on load and collapses once the visitor scrolls, so the height available at first paint is smaller than the height most tools report afterwards. Design against the smaller one.
Whether an early call to action converts depends on how much persuasion the offer requires. A low-commitment action such as getting a score, running a calculator or opening a free tool can be offered immediately, because the visitor risks almost nothing by accepting. A high-commitment ask placed before any evidence is usually declined, and that decline is expensive, since someone who has already refused is measurably harder to convert further down the page. The real variable is sequence rather than height: an early ask works when it recurs.
In practice the first screen's job is to justify the scroll, and the button there converts the minority who arrived ready to act. Teams therefore repeat the action at each natural decision point rather than betting everything on the top. A scorecard funnel suits early placement unusually well, because starting a quiz is a small commitment that doubles as the persuasion. The questions themselves supply the evidence, so there is little reason to hide the start control behind several screens of preamble.
The idea misleads once it becomes a rule about pixels. Optimising until a button clears an arbitrary line on one test device can crowd the headline, shrink the proof and yield a first screen that technically complies while persuading nobody. It applies weakly to visitors arriving with high intent from a branded search or a direct link, who will find the action wherever it sits. For considered purchases the opening screen is often better spent on framing the problem, provided the ask reappears soon after.
Example in practice
How to measure it
The metric behind the phrase is the share of sessions in which the primary action is visible without scrolling. Derive it by combining your viewport height distribution with the rendered position of the button on each common size. Track it as a number rather than a design opinion, and recheck it after any change to the header, headline or hero, since those are the elements that displace the action without anyone noticing.
Then read where clicks actually occur. Compare the early call to action with the repeats further down the page. If most conversions come from a lower instance, the top placement is not the workhorse and raising it further will change little. Segment by device as well, because a placement that performs on desktop and fails on phones is a viewport problem, while one that fails on both is a message problem.
Common mistakes
The routine error is judging the fold on the machine doing the reviewing. A large external monitor shows far more than the phones generating most of the traffic, so a button sitting comfortably in view during a design review can be invisible to the majority of real visitors. Pull the viewport height distribution from your own analytics, pick the shorter sizes that cover most sessions, and check the rendered page there with the browser address bar expanded rather than collapsed.
The second is cramming. Everything a stakeholder wants seen first migrates upward: a long headline, a subhead, a row of badges, a hero image, a navigation bar. The zone becomes dense, the button technically fits, and nothing in it reads. Decide what the first screen must accomplish, which is usually one promise, one action and one reason to believe, then move everything else below and let the scroll do its job.
Frequently asked questions
Should every landing page have an above-the-fold CTA?
Almost always, yes. Visitors decide quickly whether to engage, so the primary action should be visible on load. The exception is content-heavy pages where you intentionally build context first, but even then a sticky or repeated CTA usually helps.
How do I test if my CTA is truly above the fold?
Check the page on real devices and use analytics or session recordings to see scroll depth. Because viewport heights vary, validate on the smallest common mobile screen, not just your desktop monitor.
Does an above-the-fold CTA hurt SEO or page quality?
No, when used reasonably. Problems arise only if you stuff the top of the page with aggressive ads or pop-ups, which search engines penalize. A clean, relevant CTA paired with a clear headline is a best practice.
Is above the fold still relevant when everyone scrolls?
Yes, but for a different reason than it once was. Scrolling is habitual now, so the first screen no longer has to contain the decision. What it does determine is whether anyone scrolls at all, since visitors decide within seconds whether the page relates to what they clicked. Treat it as the qualifying screen rather than the closing screen.
Where is the fold on mobile?
It moves. The address bar takes vertical space when the page first paints and collapses once scrolling begins, so the area visible at that first moment is shorter than most measurement tools report. Design for the smaller height, then verify by loading the live page on a physical phone rather than a resized desktop window, which does not reproduce the behaviour.
Should the call to action appear more than once?
On any page longer than a couple of screens, yes. Readiness arrives at different points for different visitors, and a page with a single button forces everyone to scroll back to it, which some will not do. Place a repeat after each block that resolves an objection, keeping the wording identical so it reads as one action rather than several offers.
What if the offer needs explaining before you can ask?
Then let the first screen frame the problem and make the ask small. A low-commitment step, such as seeing a score or a sample, can appear immediately because accepting costs the visitor almost nothing, and it buys attention for the explanation. Save the demanding request for after the evidence, and place it where the argument for it has just been made.
Is a sticky call-to-action bar a good substitute?
It solves reach and creates a cost. A persistent bar keeps the action available at every scroll position, which suits long pages, but it also occupies scarce vertical space on phones and can obscure the content it was meant to support. Use it when the page is long and the action is simple, and check that it never covers form fields or answer options.
How do you test placement properly?
Run it as a controlled variant with position as the only change, and read start rate rather than final conversion, since that is the step placement affects. Split the result by device, because the effect concentrates on the shortest viewports. Anything else changing at the same time, including headline length, invalidates the comparison because both alter what fits on the first screen.