What is above the fold?

Above the fold is the portion of a webpage visible to a user immediately upon loading, without any scrolling. The term originates from newspaper layout, where the top half of the front page (visible when papers were folded for display) commanded the most attention.

According to Nielsen Norman Group's eye-tracking research, users spend approximately 80% of their attention above the fold on a typical webpage. Content placed above the fold is roughly 5x more likely to be seen than content below the fold, making this real estate the highest-leverage area on any landing page.

How above the fold works

The exact pixel boundary of "the fold" depends on:

• Device type — desktop typically 768-1080 pixels tall; mobile 568-844 pixels
• Browser/OS chrome — toolbars and tabs reduce visible space
• Zoom level — user-adjusted display affects what's visible

Modern responsive design treats the fold as a moving target. Designers focus on what's visible at common viewport sizes (typically 1366×768 desktop, 375×667 mobile).

What goes above the fold determines whether a user scrolls. Critical above-the-fold elements:

• Hero headline — clear value proposition in 5-12 words
• Subheadline — clarifying detail in 1-2 sentences
• Primary CTA — action button with clear copy
• Hero image or video — visual showing the product or outcome
• Trust signals — customer logos, ratings, brief testimonial

According to a 2024 Hotjar heatmap analysis of 10,000+ landing pages, pages with strong above-the-fold value propositions had 40% lower bounce rates than pages with weak hero sections.

The "fold" debate (does it still matter in scroll-heavy modern web?) was resolved by extensive research: yes, it still matters. Users scroll, but they decide whether to scroll based on what they see first.

Examples of above the fold in practice

Example 1: Stripe homepage

Stripe's homepage above the fold contains: bold "Financial infrastructure to grow your revenue" headline, brief subhead, two CTAs (Start now / Contact sales), customer logo bar. Everything required to communicate value and earn the next scroll happens in the first viewport.

Example 2: Apple product pages

Apple's product page hero sections (e.g. iPhone, MacBook) are textbook above-the-fold design: large product image, single bold claim, single CTA. Nothing competes for attention in the first viewport.

Example 3: Solopreneur landing page

A solo SaaS founder's landing page hero: headline ("Generate a week of social posts in 2 minutes"), subhead ("AI-powered content for solopreneurs"), CTA button ("Try free for 7 days"), and a single product screenshot. The above-the-fold design earns scrolls and drives signup conversion.

When to optimize above the fold

Optimize above the fold when:

• You're designing or redesigning any landing page
• You're seeing high bounce rates without scrolls
• You're A/B testing hero copy or CTAs
• You're optimizing for paid traffic conversion
• You're reducing time-to-value on signup pages
• You're measuring conversion at the page-load stage

When NOT to over-optimize above the fold

• Pages where scroll is the experience — Long-form articles, image galleries
• Storytelling pages — Where the unfolding narrative matters more than instant conversion
• Resource pages — Where information density beats first-impression polish

Above the fold vs related concepts

The fold is layout; hero section is design language; performance metrics measure speed.

Common mistakes with above the fold

• Cluttered hero — Too many CTAs, claims, or images dilute attention.
• Vague headlines — "Welcome to [brand]" doesn't communicate value.
• Slow-loading hero images — Large unoptimized images delay above-fold load and kill conversion.
• No CTA above the fold — Users shouldn't have to scroll to find the action.
• Mobile-broken hero — Designs that work on desktop but fail on mobile lose 60-80% of mobile traffic.

Frequently asked questions about above the fold

Does the fold still matter in 2026? Yes. While scroll behavior is more common than in early-web days, eye-tracking research consistently shows that 70-80% of attention happens above the fold. Users decide whether to scroll based on what they see first. The fold remains the highest-leverage page real estate.

What should be above the fold on a landing page? At minimum: a clear headline communicating the value proposition, a supporting subheadline, a primary CTA, and ideally a hero image or video. Trust signals (customer logos, ratings) lift conversion when included above the fold.

How do I implement strong above-the-fold design? Write the headline first. Test 5-10 variants and pick the clearest one. Add a subheadline that clarifies what the headline promises. Add a single primary CTA with action-oriented copy. Optimize hero images for fast load (WebP, lazy loading, responsive sizing).

What tools help analyze above-the-fold performance? Hotjar and Microsoft Clarity show heatmaps of where users look. Google Lighthouse measures above-the-fold performance metrics. Crazy Egg shows scroll depth. PostKit's marketing pages use Next.js Image optimization to ensure fast above-the-fold load.

Does the fold still apply to mobile? Yes — even more so. Mobile viewports are smaller, so the fold cuts off more aggressively. Mobile hero design needs to work in 568-844 pixel viewports, often requiring stacked layouts, smaller images, and tighter copy.

What's the difference between above the fold and the hero section? The hero section is the top design region of a page (typically the first major content block). "Above the fold" is the literal viewport visible without scrolling. The hero section often extends below the fold; the above-the-fold area always includes the top of the hero. The terms overlap but aren't synonymous.

How PostKit uses above the fold

PostKit's marketing pages prioritize above-the-fold clarity. Every landing page hero contains: clear product headline, supporting subhead, primary "Start free trial" CTA, and a product screenshot or animation. Founder Tadeáš Raška has A/B tested multiple hero variants — testing tighter vs longer headlines, single vs dual CTAs, and image vs video heroes — with results shared in build-in-public posts.

Related glossary terms

• Below the fold — Counterpart concept
• Hero section — Design language for above-the-fold area
• Landing page — Page type where above-the-fold matters most
• Sticky CTA — Solution when CTA below fold
• Conversion rate optimization (CRO) — Discipline applied to above-the-fold

Sources

• Nielsen Norman Group fold research
• Hotjar heatmap analysis
• Google PageSpeed Insights