The mobile conversion gap

Mobile’s share of web traffic crossed 60% in 2025 (Statista) and shows no sign of receding. Most CRO advice acknowledges this and moves on. The implementation almost always lags: design happens on a 27-inch monitor, gets shrunk to a phone-shaped frame at the end of the process, and the specific things that break in that shrinking get treated as acceptable losses.

We wanted to quantify those losses. So we took 1,000 active landing pages from our dataset and scored each one twice — once at a 1280×800 desktop viewport, once at a 390×844 mobile viewport that matches an iPhone 13. Same scoring rubric, same reviewers, two independent scores per page. Then we computed the paired difference for each dimension.

The paired-difference design matters. We’re not comparing one set of pages to a different set — we’re comparing each page to itself. The 9-point gap we report isn’t explained by mobile-only pages being worse pages overall. It’s explained by the same page losing points when scored on the viewport its visitors actually use.

Copy and Differentiation are essentially identical across viewports — the words don’t change when you shrink the screen. Everything else loses ground, and the CTA, Hero, and Technical dimensions account for over 60% of the total gap. Each of those is fixable without rewriting content.

The mobile gap isn’t a content problem. It’s a layout problem masquerading as a design preference.

The pattern repeats so consistently we could detect it from a page screenshot: at desktop width, the hero shows an image (often a product screenshot) next to the headline + subhead + CTA stack. At mobile width, the image moves above the text stack, pushing the CTA off-screen. The page now requires a scroll to act on.

Pages with the CTA visible above the mobile fold scored an average of 6.4/10 on the CTA dimension. Pages with the CTA below the fold scored 4.9/10. The 1.5-point gap is independent of the copy effect — even pages with the best CTA copy lose ground when visitors have to scroll to find them.

What does the fix look like?

Three options, in order of cost:

1. Reorder the hero stack on mobile only. Put the CTA above the hero image. Five lines of CSS. Visually ugly on some templates, but it works.
2. Add a sticky bottom CTA. A fixed bar at the bottom of the mobile viewport with the primary action. 19% of pages in our dataset use this; those pages score an average of 3 points higher on the CTA dimension.
3. Compress the hero image. Many pages can shrink the hero image enough to fit everything above the fold. The trade-off is image impact for CTA visibility, which our data suggests is the right trade.

The 44×44 pixel minimum comes from research on adult fingertip surface area: anything smaller forces users to aim more precisely than is comfortable, which produces mis-taps, frustration, and abandonment. The number is in Apple’s Human Interface Guidelines, Google’s Material Design specification, and WCAG 2.1 Success Criterion 2.5.5.

35% of pages in our dataset fail this on at least one critical interactive element. The most common offenders, in order:

• Inline text links styled as CTAs — “Learn more,” “See features,” “Read case study.” Visually clear on desktop, too small to tap on mobile.
• Form input fields — Some templates ship with 40px or smaller input heights. They look slim and modern. They’re also hard to tap accurately.
• Cookie banner buttons — “Accept” and “Reject” tabs that fail the 44px threshold are surprisingly common. (These don’t affect conversion directly, but they affect accessibility audits.)
• Navigation hamburger icons — when the icon itself is 30×30 instead of 44×44.

The fix is a single CSS rule per element type: min-height: 44px; min-width: 44px;. Pages that pass the tap target test score 2.4 points higher on the CTA dimension on average.

What about mobile body text size?

Body text below 14px reads as cramped on mobile. 34% of pages in our dataset ship body text at 12–13px on the mobile viewport — usually because the desktop CSS doesn’t scale. Apple’s default minimum for accessibility is 16px. We recommend 15–16px for body, 13–14px for caption-style content. Pages with mobile body text below 14px scored 1 point lower on Visual Design — small but consistent.

Mobile fails the “Good” threshold on every Core Web Vital metric in our median data. Desktop passes all four. The mobile gap isn’t a Google scoring quirk — these metrics correlate with actual visitor behavior. Each additional second of LCP increases bounce probability by 32% (Google Web Vitals report, 2024). Pages with LCP above 4s score 12 points lower on overall page score in our data, not just on the Technical dimension.

The three highest-leverage mobile performance fixes:

1. Compress the hero image. Use modern formats (AVIF or WebP) and serve appropriately sized images per viewport. Hero images are the dominant LCP element on most landing pages. Compressing them from 800KB to 80KB routinely cuts mobile LCP by 1–1.5 seconds.
2. Defer or remove third-party scripts. Chat widgets, analytics scripts, A/B testing libraries, marketing pixels — they add up. Each one blocks rendering until it loads. Audit your network tab; cut what you don’t use; defer what you do.
3. Reserve space for images and ads. CLS happens when content shifts during load. Always set explicit width and height attributes on images (or use aspect-ratio in CSS). 64% of pages we audited fail to do this.

Open your live landing page on a real phone (not just dev tools). Don’t scroll. Then run through this list. Most pages will find 2–4 of these issues. Each fix is independently worth shipping.

1. Is the primary CTA visible without scrolling? If no, reorder the hero stack on mobile. Five lines of CSS.
2. Tap your primary CTA with your thumb. Did you hit it accurately on the first try? If you mistapped or had to aim carefully, the target is too small. Set min-height: 44px; min-width: 44px;.
3. Read your body copy at arm’s length. Squinting? Mobile body text below 14px reads as cramped. Bump it to 15–16px.
4. Check your viewport meta tag. Open page source, find <meta name="viewport">. If it contains maximum-scale=1 or user-scalable=no, delete those. Pinch-to-zoom is an accessibility requirement, not an optional feature.
5. Run PageSpeed Insights on the mobile URL. If LCP is over 3 seconds, your hero image is probably the problem. Compress and re-test.
6. Consider a sticky bottom CTA. If your page is more than 2 screen-heights deep on mobile, a persistent CTA is worth testing. Pages with sticky CTAs averaged 3 points higher in our data.

Then re-score the page with the mobile page analyzer or run a full page analysis. We routinely see mobile scores move from 38 to 52 with these six fixes alone. The desktop score barely changes, but the mobile traffic — the majority of visitors — finally gets a page that works for them.