All posts
CRO design landing pages

Above the Fold Landing Page Design: What Actually Matters in 2026 | PageFork

Above-the-fold landing page design in 2026: what to put in the first 600px on mobile, scroll-depth data, eye-tracking insights, and the 5 elements that matter.

PageFork Editorial Updated July 15, 2026

Above the Fold Landing Page Design: What Actually Matters in 2026

Last updated: July 15, 2026

Above the fold is the visible viewport before any scrolling — roughly the first 600px on a 360×640 mobile viewport and the first 800–900px on a typical desktop screen. Eye-tracking and scroll-depth data show that 75–80% of visitor attention is spent above the fold, even though most visitors will scroll if the hero compels them to. The 2026 best practice is to fit five elements above the fold on mobile: a clear headline, a one-sentence subhead, a single primary CTA, one trust signal, and a hero visual that doesn’t dominate the limited space. Everything else belongs below.

The “above the fold” debate has been running since the print-newspaper era and never quite resolves. Visitors do scroll. But scrolling depends on what they see first — if the hero doesn’t earn the scroll, the rest of the page never gets read. This guide covers what the data actually shows about above-the-fold attention, what to fit in the first 600px on mobile, and the common mistakes that waste this real estate.

Table of Contents

  1. What “above the fold” means in 2026
  2. The data: where attention actually goes
  3. The 5 elements that belong above the fold
  4. What doesn’t belong above the fold
  5. Mobile vs desktop above the fold
  6. Common above-the-fold mistakes
  7. FAQ

What “above the fold” means in 2026

The term comes from newspaper layout — the upper half of a folded newspaper, visible to anyone passing the newsstand. Web designers borrowed it in the 1990s for the visible portion of a page before scrolling.

In 2026, “above the fold” varies by device:

  • Mobile (360×640): ~600px tall after browser chrome
  • Mobile (414×896 — larger phones): ~750px tall
  • Tablet (768×1024): ~900px tall
  • Laptop (1440×900): ~750px tall after browser chrome
  • Desktop (1920×1080): ~900px tall after browser chrome

Because 60–70% of landing page traffic is mobile in 2026 (StatCounter, March 2026), the binding constraint is the 600px mobile viewport. Design for that first; desktop has more room and tolerates the same content gracefully.

The data: where attention actually goes

The Nielsen Norman Group F-pattern study (most recent update 2024) and Crazy Egg’s scroll-map aggregations show consistent patterns:

  • 80% of viewing time is above the fold on the average page.
  • 57% of attention stays within the first viewport-height even when the page is long.
  • 74% of visitors scroll past the fold if the hero compels them — but only 31% scroll if the hero doesn’t.
  • Eye-tracking shows F- or Z-pattern scanning of the upper viewport, with users fixating on the headline first, then the visual, then the CTA.

The implication: above-the-fold isn’t where the conversion happens; it’s where the commitment to scroll happens. A weak hero kills the page before the rest can do its job.

The 5 elements that belong above the fold

For a landing page in 2026, these five elements should fit above the fold on mobile (360×640):

1. Headline (8–14 words)

What is this and who is it for? Front-load the benefit. Avoid “welcome to” framing.

Weak: “Welcome to PageFork — Your AI Marketing Partner.” Strong: “Ship a landing page in 60 seconds. Custom domain included.”

The headline is the single highest-leverage element on the page. Spend more time on it than on any other copy element.

2. Subhead (1 short sentence, ~20 words)

Why now? Add the specific differentiator or context. This is where the second-strongest claim goes.

Weak: “Our AI-powered platform leverages cutting-edge technology to streamline your marketing.” Strong: “Type one sentence, get a live page on your domain. No templates, no editor, no $99/month.”

3. Primary CTA (3–5 words, single button)

A single button. Verb-led, benefit-tinted, no friction. One CTA above the fold — not three. Multiple primary CTAs above the fold reduce conversion by 15–30% compared to a single focused CTA (Unbounce 2024 multi-CTA study).

Weak: “Submit” Strong: “Start free — no credit card”

4. One trust signal (one short line)

Numerical proof, customer logo bar, or named testimonial fragment. Just one above the fold; more later on the page.

Weak: “Trusted by businesses everywhere.” Strong: “4,200+ pages shipped this month.”

5. Hero visual (proportional, not dominant)

A product screenshot, illustration, or photograph that supports the headline without crowding it. On mobile, the hero visual typically sits below the headline-subhead-CTA stack, not next to it.

The hero visual is also the single biggest performance risk. Optimize aggressively: WebP/AVIF, under 200KB, explicit dimensions, fetchpriority="high". A heavy hero image is the #1 cause of failing LCP scores on landing pages.

What doesn’t belong above the fold

The instinct to “fit more above the fold” usually backfires. These elements should live below:

  • Long feature lists. Move to a benefits section in the page body.
  • Multiple navigation choices. Focused landing pages minimize global navigation. A logo and one or two utility links is plenty.
  • Long testimonial blocks. One named quote fragment above the fold is enough; full testimonials live in a dedicated section.
  • FAQ. Belongs near the bottom, where visitors who’ve scrolled and want detail expect to find it.
  • Pricing tables. Unless the page is specifically a pricing page, pricing comes after the offer is clear.
  • “As seen on” press logos. Below the hero, in a logo bar after the fold.
  • Footer content. Obviously, but worth saying — don’t put trust badges so close to the hero they feel like a footer.

Mobile vs desktop above the fold

Mobile has roughly 600px of vertical space; desktop has 750–900px. The implication isn’t “put more on desktop” — it’s “make sure the same focused content reads well at both sizes.”

Mobile-specific concerns

  • Single-column. Multi-column desktop layouts collapse predictably; design the mobile single-column first, scale up.
  • Touch targets at least 44×44px. Apple HIG and Google Material both enforce this.
  • Body text 16px minimum. Smaller triggers Chrome’s “text too small to read” warning.
  • CTA in the first 600px. A CTA below the fold on mobile loses 15–30% of conversion vs above-the-fold CTAs.
  • Hero visual sized for mobile bandwidth. Use <picture> with mobile-first sources, ideally WebP.

Desktop-specific opportunities

  • Split-screen layouts. Headline and CTA on the left, hero visual on the right. Works well at 1024px+ widths.
  • Subtle animation entry. A small fade-in or slide-in on the hero CTA can lift CTR 3–8% on desktop without harming performance.
  • Larger typography. Headlines can scale up to 48–72px on desktop where they’d be 28–36px on mobile.

Common above-the-fold mistakes

After auditing several hundred landing pages, the recurring above-the-fold mistakes:

  1. Welcome-to headlines. Wastes the highest-leverage line. Visitors don’t care that they’ve arrived; they care what they get.

  2. Multiple CTAs. “Start free trial,” “Book a demo,” “Download the guide” all at the top. Pick one. Run separate pages if you need all three.

  3. Hero image dominates the viewport. A 700px hero image on mobile pushes the CTA below the fold. Compress the image, or move it below the headline-subhead-CTA stack.

  4. Auto-playing video. Adds 200–500ms to LCP, hurts performance and perceived speed. Use a static poster image with a play button instead.

  5. Hidden price. “Contact sales” or no pricing visible above the fold reduces top-of-funnel conversion by 40–60% for SMB-targeted pages. Show pricing if you can.

  6. Generic stock imagery. Smiling stock-photo people at laptops are recognized and discounted. Use first-party photos, AI-generated brand imagery, or product screenshots.

  7. Decorative animation that distracts from the CTA. Subtle entrance animations help; constantly-moving background animations actively hurt because they pull attention away from the headline.

  8. Cluttered above-the-fold. Trying to fit a feature grid, a testimonial, a price, and a video all in the first 600px. Density above the fold isn’t a prize — it’s a penalty.

  9. No trust signal. A hero with no proof element (“trusted by,” logo bar, count) loses conversion to pages that have one, even when everything else is identical.

  10. Headline and subhead saying the same thing. Repetition wastes the subhead. The subhead should add information, not restate the headline.

FAQ

How important is above the fold in 2026?

Very. Eye-tracking and scroll-map data consistently show 75–80% of viewer attention happens above the fold, and only 31% of visitors scroll past it if the hero doesn’t compel them. Above-the-fold isn’t where conversion happens; it’s where the commitment to scroll happens.

What size is “above the fold” on mobile?

Approximately 600px on a standard 360×640 mobile viewport, or 750px on larger phones (414×896). Browser chrome takes 80–100px off the top, leaving the rest as the visible viewport. Design for the smaller (600px) first.

Do visitors actually scroll on landing pages?

Yes — 74% scroll past the fold if the hero compels them. But “if” is doing a lot of work in that sentence. A weak hero produces only 31% scroll rate. The hero earns the scroll; it doesn’t get assumed.

Should the CTA be above the fold?

Yes, on mobile especially. A primary CTA that requires scrolling on mobile loses 15–30% of conversion compared to one above the fold. On desktop, the CTA can sit slightly below if the hero is short and the CTA is reachable in one scroll.

Can I have multiple CTAs above the fold?

You shouldn’t. Multi-CTA heroes underperform single-CTA heroes by 15–30%. The exception is a primary CTA + a secondary “watch demo” or “see how it works” link — but the secondary should be visually subordinate (link, not button).

What about long-form scrollytelling pages?

The above-the-fold rules still apply. Long-form pages need a strong hero to earn the first scroll, after which the narrative structure takes over. The hero on a long-form page is arguably more important than on a short page because there’s more “below” to access.

How do I test above-the-fold designs?

Start with scroll-depth tracking in GA4 (or the equivalent in Microsoft Clarity, Hotjar). If under 50% of visitors scroll past the fold, the hero isn’t working. Then A/B test single elements: headline, subhead, hero image, CTA copy. Avoid testing all four at once — you won’t know which moved the metric.

Where to go next

For broader CRO context, see Landing Page Conversion Optimization: The 2026 Playbook.

For specific element deep-dives (ship on the blog as we publish them):

  • CTA Button Best Practices: 14 Rules Backed by Data
  • How to Write a Landing Page Hero Section That Hooks in 3 Seconds
  • 22 Landing Page Headline Formulas That Actually Work
  • Trust Signals for Landing Pages: 18 Elements That Move the Needle

For design fundamentals: Landing Page Design Principles That Actually Convert.

For copy frameworks: Landing Page Copywriting: Frameworks, Formulas, and Swipes.

Or open the homepage generator—every PageFork page is hero-optimized for mobile by default. Compare plans under pricing.

Sources: Nielsen Norman Group F-pattern Study, 2024 update. Crazy Egg scroll-map aggregations, 2024. Unbounce Multi-CTA Study, 2024. StatCounter mobile traffic share, March 2026. Author: PageFork Editorial.