Above the Fold: Winning the Five Seconds That Decide the Visit
Visitors decide in seconds whether your page deserves a scroll — and they decide from the first screen alone. Everything brilliant below the fold is invisible to the majority who never get there.
Here's what the first screen must accomplish, and how to build heroes that earn the scroll.
Key takeaways
- Four jobs in one screen: what this is, who it's for, why it's credible, what to do next — clarity beats cleverness on all four.
- The headline carries the load: specific value in the visitor's language outperforms brand poetry every test.
- One primary action, visually unmistakable — competing CTAs above the fold split the only attention you're guaranteed.
- The mobile fold is the real fold: most visitors see a phone-screen's worth — design that first, decorate later.
The four jobs
Job one, comprehension: a visitor who can't restate what you offer after five seconds is already gone — the headline plus subhead should pass the 'explain it to a distracted friend' test. Job two, relevance: signal who it's for so the right visitor feels found ('for growing Shopify stores' does more than a paragraph). Job three, credibility: one fast proof element — rating, logo strip, customer count, a concrete result. Job four, direction: a single primary CTA whose label says what happens next. Audit any hero against the four; most fail two of them in favor of a slogan and a stock image.
Headline and hierarchy
Headline frameworks that survive testing: the outcome statement (what they get, specifically), the problem flip (the pain, ended), the category-plus-differentiator (what you are, why different). Subheads handle the how and the for-whom. Then make hierarchy do the guiding: headline largest, one visual focal point that supports rather than competes (product in context beats abstract decoration), CTA in the highest-contrast element on screen, and whitespace protecting it all. Every additional element above the fold taxes the four jobs — earn each one or cut it.
Mobile reality and testing the hero
Design the phone screen first: that's the actual fold for most traffic, and desktop heroes 'responsively' collapsing into a logo, a navbar, and half a headline is the most common above-fold failure. Keep the headline and CTA visible without scrolling on common device sizes; defer heavy media that delays first paint — speed is part of the first impression. Then test where leverage is highest: headline framing first (biggest swings live here), then proof element choice, then CTA copy, judged on scroll-depth and conversion together — a hero that converts clickers but stops scrollers may be filtering, which is sometimes the goal and sometimes the leak. Scroll maps tell you which.
Frequently asked questions
Does the fold still matter with everyone scrolling?
People scroll when the first screen earns it — the fold decides whether they do. It's not where content must cram; it's where continuing gets sold.
Should the CTA always be above the fold?
The primary one, yes — visible, singular, and labeled with the next step. Repeat it down-page for readers who needed more convincing.
Hero image or hero video?
Whichever shows the product or outcome fastest without slowing the page. Autoplaying background video that delays paint and adds nothing concrete loses to a sharp contextual image.