Above the Fold

Above the fold is the portion of a web page that is visible in the browser window the moment a visitor lands on it — before they scroll, click, or interact in any way. Everything beyond that initial viewport boundary is below the fold.

The phrase describes the first screenful of content: the headline, hero image, navigation, and any call-to-action that loads without scrolling. It is the single highest-visibility zone on any page.

What does “above the fold” mean?

In web design, above the fold (often abbreviated ATF) means the visible area of a webpage before any scrolling occurs. The “fold” is the imaginary line at the bottom of the browser window — the cutoff between what a visitor sees immediately and what requires action to reveal.

The term does not describe a fixed pixel height. On a 27-inch desktop monitor, the fold might sit around 900–1,000 pixels from the top. On a phone held in portrait mode, it may be only 500–600 pixels. The fold shifts with every device, screen size, browser toolbar, and zoom setting.

Three questions the above-the-fold area should answer almost instantly:

1. What is this page about? — a clear, descriptive headline
2. Why should I stay? — a value proposition or benefit statement
3. What should I do next? — a visible call-to-action or navigation cue

Launch your affiliate program today

Set up advanced tracking in minutes. No credit card required.

Request demo Start 30-days free trial

Where did “above the fold” come from?

The term originates in print newspaper publishing. Physical newspapers were folded in half on newsstands. Only the top half of the front page was visible to passersby. Editors placed the most important headlines, striking photographs, and lead stories in that space to grab attention and drive purchases.

The same logic carried into early web design in the 1990s. Designers adopted the “fold” concept to describe what users see before scrolling — the digital equivalent of the newsstand display.

Unlike newsprint, however, a web page has no physical crease. The fold is virtual, defined entirely by the visitor’s viewport.

Why is above the fold important?

Above-the-fold content determines whether a visitor stays or leaves.

First impressions and bounce rate

A visitor forms an impression of a page within roughly 50 milliseconds. If the above-the-fold area looks cluttered, confusing, or irrelevant, the bounce rate climbs. Pages that clearly communicate purpose and value in the initial viewport see measurably lower abandonment.

Conversion impact

Calls-to-action, signup forms, and key offers placed above the fold consistently outperform those buried further down.

SEO implications

Google’s page-experience signals and Core Web Vitals reward pages where the main content loads quickly and is immediately accessible. While the fold itself is not a direct ranking factor, pages that push substantive content below intrusive interstitials or large hero images risk demotion. Content that is harder to reach is content that ranks less competitively.

Join our newsletter

Be the first to know about new features and product updates.

Email address

Subscribe

Where is the fold on a website?

There is no single fold line. The fold varies with:

1. Screen size and resolution — a 1920×1080 desktop monitor shows far more than a 375×667 phone screen
2. Browser chrome — toolbars, bookmark bars, and tab rows reduce available vertical space
3. Device orientation — landscape vs. portrait on tablets and phones yields different fold positions

The most common mobile viewport is approximately 390×660 pixels. This means mobile visitors see roughly half the vertical content that desktop visitors do — making mobile above-the-fold design more constrained and more critical.

How is above the fold measured?

Web designers and marketers use several methods to measure where the fold falls:

• Heatmap tools (Hotjar, Crazy Egg, Microsoft Clarity) — show aggregate scroll reach as color gradients
• BrowserStack and responsive testing tools — simulate viewports across device profiles
• Manual testing — resize the browser to common breakpoints and note where content cuts off

The 600-pixel rule of thumb from the early 2000s is obsolete. Designers now treat the fold as a fluid concept and test across at least five viewport widths: 390px (small phone), 428px (large phone), 768px (tablet portrait), 1024px (tablet landscape / small laptop), and 1440px (desktop).

Is above the fold still relevant?

Yes — but not the way it was understood a decade ago. The idea that all critical content must sit strictly above the fold is outdated. Users do scroll, and they scroll frequently. Social media feeds, infinite-scroll news sites, and short-form video platforms have trained people to swipe and scroll as second nature.

However, above-the-fold content still determines whether a visitor decides to scroll at all.

Obsolete advice:

• Stuffing every CTA, headline, and image above a rigid 600px line
• Designing only for desktop and ignoring mobile viewports
• Assuming users never scroll

Current best practice:

• Place your core value proposition and one primary CTA above the fold
• Use visual cues — partial content visible at the cut, directional arrows, scroll-triggered animations — to signal that more content exists below
• Design for the smallest common viewport first, then enhance for larger screens

What belongs above the fold?

The exact mix depends on the page type. A homepage, a landing page, and a blog article all serve different goals.

For homepages and landing pages

1. A clear, benefit-focused headline — tell visitors what you do and why it matters
2. Supporting subheadline — one sentence that adds context or a secondary benefit
3. Primary call-to-action button — prominently placed, high contrast, action-oriented text
4. Hero image or short video — relevant visual that reinforces the message without dominating the space
5. Navigation — clean, minimal, and intuitive

For blog articles and content pages

1. Article title — descriptive and keyword-rich
2. Featured image — scaled to avoid pushing text below the fold
3. Introduction paragraph — states the topic and what the reader will gain
4. Table of contents — for longer posts, a jump menu helps readers navigate

For e-commerce product pages

1. Product name and key image
2. Price — visible without scrolling
3. Add-to-cart button
4. Star rating and review count — social proof at a glance
5. Key differentiator — free shipping, warranty, or unique feature

How does above the fold apply to affiliate marketing?

Affiliate marketers — whether advertisers, publishers, or program managers — rely on above-the-fold placement to maximize visibility, clicks, and conversions.

For advertisers (brands running affiliate programs)

Your affiliate landing pages must communicate value immediately. If a referred visitor lands on a page and the headline, offer, or CTA is buried below the fold, the click you paid for is wasted.

• Test landing-page headlines above the fold with your top-performing affiliates
• Keep the form or purchase button in the initial viewport on mobile

For publishers (affiliates promoting offers)

Affiliate links and banners placed above the fold generate significantly more impressions and clicks than those in sidebars or footers. However, Google’s ad-placement guidelines penalize pages that push content below an excess of above-the-fold ads.

• Integrate affiliate CTAs naturally — contextual text links within the first two paragraphs often outperform banner ads
• Avoid stacking multiple banners above the fold on content pages
• Disclose affiliate relationships clearly near the link, not buried in a footer

For affiliate program managers

When you review affiliate applications and monitor partner performance, evaluate where your affiliates place your links. Affiliates who position your offers above the fold on high-traffic pages tend to drive the most conversions. Use that data to:

• Identify top-performing placements and share those patterns with underperforming affiliates
• Provide creative assets (banners, text links) sized for common above-the-fold dimensions
• Monitor for compliance — ensure affiliates are not using deceptive placement that violates your terms

Should CTAs be above or below the fold?

The short answer: place your primary CTA above the fold, and include supporting CTAs below.

A CTA above the fold captures visitors who decide quickly. These are high-intent users — they arrived knowing what they want and need only the right prompt to act.

A CTA below the fold serves visitors who need more information. After reading benefits, testimonials, or product details, they convert with greater confidence. These conversions often have higher average order values and lower return rates.

Neither placement is universally superior. The most effective pattern, validated across thousands of A/B tests, is:

• Single primary CTA above the fold — the action most visitors are ready to take immediately
• Secondary CTAs distributed below the fold — placed after each major section that delivers a convincing argument
• Sticky CTA on mobile — a persistent button anchored to the bottom of the screen as the user scrolls

Test both placements. Track not just clicks but completed conversions. A CTA that generates many clicks above the fold but few completions may be attracting the wrong audience. A CTA below the fold with fewer clicks but higher completion rates may be better qualified.