Above the fold is the portion of a webpage visible in the browser window without scrolling. To act on that immediately: place one clear headline, a single primary call-to-action, and at least one trust signal within that first viewport. Those three elements determine whether a visitor stays or leaves, and they must be present before any other design consideration.

The term “above the fold” functions as a behavioural threshold, not a fixed pixel measurement. Research from the Nielsen Norman Group recorded an average 84% difference in how users treat content above versus below the fold, making it one of the most consequential boundaries in web design. Visitors form their first impression of a page within milliseconds, and the content sitting in that initial viewport either earns their attention or loses it permanently.

Where does the phrase “above the fold” come from?
Why the fold still affects user behaviour, UX, and conversions
How do you locate the fold across different devices?
How does responsive design change where the fold falls?
What should you always include above the fold?
How should you place CTAs, handle ads, and test for conversions?
How does the first viewport affect SEO and technical performance?
Which tools help you validate the fold and test changes?
Key takeaways
The fold as a design discipline, not a design rule
How MedwayWebDesign can help you get the first viewport right
Useful sources

Where does the phrase “above the fold” come from?

The phrase originates in print journalism. Broadsheet newspapers are physically folded in half for display on newsstands, and editors have long placed the most important stories in the top half — the portion visible without unfolding the paper. The Cambridge Dictionary traces this usage directly to that newspaper context, where above-the-fold placement signalled editorial priority and drove sales.

Web designers adopted the metaphor in the late 1990s as a shorthand for the first visible screen of a webpage, and the logic transferred cleanly: content a visitor sees without any interaction receives more attention than content requiring effort to reach. The metaphor has since evolved. VWO’s analysis of the fold’s role makes clear that the modern objective is not to cram every piece of information into the first screen, but to signal enough value that the visitor is motivated to scroll. The fold is a door, not a container.

Why the fold still affects user behaviour, UX, and conversions

Users do not read web pages the way they read documents. Attention is conditional: visitors scan the first screen, assess relevance within seconds, and decide whether to continue. The NN/g 84% attention differential between above- and below-the-fold content reflects that scanning behaviour at scale.

The fold is a psychological threshold. Content above it receives disproportionately more attention than anything below — NN/g measured an average 84% difference in user attention between the two zones.

The practical consequences extend across several performance metrics. Bounce rate rises when the first screen fails to communicate relevance, because visitors have no reason to invest further time. Dwell time, which search engines treat as a proxy for content quality, depends on the above-the-fold area creating enough interest to sustain engagement. Conversion opportunities are highest at the moment of arrival, before attention degrades. For pages carrying display advertising, ad viewability scores are directly tied to placement above the fold, affecting both revenue and advertiser trust.

Omniconvert’s guidance on above-the-fold optimisation confirms that placing the value proposition and primary CTA where attention is highest increases the probability of continued engagement. The role of web design in business growth is nowhere more concentrated than in this first viewport.

How do you locate the fold across different devices?

The fold sits at the bottom of the browser viewport, and that position varies considerably across devices, screen resolutions, and browser chrome configurations. A 1920×1080 desktop monitor with a collapsed bookmarks bar presents a different fold than a 375×667 iPhone SE running Safari with the address bar visible. There is no universal pixel value.

A structured approach to measuring the fold across your actual audience involves four steps:

Pull viewport data from analytics. Google Analytics 4 and similar platforms report screen resolution and device category. Filter your traffic by device class (mobile, tablet, desktop) and identify the most common viewport heights for each segment. For most UK business websites, mobile traffic dominates, making the smallest common mobile viewport the design priority.
Set up breakpoint viewports in browser devtools. Chrome DevTools and Firefox’s Responsive Design Mode allow you to enter exact viewport dimensions. Test at 360×640 (common Android), 375×667 (iPhone SE), 390×844 (iPhone 14), 768×1024 (iPad), and 1280×800 (laptop) as a baseline set. Responsive design principles inform which breakpoints matter most for your audience.
Use CSS and JavaScript to instrument the fold. A window.innerHeight check in JavaScript returns the current viewport height in pixels, which you can log as a custom dimension in your analytics platform. CSS media queries targeting min-height and max-height let you apply layout adjustments for specific viewport ranges.
Record first-screen interaction events. Set up scroll-depth tracking and click events on above-the-fold elements. Comparing click rates on CTAs visible in the first viewport against those requiring scrolling gives you empirical data on the fold’s effect for your specific audience.

Segmenting these metrics by device class is the critical step most teams skip. A CTA that performs well on desktop may be invisible on mobile, and aggregate data will mask that discrepancy entirely.

How does responsive design change where the fold falls?

The fold is not a single line; it is a range of lines, one per device configuration. Designpixil’s guidance on above-the-fold design recommends designing for the smallest common viewport first and confirming that four core elements fit before adding enhancements for larger screens: a clear headline, a supporting subheadline, a primary CTA, and at least one trust signal.

Mobile browser chrome behaviour adds further complexity. On iOS Safari, the address bar collapses as the user scrolls down, which increases the visible viewport height mid-session. On Android Chrome, similar behaviour occurs, but the timing and pixel shift differ between manufacturers. Designing with 100vh in CSS can therefore produce a hero that appears correctly sized in devtools but clips the CTA on a physical device, because the browser chrome is not accounted for. Using min-height: -webkit-fill-available or the newer dvh (dynamic viewport height) unit addresses this on supported browsers.

Notch and safe-area insets on modern iPhones and Android devices add a further constraint. The CSS env(safe-area-inset-bottom) property ensures interactive elements do not sit beneath the home indicator.

Pro Tip: Test your hero section on a physical device, not just devtools. Devtools simulates screen dimensions but does not replicate the address-bar collapse behaviour of iOS Safari or the notch insets of Android devices. A five-minute check on an actual handset prevents the most common mobile fold failure.

What should you always include above the fold?

Mailchimp’s definition of above-the-fold content identifies headline clarity, a prominent CTA, and mobile responsiveness as the non-negotiable elements for engagement. The following checklist translates that into concrete design decisions:

Hero visual: An image or short video that reinforces the headline’s message. Avoid purely decorative imagery; every visual element should support the value proposition. Visual hierarchy and imagery choices directly affect how quickly visitors process the page.

Secondary CTAs, social proof sections, and detailed feature lists belong below the fold, where visitors who have already committed to scrolling are ready to evaluate them.

How should you place CTAs, handle ads, and test for conversions?

CTA placement above the fold follows a clear hierarchy: the primary action must be visually dominant, spatially isolated from competing elements, and labelled with specific language. Vague labels such as “Learn more” or “Click here” reduce click-through rates because they do not communicate what happens next. Specific labels tied to the visitor’s goal (“Download the checklist”, “Book a 20-minute call”) perform consistently better.

For pages carrying display advertising above the fold, Google’s Better Ads Standards set the boundary between acceptable and intrusive formats. Ads that cover the primary content, auto-play with sound, or occupy more than 30% of the above-the-fold area damage user trust and increase bounce rates. Ad viewability, measured as the percentage of an ad’s pixels visible for at least one second, is maximised by placement in the upper portion of the first viewport, but that placement must not displace the page’s own CTA. The relationship between ad creative and conversion rates is well documented: creative quality and placement work together, and neither compensates for the other’s failure.

Testing above-the-fold changes requires a disciplined approach:

Run the test to statistical significance. Optimizely’s guidance on above-the-fold testing recommends using experimentation platforms that calculate significance automatically, preventing premature conclusions from small samples.

How does the first viewport affect SEO and technical performance?

The hero section drives two of Google’s Core Web Vitals directly. Largest Contentful Paint (LCP) measures the time to render the largest visible element in the viewport, which is almost always the hero image or headline on a typical landing page. Google’s threshold for a good LCP score is 2.5 seconds or under. A hero image that is not preloaded, or that is served at an unnecessarily large file size, will push LCP beyond that threshold and signal poor page experience to Google’s ranking systems.

LCP is determined by the first viewport. The hero image or headline is almost always the LCP element, making above-the-fold performance inseparable from Core Web Vitals compliance.

Cumulative Layout Shift (CLS) is the second Core Web Vital directly tied to the fold. If the hero image loads after the text, or if a banner ad renders and pushes content downward, the layout shifts and CLS accumulates. Google’s good threshold is a CLS score below 0.1. Reserving explicit dimensions for all above-the-fold images and avoiding dynamically injected content in the hero area are the two most effective controls.

Mobile-first indexing means Google evaluates the mobile version of a page first when determining rankings. A hero that loads quickly on desktop but serves an unoptimised image on mobile will be assessed on its mobile performance. The website speed optimisation checklist covers the technical controls in detail. The key recommendations for the hero specifically are: preload the LCP image using <link rel="preload">, inline critical CSS for above-the-fold styles to eliminate render-blocking requests, and use preconnect for any third-party font or image CDN the hero depends on. Lazy loading should be applied to all images below the fold, but never to the hero image itself.

Bounce rate and dwell time, while not direct ranking signals, influence the engagement data that Google’s systems use as quality proxies. A first viewport that communicates relevance reduces bounce; one that confuses or fails to load promptly increases it.

Which tools help you validate the fold and test changes?

Reliable validation of above-the-fold decisions draws on a short set of tools, each serving a distinct diagnostic purpose:

Google Search Console: — The Core Web Vitals report segments LCP and CLS by device and URL, providing field data from real users rather than lab simulations.
A/B testing platforms: — Tools such as Optimizely and VWO allow controlled experiments on above-the-fold elements with statistical significance calculations built in.

A practical smoke test before any above-the-fold deployment involves three checks: load the page on a physical mobile device and confirm all four core elements (headline, subheadline, CTA, trust signal) are visible without scrolling; run a Lighthouse audit and confirm LCP is under 2.5 seconds and CLS is below 0.1; and verify keyboard navigation reaches the CTA without requiring a mouse.

When conversion rates are critical or user behaviour is unclear from quantitative data, escalate to moderated usability testing. UX research methods for startups provide a framework for structuring those sessions efficiently.

Key takeaways

Above the fold functions as a behavioural threshold where attention drops by an average of 84% below it, making the first viewport the highest-leverage area of any webpage.

Point	Details
Define the fold per device	The fold varies by viewport height, device, and browser chrome; measure it using analytics data and devtools, not a fixed pixel value.
Four core elements always	Headline, subheadline, primary CTA, and one trust signal must all be visible on the smallest target viewport before any other design work.
Mobile-first is non-negotiable	Google indexes the mobile version first; LCP must be under 2.5 seconds and CLS below 0.1 on mobile to meet Core Web Vitals thresholds.
Test one element at a time	Isolate each above-the-fold change in an A/B test and measure CTA click-through rate, scroll depth, and bounce rate before drawing conclusions.
MedwayWebDesign’s approach	MedwayWebDesign builds hero sections and landing pages with mobile-first structure, Core Web Vitals compliance, and conversion-focused copy baked in from the start.

The fold as a design discipline, not a design rule

The most persistent mistake in above-the-fold design is treating the fold as a fixed constraint rather than a behavioural principle. Teams spend considerable effort debating whether a specific element sits above or below a particular pixel line, when the more productive question is whether the first viewport communicates enough value to justify the visitor’s continued attention.

The 84% attention differential that NN/g documented is not an argument for cramming every feature and benefit into the hero. It is an argument for precision: the first screen must do one job exceptionally well, which is to make the visitor confident they are in the right place. A cluttered hero with three competing CTAs, a carousel, a cookie banner, and a chat widget achieves the opposite. The fold rewards restraint.

For small business websites in the UK, the practical priority is almost always the same: a headline that names the outcome the customer wants, a CTA that removes friction from the next step, and a trust signal that reduces the perceived risk of engaging. Everything else is below the fold, where it belongs. The mobile-first design approach that MedwayWebDesign applies to every project starts from that discipline and builds outward.

How MedwayWebDesign can help you get the first viewport right

Getting the first viewport right is the single highest-return investment in a website build, and it is also where most small business sites fall short. MedwayWebDesign designs hero sections and landing pages for UK small businesses and startups with a mobile-first structure, Core Web Vitals compliance, and conversion-focused copy built in from the outset — not retrofitted after launch.

The process starts with an audit of your current above-the-fold area: headline clarity, CTA prominence, trust signal placement, and LCP/CLS performance on mobile. From there, MedwayWebDesign produces a revised hero design grounded in your specific audience and business goals, not a generic template. If you are planning a new build or a redesign, the small business web design guide sets out the full process. To discuss your project directly, contact MedwayWebDesign for a free 20-minute consultation at medwaywebdesign.com.

Useful sources

The following sources informed this guide and are recommended for deeper reading:

The fold manifesto: why the page fold still matters – NN/g
Above the fold: examples, elements & best practices | Omniconvert
What is above the fold? | Mailchimp
Is above the fold really dead? – VWO
Above the fold | Cambridge Dictionary
Above the fold design: what to show in your first screen | Designpixil
Above the fold | Optimizely
10 useful usability findings and guidelines (Smashing Magazine archive)

Above the fold in web design: definition & hero checklist

Table of Contents