"Above the fold" originates from print newspaper design, where the most important stories appeared on the top half of the folded front page — the section visible on a newsstand. In web design, it means the content visible on screen when a page first loads, before any scrolling occurs.
What appears above the fold depends heavily on device, browser, and screen resolution. There is no fixed pixel boundary.
Why It Matters
Visitors form impressions of a page within seconds. Content above the fold drives the decision to stay or leave. If a user can't understand your value proposition before they'd need to scroll, many won't.
Key questions for above-the-fold content:
- Does the headline communicate what the product does and for whom?
- Is the primary CTA visible without scrolling on both desktop and mobile?
- Is there enough evidence (social proof, key benefit) to reduce bounce intent?
What Typically Works Above the Fold
| Element | Purpose |
|---|---|
| Headline | State the core value proposition clearly |
| Subheadline | Expand or qualify the headline |
| Primary CTA | Make the next step obvious |
| Hero image/video | Support the message visually |
| Social proof snippet | Reduce friction with credibility signal |
Common Mistakes
- Too many competing elements — Cluttered above-the-fold sections split attention. One primary message, one primary CTA.
- Hero image that obscures value — Large, beautiful images that say nothing specific increase bounce rates.
- CTA hidden below the fold — Especially harmful on mobile where viewport height is limited.
- Navigation heavy — Thick sticky headers eat into the visible area, pushing key content down.
Mobile Considerations
Mobile viewports are significantly shorter than desktop. What appears above the fold on desktop may require 2–3 scrolls on a phone. Run scroll depth analysis segmented by device type to see how much of your intended above-the-fold content users actually see.