By Mehdi HassanWhy do pages convert worse on mobile?
Pages usually convert worse on mobile because they were designed and reviewed on a desktop screen, then squeezed into a phone by the layout engine. The words are the same, but the order, spacing and interaction change: the headline wraps to six lines, the button drops below the fold, and the form summons the wrong keyboard. Nobody decided those things; they just happened.
Intent also differs. Plenty of mobile visitors are researching, not ready to fill in a long form, so a page that only offers "Book a demo" gives them nothing to do. Mobile conversion optimization deals with both problems. It's one part of the wider process in our conversion rate optimization guide, and it's the part most teams skip because the design review happened in Figma at desktop width.
How do you start mobile conversion optimization with an audit?
Audit mobile on a real phone, on a cellular connection, with the analytics open beside you. A resized desktop browser hides the problems that matter: the on-screen keyboard covering fields, slow script loading, tap targets that are too close, and sticky elements fighting each other.
Split your analytics by device
In GA4, compare conversion rate and engaged sessions for mobile and desktop on each key page. A big gap tells you where to look first.
Watch mobile recordings
Filter session recordings to mobile and watch the sessions that reached the form but didn't submit. Our landing page audit checklist lists the patterns to look for.
Complete the conversion yourself
Fill in the form on a phone, with autofill on and off. Note every time you zoom, mistype or have to dismiss something.
Check the first screen
Screenshot the top of every key page on a small phone. If the headline, offer and button aren't all visible, that's your first fix.
Test on a slow connection
Throttle the connection in your browser's developer tools and reload. Anything that shifts, flickers or blocks taps goes on the list.
Write each problem down with the page and the device. That list becomes the input for a CRO audit or a straight fix list if the problems are obvious.
What should a mobile landing page hero include?
A mobile landing page hero should show the headline, one line of supporting copy and the primary button in the first screen, without scrolling. On desktop those sit side by side with an image. On a phone the image often stacks on top and pushes the offer out of view, so the visitor's first impression is a product screenshot they can't read.
- Shorten the headline for small screens, or set it smaller. A headline that wraps to six lines buries everything under it.
- Move the visual below the button on mobile, or crop it to the part that reads at that size.
- Keep one primary button. Two side-by-side buttons often stack into two full-width buttons that compete equally.
- Cut the background video on mobile. It's heavy, often doesn't autoplay, and rarely says more than a still image.
- Check the navigation height. A tall header plus a cookie banner can take a third of the screen before your copy starts.
The words matter more than the layout here. If the headline needs a long subheading to make sense, mobile will expose it, because there's no room for the subheading to sit beside it. That's usually a sign the landing page isn't converting on desktop either, just less visibly.
How do you fix forms on mobile?
Fix mobile forms by making the phone do the work: the right keyboard for each field, autofill that actually fills, and as few fields as the follow-up truly needs. Typing on a phone is slow and error-prone, so every field you cut or auto-complete matters more than it does on desktop.
Field | What breaks on mobile | Fix |
|---|---|---|
Text keyboard, autocorrect capitalises the first letter | Use the email input type, turn off autocapitalize and autocorrect | |
Phone | Full keyboard, unclear format | Use the tel input type and accept any format |
Name | Autofill doesn't trigger | Add the right autocomplete attribute |
Company size | Tiny dropdown hard to tap | Use large radio buttons or tappable chips |
Message | Keyboard covers the field | Make it optional or remove it |
Submit button | Hidden behind the keyboard | Keep it visible and full width |
Put labels above fields, not inside them as placeholder text that vanishes when typing starts. Show error messages next to the field that caused them, in plain words, and keep what the visitor already typed. MDN's documentation on the autocomplete attribute lists the values browsers recognise.
How should tables and pricing work on a mobile landing page?
Tables on a mobile landing page should be rebuilt as stacked cards or a toggled view, not shrunk or scrolled sideways. A three-plan pricing table with twelve rows of features is readable on a monitor and unreadable on a phone, and horizontal scroll hides the columns people came to compare.
For pricing, show one plan per card with its price, who it's for and its three most important inclusions, then link to the full comparison. For feature comparisons, let the visitor pick two options to compare rather than showing every column at once. For spec tables, turn each row into a label and value pair. Each of these needs design time, which is why it's skipped, and why pricing pages often lose mobile visitors at exactly this point.
Hypothetical example: a pricing table rebuilt for mobile
For example, suppose a B2B SaaS pricing page has three plans and a 14-row feature grid. On a phone the grid scrolls sideways, the plan names scroll out of view, and visitors can't tell which tick belongs to which plan.
The mobile rebuild uses three stacked cards, each with the plan name, price, a one-line who-it's-for and four key inclusions. Below the cards, a toggle opens the full grid with two plans at a time and the plan names pinned to the top. The desktop layout stays as it was. This is an illustration of the approach, not a measured result.
Does page speed affect mobile conversion rate?
Page speed does affect mobile conversion rate, but less dramatically than the most-shared statistics claim. The widely repeated "1 second costs 7% of conversions" line misreads the original SOASTA data, which showed about 7% for a 100-millisecond delay and about 20% for one second. A SiteSpect controlled test found a 4.4% drop on mobile when pages were slowed, which is smaller but still real.
- Conversion change linked to a 100ms delay in the original SOASTA data
- ~7%
- Conversion change linked to a one-second delay in the same SOASTA data
- ~20%
- Mobile conversion drop in a SiteSpect controlled speed test
- -4.4%
The practical point is that phones feel slowness more than laptops. Chat widgets, heatmap tools, tag managers and font files that load in a blink on fibre take much longer on a mid-range phone. Remove scripts that don't earn their place, delay the rest until after the page is usable, and read our breakdown of whether website speed affects conversions before you spend weeks shaving milliseconds.
What should mobile visitors do if they're not ready to convert?
Give mobile visitors a smaller next step when they're not ready for the main conversion. A phone visitor reading on a commute is unlikely to book a 30-minute demo right now, but they might send themselves a link, watch a two-minute video or join a list. Offering that step keeps them in the funnel instead of losing them.
- Email me this page or a short product summary, so they can come back on desktop.
- A short product video that plays inline and shows the product in use.
- A calendar booking link for later in the week instead of a long form now.
- A tap-to-call or chat option for high-intent visitors on service pages.
Track these as secondary conversions so you can see whether mobile visitors return and convert later. Our guide to landing page conversion tracking shows how to set them up in GA4 without muddying the primary goal.
