Landing pages
Lay out a landing page for phones
Most clicks arrive on a small screen. Design the page for that screen first, then let the wide layout follow.
If you buy traffic, assume the first reading happens on a phone held in one hand. That assumption changes the order of the page more than it changes the colors. A wide desktop mockup hides problems that a narrow screen reveals immediately: a headline that breaks into a nonsense shape, a button that sits below a wall of text, a form label that is smaller than the consent paragraph, and two columns that collapse into a confusing stack. Design the narrow version first. The wide version is the same story with more air, not a different story.
Open the draft on an actual phone, not only in a resized browser window. Resizing catches some layout bugs and misses others, including the way a sticky bar covers the button, the way the keyboard shoves the form upward, and the way a person taps the wrong line because the tap targets are short. Load the page on a cellular connection if you can. A hero image that takes several seconds to appear is not a hero. It is a delay in front of the offer.
The first screen has to contain the exchange
On a phone, the first screen is small. It still has to carry the offer. The headline, one sentence of qualification, and the start of the form or a button that jumps to the form should be visible without a hunt. A full-bleed photograph with the headline in thin white type over a busy roof is a common way to fail this test. If the photograph fights the words, crop it or move it. The words are the product. The photograph is optional support.
Do not pin a promotional banner, a chat bubble, and a cookie wall over that first screen at the same time. Each overlay steals the offer. If a privacy or cookie notice is required, keep it short and movable, and do not let it cover the button that submits the form. A visitor who cannot find the button will not admire your restraint later. They will leave. The same is true of a chat widget that pops open and pushes the headline up. Let the page speak before any widget does.
Type, taps, and the thumb
Body text should be large enough to read without pinching. Consent language does not get an exemption because it is “legal.” If anything, it needs to be as readable as the headline, because it is part of the decision. Sixteen pixels is a reasonable floor for body copy. Labels should sit above the fields, not inside them as placeholder text that disappears when typing starts. Placeholders that vanish are how people submit a number in the name field. A visible label stays put and tells the truth the whole time.
Make the button easy to hit with a thumb. A short, wide button under the last field beats a small button off to one side. Leave space around it so a consent checkbox and the button are not the same tap. If the page uses a checkbox, the box itself must be easy to select, and the sentence next to it must wrap cleanly instead of running off the edge. Test this with a long consent sentence, because the real sentence is always longer than the placeholder “I agree” you used in the mockup.
Stack in the order of the decision
A sensible phone stack is headline, qualification, short proof if you have real proof, form, consent, button, then supporting detail. Supporting detail means the service-area list, the hours, and the explanation of what the visit includes. People who need those details can scroll. People who are ready should not be forced to scroll through them before they are allowed to see the form. Putting the form at the bottom of a long essay is how desktop designs accidentally punish phones.
Repeat the button only if the page is genuinely long. Two buttons that submit the same form are fine. Two buttons that mean different things are not. A “call now” link and a “request a call” form on the same screen are two offers. If both are real, label them as alternatives. If only the form is staffed, do not display a phone number that routes to a voicemail nobody checks. The layout cannot invent an operation you do not have.
Speed and stability
Large images, autoplaying video, and several tags in the header all compete with the form. Use one image that has a stated size so the page does not jump when it arrives. Do not autoplay sound. Ever. A visitor on a bus who gets surprise audio does not think “what a rich media experience.” They think the page is hostile, and they close it. If you include a short video, leave it stopped, with a visible play control, under the offer rather than instead of the offer.
Watch for layout shift around the form. If a late-loading banner pushes the button down while a thumb is moving, you will collect mis-taps and angry people. Reserve space for anything that loads late, or do not load it above the form. This matters even more when a page carries advertising or measurement scripts. Those scripts should not shove the consent text out from under the reader at the moment of the click. A stable page is part of asking clearly.
Check the phone version as a separate page
- Read the first screen with the keyboard closed. The offer is visible.
- Open the keyboard on the phone field. You can still see the label and the button, or you can reach them without guessing.
- The consent sentence wraps inside the screen and the checkbox is easy to hit.
- No sticky bar covers the submit button.
- Tap targets are not crowded together.
- The page is understandable on a slow connection without the hero image.
- A second person can complete a test submission without you coaching them.
When the phone version is clear, widen the window and let the same sections sit in a calmer layout. Do not introduce a second headline for desktop. Do not move the form to a sidebar where the consent text becomes a tiny column. The wide page is the same decision with more margin. If desktop and mobile tell different stories, you are running two campaigns on one address and calling it responsive design.