The definitive guide to landing pages

Message match is the design constraint, not a nicety

The headline, the image treatment and the color the visitor just clicked should all be recognizable on the page they land on. A visitor who arrives somewhere that looks unrelated to the ad leaves before reading a word, and no amount of good copy further down the page gets a chance to work.

This is the one rule that distinguishes a landing page from a site page. A site page sits inside a system and uses the site's components, its type scale, its grounds. A landing page sits at the end of a specific campaign and has to be continuous with that campaign first. Where the two pull in different directions, continuity with the ad wins.

The first screen has to answer three questions

A visitor decides in a few seconds whether they are in the right place. Without scrolling, the page has to say what this is, in plain language rather than a tagline; who it is for, by naming the audience, the role or the situation; and what to do next, as one primary action visible at every viewport.

“Above the fold” is not a fixed height. It is roughly six hundred pixels on a laptop and less on a phone once browser chrome is counted, so test the first screen at a short laptop viewport, which is the worst realistic case rather than the average one. And if a stranger cannot say what you do after reading the headline, the headline has failed regardless of how good it sounds.

One more thing most first screens get wrong: design an invitation to scroll. A section boundary visible at the bottom of the first screen, content partially cut off, or a visible next heading. A first screen that ends in clean white space reads as the end of the page, and a meaningful share of visitors treat it as one.

Compose in sections, and design the extremes

The unit of design on the web is not the page, it is a full-width band with its own internal grid. The page is a vertical sequence of those bands. Two consequences follow, and they are the difference between a page that works and a page that was made responsive afterwards.

• Design the extremes, not the average. A layout that works at 375px and at 1600px will work in between. A layout designed at 1440px and made responsive afterwards almost never does.
• Decide what happens at every breakpoint rather than letting the layout collapse on its own. Add a breakpoint where the layout starts to look wrong, not at a device width from a list.

Stacking order is a decision, not a default: when a split field stacks on a phone, which half goes on top? Usually the one carrying the message rather than the image, but decide it. Text scales less than layout, so body copy stays nearly the same size on a phone while a 72px desktop headline usually becomes 36 to 40. Touch targets at 44 pixels minimum, with real space between adjacent ones. And images need art direction per breakpoint: a wide hero crop is often useless as a portrait crop, so crop for the shape rather than scaling one image to fit all of them.

Scroll is the pacing device, and proof arrives early

A good page is an argument delivered in order. A conventional and effective sequence:

HERO         what it is, who for, primary action
PROOF STRIP  logos, a number, a rating — credibility immediately after the claim
PROBLEM      the situation the visitor recognizes
SOLUTION     how it works, in three or four steps
BENEFITS     outcomes, not features
EVIDENCE     a case study, a testimonial, data
OBJECTIONS   the two or three things that actually block conversion
CLOSE        restate the value, one action

Vary that by purpose, but keep two properties. Proof arrives early, right after the first claim, rather than being saved for the bottom of the page. And the primary action repeats at natural decision points rather than appearing only at the top and the very end.

A landing page should also be short: long enough to answer the objections that block conversion, and no longer. Navigation is usually removed or reduced so the page has one exit rather than a dozen, and a long page repeats its primary action at least twice.

Section rhythm, and the most common reason a competent page feels cheap

The usual failure is that every section is the same: a centered heading, a paragraph, and a three-column card row, over and over. The page is not badly made; it is monotonous, and monotony reads as template.

• Alternate the section archetype. A split field, a full bleed, a grid of parts, a timeline rail, a versus split, a full-width quote, a full-width figure. Consecutive sections should not share a layout.
• Alternate the ground. Light, light, tinted, dark. Ground changes are how a visitor perceives structure while scrolling, and they are the cheapest way to give a long page shape.
• Alternate density. A dense feature grid should be followed by an open statement section.
• Vary section height. Sections of identical height read as a template even when their content does not.
• Keep the vertical rhythm consistent even as the layouts vary: one spacing scale for section padding, one for internal spacing. Section padding is usually much larger than people expect, often 80 to 160 pixels at desktop.

Five interaction states, and the one everybody skips

Every interactive element has five states: default, hover, focus, active and disabled. Plus loading and error for anything asynchronous. Designing only the first is the most common omission on the web.

• Focus states are not optional. Keyboard users navigate by them, and removing the outline without replacing it makes a page unusable. Make the focus ring a deliberate, on-brand, high-contrast design element rather than something to suppress.
• Hover is not available on touch. Nothing important may be hover-only, which rules out a surprising amount of otherwise elegant interaction.
• Loading and empty states are design work. A button that does nothing visible for two seconds after a click gets clicked again, and then you have two submissions.
• Motion should be quick and purposeful: 150 to 250 milliseconds, one easing curve across the page, and respect for a reduced-motion preference.

The form is the conversion, so it is the most important object on the page

For most campaign pages, the form is where the conversion actually happens, which makes it the most important design object on the page and the one most often treated as a utility.

• Every field costs conversions. Ask for what you will actually use now; enrichment can happen later. A form asking for eleven fields against a one-page download is a form most people abandon.
• Labels above fields, always visible. Placeholder-only labels disappear the moment somebody types and are an accessibility failure as well as a usability one.
• One column. Side-by-side fields slow completion and break badly on narrow screens.
• Inline validation on blur, with the error beside the field, stating how to fix it. Never only a red border, and never a list of errors at the top of the page.
• The submit button states the outcome. “Get the report,” not “Submit.”
• Say what happens next, and what you will do with the address, right beside the button. This measurably improves completion.
• Design the success state. A form that clears with no confirmation is a form the visitor will fill in again.

And the one that is not a design point at all: configure submission and tracking only through the destination you have actually agreed on, and never claim a form or an analytics integration was tested from a screenshot. A visual form is not a working integration. A page that looks finished and silently discards every submission is the most expensive bug in this format, because nothing visible is wrong.

Performance is design

A design that loads slowly is a bad design, however it looks in a mockup. Hero images sized and compressed for their real display size at 1x and 2x, not a 4000-pixel original scaled down in the browser. Explicit dimensions on media so the layout does not jump as things load. Web fonts subset and preloaded, with a fallback that does not reflow the page violently. Anything below the first screen loads lazily.

Accessibility, specifically on a campaign page

One h1 per page, then a heading order that does not skip levels, because the heading structure is the page's outline and it is how screen reader users navigate. Real buttons, real links, real lists, real landmarks: a div with a click handler is invisible to assistive technology. Every image has alt text, and decorative images are marked decorative. Link text that makes sense out of context, so “read the 2026 benchmark report” rather than “read more” eleven times. And full keyboard operability in a sensible order, with a skip link to the main content.

What to avoid, named

• Full site navigation competing with the conversion. The page has one exit for a reason.
• A hero that says what the company does rather than what the offer is.
• A form asking for eleven fields against a one-page PDF.
• Multiple competing primary actions, which is the same as having none.
• A hero that is a carousel. The second slide is seen by almost nobody and the first one is now moving.
• Stock imagery filling a section that had nothing to say. The honest fix is to delete the section.