The Conversion Gap Nobody Talks About
Desktop landing pages convert at roughly 5%. Mobile converts at about 2.5%.
Read that again. You're getting half the conversion rate from the majority of your traffic. Unbounce's analysis of over 40,000 landing pages confirmed this gap — and in their dataset alone, it represented over 1.3 million missed conversions.
Whenever I bring this up with founders, the response is almost always: "But our site is responsive." And yes, their CSS media queries work. The layout stacks into a single column. The text doesn't overflow. By the technical definition, the page is "mobile-friendly."
But responsive isn't the same as optimized. A responsive page fits on a phone. An optimized page converts on a phone. Those are entirely different engineering problems, and most teams stop at the first one.
I've been analyzing landing pages at roast.page for three years. The mobile experience is one of the areas where I see the most wasted potential — not because the problems are complex, but because they're invisible to anyone designing on a desktop.
Your Thumb Is the Mouse Now
The single most important thing to internalize about mobile design: people use their thumb, not a precision cursor.
Steven Hoober's research on mobile device usage found that 49% of users hold their phone with one hand, operating entirely with their thumb. Another 36% cradle it with one hand and tap with the other thumb. That's 85% of mobile interactions driven by thumbs — a digit roughly 10mm wide trying to hit targets designed for a 1px cursor.
This has direct implications for where you put things on the screen.
The Thumb Zone
Hold your phone naturally in one hand. Sweep your thumb across the screen. Notice what's easy to reach (bottom center and lower-middle), what requires stretching (top corners, far sides), and what's nearly impossible without shifting your grip (upper-left corner for right-handed users).
The bottom third of the screen is the easy zone. The middle third is the stretch zone. The top third is the hard zone.
Now open your landing page on your phone. Where's your CTA? If it's in the top half of the first viewport — which it is on roughly 60% of the pages I review — you've put your most important interactive element in the hardest place to tap. That's not a design choice. It's an oversight that costs you conversions every day.
I reviewed a productivity app last year that had their primary CTA in the upper-right of the hero on mobile. Beautiful on desktop — terrible thumb reach on a phone. Their mobile conversion was about 40% of desktop. They moved the button below the hero text, into the natural thumb zone. Mobile conversion increased 28% in the first two weeks. Same button. Same copy. Same color. Different position.
Tap Targets: The 44px Rule
Apple's Human Interface Guidelines specify a minimum tap target of 44x44 points. Google's Material Design guidelines say 48x48dp. These aren't suggestions from designers who like big buttons. They're usability standards derived from the physical size of a human fingertip.
And yet I regularly see mobile buttons at 32px or 36px tall. They look fine — until you try to tap one while walking, or on a bumpy bus, or with slightly sweaty hands, or while holding a coffee in the other hand. Which is to say: under the actual conditions where most mobile browsing happens.
Quick audit: open your site on your phone and try to tap your primary CTA with your non-dominant thumb while holding a pen in your other hand. If you mis-tap or have to try twice, your button is too small. I'm not being dramatic. This is exactly the level of distraction and imprecision your actual mobile visitors are dealing with.
The fix: make primary CTAs at least 48px tall with generous horizontal padding (minimum 24px on each side). Make sure there's at least 8px of spacing between adjacent tappable elements. And for the love of conversion, don't put two text links right next to each other at 14px font size. That's a mis-tap factory.
The Sticky CTA: Use It
A thin bar fixed to the bottom of the mobile screen with your primary CTA. It sounds simple because it is.
This pattern works for a straightforward reason: on mobile, users scroll. A lot. Unlike desktop, where the full page might fit in two viewports, a mobile layout of the same content can stretch to eight or ten viewports. If your CTA only appears in the hero and at the bottom, there are six viewports in between where a motivated visitor has no way to act.
Shopify uses a sticky mobile CTA on their landing pages. So does Notion. Figma does it. Linear does it. These are design-conscious companies with world-class UX teams. They all independently concluded that a persistent CTA on mobile is worth the screen real estate trade-off.
The implementation details matter:
- Height: 56-64px. Thin enough not to obscure content. Tall enough for a comfortable tap target.
- Appears on scroll. Don't show it immediately — let the hero CTA breathe. Trigger it after the user scrolls past the first viewport.
- Semi-transparent or solid with gentle shadow. It needs to be visible without feeling intrusive. A 1px top border and subtle shadow separate it from content.
- Button text stays short. "Start free trial" not "Start My Free 14-Day Trial With No Credit Card Required." On mobile, button text wraps. Wrapped text looks broken.
Text Size and Readability: Bigger Than You Think
Desktop body text at 16px works fine on a 27-inch monitor at arm's length. On a 6.1-inch phone screen held 10-12 inches from your face, 16px is the absolute minimum. And yet I see mobile body text at 14px or even 13px on pages submitted to roast.page regularly.
Here's the minimum I'd recommend for mobile readability:
One thing I've changed my mind about: I used to think mobile headlines should be significantly smaller than desktop. Now I think they should be similar in visual weight — the reduced screen width naturally creates a different rhythm. A 36px headline on desktop fills one line; on mobile, it might fill two. That's fine. The visual prominence is what matters, not the raw pixel count.
Forms on Mobile: The Silent Killer
If your landing page has any kind of form — email capture, trial signup, contact request — the mobile version of that form is almost certainly losing you conversions.
Desktop users have a physical keyboard, autocomplete, tab navigation, and the ability to see the form and surrounding context simultaneously. Mobile users have a software keyboard that covers half the screen, autocomplete that sometimes works, and no way to see what they're filling out while they're filling it out.
Rules I've seen move the needle on mobile form completion:
- Fewer fields. Every field on mobile costs roughly 50% more effort than on desktop because of the keyboard. If your desktop form has 4 fields, your mobile form should have 2-3. This isn't about laziness — it's about matching the input method to the interface constraint.
- Correct input types. Use
type="email"for email fields (shows the @ keyboard),type="tel"for phone (shows the number pad),inputmode="numeric"for zip codes. Every wrong keyboard layout is a moment of friction. These HTML attributes take 5 seconds to add. - Labels above fields, not inside. Placeholder text as the only label disappears when you start typing. On mobile, where the keyboard covers half the screen, users frequently forget what field they're filling in. A persistent label above the field solves this for free.
- Full-width fields. A 60%-width input field on mobile means smaller tap targets and wasted screen real estate. Every form field on mobile should be full-width.
Images and Speed: The Mobile Tax
Your desktop hero image is 2400px wide and 1.8MB. On a phone screen, it displays at 375px wide. The user downloaded 1.8MB of data to render at 16% of its resolution. On a 4G connection — which is still what most mobile users experience most of the time — that's 3-4 seconds of load time for a single image.
Google's research has consistently shown that 53% of mobile visitors abandon a page that takes more than 3 seconds to load. Not "get frustrated." Abandon. Tab closed. Gone.
The fix is responsive images, and Next.js makes this almost trivial with the next/image component. It generates multiple sizes and serves the appropriate one based on the device. If you're not using responsive images, you're serving desktop-sized files to mobile devices. Your LCP (Largest Contentful Paint) will suffer, your visitors will leave, and Google will rank you lower for it.
Beyond images, audit what's loading on mobile that doesn't need to be:
- Heavy animations that run at 15fps on mid-range phones
- Third-party scripts (chat widgets, analytics, social embeds) that block rendering
- Video backgrounds that auto-play on desktop — on mobile, these often don't play at all, so you're loading a 5MB file for a static poster frame
- Web fonts: if you're loading 6 font weights, consider whether mobile needs all of them. Two weights (regular + bold) usually suffice.
Navigation on Mobile: Less Is Everything
Your desktop nav has seven links: Home, Product, Pricing, Blog, About, Docs, Contact. On mobile, this becomes a hamburger menu that nobody opens, or worse, a horizontal scroll nav that nobody notices.
The best-performing mobile landing pages in our data have minimal navigation: logo on the left, one CTA button on the right. That's it. No hamburger. No links. One clear action.
This feels scary — "what if they want to see pricing?" — but the data supports it. Mobile landing page visitors who arrived from an ad or a link have a specific intent. Your job is to fulfill that intent, not to offer them a buffet of options. Every additional link is an exit ramp. On desktop, the cost of extra nav links is low because they're out of the way. On mobile, they're prominent, they compete with your CTA for attention, and they dilute focus.
If you absolutely need navigation on mobile, limit it to two items plus the CTA: maybe "Pricing" and a hamburger for everything else. But test removing it entirely for campaign landing pages. You might be surprised.
The Mobile Audit: Do This Right Now
Don't use Chrome DevTools mobile simulation. It doesn't capture the actual experience of using a phone — the thumb reach, the keyboard behavior, the scroll feel, the screen brightness in different lighting. Use your actual phone.
The 5-Minute Mobile Audit
- Open your page on your phone. One hand. Outside. Not at your desk under perfect lighting conditions. Actually outside, with screen glare and distractions. Can you read the headline? Can you find the CTA?
- Try to tap the CTA with your thumb. Is it in the easy reach zone (bottom half)? Can you hit it on the first try? Does the button text fit on one line?
- Scroll through the entire page. Does any content feel too dense? Are there sections that feel like work to read? Mark them.
- If there's a form, fill it out. Does the right keyboard appear for each field? Do labels stay visible while typing? How many fields do you have to complete?
- Time the load. Open a fresh browser tab and type your URL. Count seconds until the page is usable. If it's more than 3 seconds, you're losing over half your mobile visitors before they see anything.
Do this audit every time you make a significant change to your page. And do it on an Android phone, not just an iPhone. Android accounts for about 72% of global mobile traffic, and mid-range Androids render JavaScript significantly slower than iPhones. A page that feels smooth on an iPhone 15 can feel sluggish on a Samsung A14.
Why the Gap Exists
The desktop-mobile conversion gap isn't a technology problem. It's a workflow problem. Pages are designed on large screens, reviewed on large screens, approved on large screens, and then a CSS media query makes them "work" on mobile. Nobody sits with a phone in one hand and goes through the entire conversion flow under realistic conditions.
The companies that close the gap — and some have closed it entirely — are the ones where mobile isn't an afterthought but a starting point. Design mobile-first. Test on devices, not simulators. Measure mobile conversion as its own KPI, not a footnote under the desktop number.
Your first impression on mobile is the same 50 milliseconds as desktop. Your CTA needs to be just as clear. Your trust signals need to appear just as early. The principles don't change. The physics of the device do.
68% of your traffic is experiencing your page on a screen they can cover with one hand. Make that experience work.
Want to see how your page performs on both desktop and mobile? Run it through roast.page — the analysis evaluates your page structure, CTA placement, and readability with an eye on the experience real visitors actually have.