Above the Fold Design: What to Show Without Scrolling
Learn what to include above the fold on your website. Best practices for hero sections, CTAs, and first impressions that convert.
"Above the fold" refers to the content visible before scrolling. It's your first impression—and often your only chance to capture attention.
Why Above the Fold Still Matters
Some argue that "the fold" is dead because everyone scrolls now. But research shows:
- Content above the fold gets 80% more attention than below-fold content
- Users spend 57% of their time above the fold
- First impressions form in 50 milliseconds
People scroll, but they decide whether to scroll based on what they see first.
The 5 Essential Above-the-Fold Elements
1. Clear Value Proposition (Headline)
Your headline must answer: "What is this, and why should I care?"
Within 3 seconds, visitors should understand:
- What you offer
- Who it's for
- Why it matters
2. Supporting Subheadline
Elaborates on the headline promise without overwhelming.
3. Primary Call-to-Action
Your main CTA must be visible without scrolling. Period.
4. Visual Support
Hero images or product screenshots should support, not compete with, your headline and CTA.
5. Trust Indicator
Some form of social proof should appear above the fold:
- Client logos
- User count
- Star rating
- Media mentions
Above the Fold Layout Patterns
Centered Hero Layout
Best for simple products with a single focused message.
Split Hero Layout
Best for products that need visual explanation (text on left, image on right).
Common Above-the-Fold Mistakes
- Too Much Content — Creates visual chaos
- Giant Hero Images with No Message — Beautiful but unconverting
- Navigation Dominates — Steals attention from value proposition
- CTA Below the Fold — Most common and costly mistake
- Slider Carousels — Users rarely see beyond slide 1
- Auto-Play Video — Annoys users, slows page load
Testing Your Above-the-Fold Content
The Blur Test
Blur your page to 10-15 pixels and ask:
- Can I identify the headline area?
- Is the CTA visible?
- Does anything decorative dominate?
The 5-Second Test
Show your page to someone for 5 seconds, then ask:
- What was this page about?
- What action could you take?
Mobile Considerations
- Headlines may need to be shorter
- CTAs should be large enough for thumbs
- Less horizontal space for split layouts
- Consider sticky CTA buttons
Key Takeaways
- Above the fold = first impression = decides if users engage
- Include: headline, subheadline, CTA, visual, trust signal
- CTA must be visible without scrolling (non-negotiable)
- Avoid: sliders, giant images without message, hidden CTAs
- Test with blur tests and real devices