Above the Fold: What a Landing Page Must Show First

The first screen of a landing page - what is visible before scrolling, on the device the visitor is holding - must do three jobs: confirm the promise that brought them (the product or offer they clicked), state the essential terms (price or its anchor, and the delivery or commitment terms), and show the primary action. Everything else, however worthy, queues below. 'Above the fold' is not a rule that visitors never scroll - they scroll happily on pages that earn it - it is the observation that the decision to scroll is made from what the first screen shows. Earn the scroll first; then the rest of the page can do its work.

For most small stores the majority of landing traffic is mobile, and the mobile first screen is roughly a third of the desktop one once the browser chrome, the cookie banner and the sticky header have taken their share. Design the first screen for that reality: headline, one supporting line with the terms, the lead image, the action. If a cookie banner or promo bar pushes the offer off the first screen, the banner is what your campaign is actually advertising. Check on a real mid-range phone, not the simulator at desktop width - the difference is where landing pages quietly fail.

Sequence matters within the screen: headline first (the offer in words), then the visual that proves it is the thing they clicked, then the terms line, then the action. A common inversion puts a large lifestyle image first and pushes the headline below it - the page looks beautiful and communicates nothing until scrolled, spending the confirmation moment on atmosphere. Atmosphere has its place further down, where the visitor has decided to stay. In the first screen, clarity outranks mood at every position.

The primary action should be visible in the first screen and named for what it does: 'See the boots - from 180 dollars', 'Book the tasting box', 'Get the quote'. Vague buttons ('Learn more', 'Continue') make the visitor guess the commitment, and guesses default to no. If the page is long, repeat the action at decision points and consider a sticky action bar on mobile - tested carefully, since a sticky bar eats the same screen space this guide is rationing. The action's visibility is also a promise: what happens on tap should be exactly what the button said.

The brand story, the full feature list, the founder photo, the complete review wall, the related products, the newsletter invitation - all can earn places lower on the page, where an interested visitor will meet them in a better frame of mind. Pushing down is not deleting; it is sequencing generosity. A useful audit: list everything in the current first screen, mark each item confirm, terms, action or other, and move every 'other' below until the three jobs are clean. Pages routinely gain a clearer first screen and lose nothing their visitors missed.

The bottom edge of the first screen should hint that more exists: a headline of the next section peeking, an image that continues, a question raised and answered below. A first screen that ends in a hard blank edge reads as the whole page to a glancing visitor. This 'fold line' craft is small and learnable: leave the next section visibly started. With that hint in place, the old fear that visitors never scroll mostly dissolves - they scroll through pages that keep promising answers, and stop on pages that stop promising.

Mobile-first does not mean desktop-never. Considered purchases - the expensive, the technical, the bought-for-work - still close disproportionately on desktop, where the first screen is taller and comparison tabs sit open beside it. Design the desktop first screen with the same three jobs, using the extra room for the terms and a proof element rather than for a larger photograph. Then verify neither version borrows trouble from the other: a desktop hero cropped carelessly for mobile is the most common way this guide's audit fails in practice.