Above the Fold Design: What Goes Where in 2026
Above the fold design controls the first impression. Visitors decide within three to five seconds whether to engage or leave, and that decision is almost entirely shaped by what they see before scrolling. The fold has shifted with bigger screens and longer phones, but the principle has not. The space visible on first load is the most expensive real estate on any page, and every element earning a spot there should pay rent.
This guide covers what belongs above the fold in 2026, what to leave below, the structural patterns that high-performing sites use, and the common mistakes that waste the opportunity. The patterns apply to homepages, landing pages, and product pages, with adjustments noted for each context. The platform you build on matters less than the discipline behind your structural decisions.
What “Above the Fold” Means in 2026
The fold is the boundary of the viewport on first load. On a 14-inch laptop at 1440×900, that is roughly 900 pixels of height minus browser chrome. On an iPhone 15, the visible area is roughly 700 pixels tall after accounting for the status bar and home indicator. On a 27-inch monitor, the fold can reach 1400 pixels.
The Fold Has Not Disappeared
Some commentators argue that since users scroll, the fold no longer matters. The data disagrees. Eye-tracking studies still show 80 percent of attention spent above the fold and 20 percent below. Visitors who do not see something compelling above the fold often never scroll at all. The fold matters because the decision to engage happens there.
Multiple Folds for Different Devices
Plan for at least three fold sizes: phone (around 700 pixels tall), laptop (around 800 to 900 pixels), and large monitor (1200 plus pixels). Every important element above the fold on phone should also be visible on larger screens. The reverse does not hold: a hero that looks great on desktop may push the CTA below the fold on phone.
The Five Elements Worth Their Place
1. Headline That Names the Outcome
One sentence stating what the visitor gets. Not a tagline, not a mission statement, not a clever phrase. The headline should answer “what does this do for me?” in plain language. Specific outcomes outperform vague benefits by a wide margin. “Send invoices in 30 seconds” beats “Reimagine your finance workflow” every time.
2. Subheadline That Adds Mechanism
One sentence explaining how the outcome happens. This is where mechanism appears: “with AI,” “by automating,” “through expert review.” The subhead supports the headline rather than restating it. Aim for 15 to 25 words. Anything longer becomes a paragraph that crowds out the visual.
3. Primary Call to Action
One button, one action. “Start your free trial,” “Book a demo,” “Get the playbook.” Action verbs only. Strong contrast against the page background. Place it on the natural eye path, typically below the headline or slightly to the right. Resist the urge to add a secondary button that competes for attention.
4. Visual Anchor
A product screenshot, illustration, hero video, or photograph that shows the outcome or the product in use. Stock photos of smiling teams in conference rooms underperform actual product imagery by huge margins. Show the interface, the result, or a clear illustration of the value. The visual reinforces the headline rather than competing with it.
5. Trust Signal
A small piece of social proof: a logo bar with three to six recognized customers, a single testimonial quote with a name and title, or a metric like “Trusted by 12,000 teams.” Place it just below the hero or as a thin band at the bottom of the fold. Visitors look for permission to trust before they engage, and this signal is what gives them that permission.
Structural Patterns That Work
The Centered Hero
Headline, subheadline, and CTA stacked in the center, with the visual either above or below. Works well for products that benefit from a single strong claim. Common on consumer SaaS and design tools. The risk: a visual placed below the text can push the CTA below the fold on shorter screens.
The Split Hero
Headline and copy on the left, visual on the right. Works for products where the visual carries weight on its own, like dashboards, design tools, or apps with distinctive UI. The split lets text and image both breathe. Z-pattern reading naturally moves the eye from headline to visual to CTA.
The Layered Hero
Headline overlaid on a video or large image background. Works for brand-heavy sites and high-consideration products. The risk is contrast: text overlaid on imagery often fails accessibility unless overlay or treatment is added. Use generous padding, subtle gradient overlays, or solid panels to keep text readable.
The Storytelling Hero
An animated or scroll-driven hero that unfolds the value proposition through interaction. Works for brand sites where the goal is impact over conversion. The risk is page weight and accessibility. Always provide a static fallback for users with reduced motion preferences. The guidance in our Framer animations guide covers performant approaches.
What to Leave Below the Fold
Detailed Feature Lists
Save full feature breakdowns for the section below the hero. Above the fold, three highlights at most, often as small chips or icons. Visitors who care about features will scroll. Trying to fit a complete feature list in the hero clutters the most important real estate on the page.
Multiple CTAs
One primary CTA above the fold. A secondary CTA can appear nearby with reduced visual weight (text link or outlined button), but it should not compete. Two prominent CTAs split attention and reduce overall conversion. Save additional CTAs for repeating throughout the page.
Navigation Density
Top-level navigation belongs in the header. Mega menus and dense sub-navigation should be hidden behind hover or tap, not exposed as part of the hero. The hero space belongs to the page’s argument, not to wayfinding.
Logos and Long Brand Stories
The logo bar deserves its place, but a wall of 24 logos overwhelms. Three to six recognizable customers in a small band is the right size. Save the longer customer story for a dedicated section or case study below.
Mobile Considerations
Phone Folds Are Tighter
The 700-pixel fold on a phone has space for headline, short subheadline, and one CTA. The visual often pushes below the fold. Plan for that. The headline and CTA must work without seeing the visual on first load. Many high-performing mobile heroes use a smaller visual with the CTA still above the fold rather than a full-bleed image with the CTA pushed down.
Sticky CTA on Long Pages
For long landing pages, a sticky CTA at the bottom of the mobile viewport ensures the action is always available. Keep it small enough not to obstruct content. Disappear it temporarily when forms are open or modals appear. The pattern is well-tested across SaaS landing pages and lifts conversion noticeably on long-form content.
Touch Targets and Spacing
Buttons must be at least 44 pixels tall with 12 pixels of spacing from other tap targets. CTAs that are too small or too close to navigation produce mistapped errors. The bigger the screen, the more forgiving the spacing can be, but on a 375 pixel phone, every pixel of margin counts.
Performance Above the Fold
Largest Contentful Paint
Whatever element is largest above the fold, usually the hero image or main headline, becomes the LCP target. Google’s Core Web Vitals require LCP under 2.5 seconds. Optimize that single element ruthlessly: small file size, modern image format, preloaded if needed, no layout shift.
Hero Image Strategy
For full-bleed hero images, use the picture element to serve different sizes. WebP or AVIF format. Specify width and height to prevent layout shift. Consider lazy-loading nothing above the fold, since lazy loading delays the very content that should appear first.
Hero Video
Hero videos can lift conversion 20 to 40 percent on the right page, but the performance cost is real. Compress aggressively, use H.265 or AV1 if browser support allows, autoplay muted on desktop only, and serve a static poster image on mobile. The pattern in SaaS landing page best practices covers hero video implementation in detail.
Common Mistakes to Avoid
Vague Headlines
“Reimagine your business” tells visitors nothing. Specific outcomes win. Audit every hero headline against the question “what does the visitor actually get?”
Three Equal CTAs
When every CTA looks equally important, none win. Pick one primary action and demote everything else.
Stock Photos of Strangers
Smiling teams in conference rooms have been the laziest hero choice for fifteen years. Real product imagery, illustrations, or photography of actual customers outperforms stock by significant margins.
Text Overlaid on Busy Images
Without a treatment (overlay, gradient, or solid panel), text on imagery often fails contrast. Test in real conditions, including bright sunlight on mobile.
Ignoring Mobile Above the Fold
A hero designed for desktop often pushes the CTA below the fold on phone. Mobile-first design avoids this trap by starting with the smaller fold.
Frequently Asked Questions
Is the fold still relevant when users scroll?
Yes. Eye-tracking data still shows 80 percent of attention above the fold. Visitors who do not see something compelling on first load often never scroll. The fold determines whether engagement starts.
Should I put my entire pitch above the fold?
No. The fold tells visitors what the product is and gives them a clear next step. The complete pitch unfolds across the rest of the page. Trying to fit everything above the fold creates clutter that hurts conversion.
How do I handle different fold sizes across devices?
Design for the smallest fold first (phone, around 700 pixels tall) and ensure headline, subheadline, and primary CTA all fit. On larger screens, the visual gets more room and supporting content can appear closer to the fold. The principle is mobile-first hero discipline.
Should I use a video hero?
Video heroes can lift conversion when the product benefits from a visual demo. The performance cost is real, so use a poster image, autoplay muted on desktop only, and serve a static image on mobile. Test against a still image hero to see whether the video earns its weight.
Make Every Pixel Count
The fold is the most expensive space on any website. Every element earning a spot there needs to pay rent in clarity, conversion, or trust. Headline, subheadline, primary CTA, visual, and a small trust signal: that is the working formula in 2026. If you want a partner who builds heroes that convert across every device, see how our team approaches above-the-fold design.