Engagement

Above the fold

Also called initial viewport.

Above the fold is the part of a page a visitor can see before the first scroll. The line moves with every screen, so there is no single fold.

How it is measured

Measure the viewport height of real visits, then check which elements sit fully inside it. Tools draw the fold at the median or a chosen percentile of screen heights, and a browser device toolbar lets you check the common sizes by hand.

Nothing in a pageview count tells you where the fold was. You need viewport sizes from your analytics, or a manual check on a small phone and a laptop for the pages that matter.

Worked example

A cookware shop opens its product page on a 667 px tall phone. The photo, the title and the price fit, but the Add to cart button starts at 810 px. On a 1,080 px desktop screen the button is visible at once.

Phones are 62 percent of the shop's traffic. Moving the button up by 180 px lifts cart adds on phones from 3.1 to 3.9 percent in two weeks.

How it differs

Above the fold is what loads into the first screen. Below the fold is what needs a scroll. The viewport is the window that defines the line. Anything a visitor needs to decide whether to stay belongs in the first group.

Common errors

Designing for one monitor. Treating the fold as a fixed pixel number. Cramming everything into the first screen and hurting readability. Forgetting that cookie banners and sticky headers eat the top 200 px. Assuming nobody scrolls.

In practice

Open your three busiest landing pages on a small phone and a laptop this week. Write down what a visitor sees without scrolling, then move the one action you want into that first screen.

See also

Below the fold, Viewport, Landing page experience

Sources

Count this on a real site.

Watch my website