Mobile-First Isn't Always Right. Here's How to Actually Think About Screen Size.

Most responsive design advice assumes mobile-first is always the answer. It isn't. This post breaks down when it applies, when it doesn't, and the specific UX and CRO changes that make the biggest difference at different screen sizes.

Mobile-first became the default answer to responsive design so quickly that most people stopped questioning it. Google pushed it for SEO. Design systems were built around it. Agencies started pitching it as best practice without much nuance attached.

And in a lot of cases, it is the right approach. But "mobile-first" has become one of those phrases that gets applied reflexively, without asking the more useful question: who is actually using this site, on what device, and what are they trying to do when they get there?

That question changes things considerably.

What mobile-first actually means

There's a distinction worth making early. Mobile-first as a development strategy means writing CSS for small screens first and layering in complexity for larger viewports using min-width media queries. It tends to produce leaner, more considered layouts because you're forced to decide what's essential before you start adding.

Mobile-first as a design philosophy means something broader. It means designing the experience for the most constrained context first, with the assumption that a significant portion of your users are on a phone, probably on a middling connection, almost certainly using their thumb.

Both are valid. But neither is a universal law.

When mobile-first is the obvious call

For most consumer ecommerce, mobile traffic long ago overtook desktop. If you're selling clothing, homeware, gifts, food or anything that gets discovered through Instagram or TikTok, the majority of your visitors are on a phone. Often by a significant margin.

The behavioural pattern here matters too. Mobile users in ecommerce tend to be in discovery mode: browsing, comparing, saving. They're forming impressions quickly. Friction is fatal. A product image that doesn't fill the screen properly, a font that requires pinching, a checkout flow that wasn't designed for a thumb: these things don't just create mild annoyance. They create doubt, and doubt kills conversions.

For this audience, designing desktop-first and then squashing it down to mobile is genuinely backwards. You end up making compromises in the wrong direction.

When it's more complicated

B2B, SaaS, professional services, and tools that involve extended decision-making or complex input are a different story.

A procurement manager researching suppliers is probably at a desk. Someone configuring a software subscription with multiple user tiers is not doing that on their phone. An architect specifying materials for a project is working with a large screen and expecting to be able to see detail.

In these cases, starting with mobile constraints can lead to interfaces that feel underpowered on the devices where the actual work happens. You can end up hiding functionality, compressing navigation, and simplifying layouts in ways that make the desktop experience worse rather than better.

The answer isn't to ignore mobile for these products. It's to understand the context in which different decisions get made. Someone might discover your SaaS tool on their phone. They're unlikely to complete a 14-step onboarding flow on it.

What analytics actually tells you

Before making any strong decisions about which direction to design from, look at your own data. Not industry averages. Your site.

Device breakdowns in Google Analytics or whatever you're using will tell you the split, but go a level deeper. Look at where conversions are happening. If mobile accounts for 65% of sessions but 20% of conversions, that's not just a responsive design problem. It might mean people are researching on phone and buying on desktop, which is a known pattern for higher-consideration purchases. Or it might mean your mobile experience is genuinely broken somewhere. The numbers alone don't tell you which. Session recordings do.

Tools like Hotjar or Microsoft Clarity let you watch actual sessions by device type. Five minutes of watching someone struggle through your mobile checkout is more instructive than a week of staring at bounce rate data.

The CRO and UX stuff that actually moves things

Knowing your audience's device split is the starting point. What you do with that information is where it gets practical.

Touch targets need to be genuinely usable. The Apple HIG spec suggests 44x44pt as a minimum touch target. In practice, anything smaller than that on a primary action, a navigation item, or a form element is creating unnecessary errors. Mis-taps on a mobile checkout are not a small thing. Every error adds friction, and friction at the point of payment is where you lose people.

Hierarchy on small screens needs to be more aggressive than on large ones. Desktop layouts can carry more visual weight because the eye has room to scan. On mobile, people are scrolling fast and making quick judgements about what's relevant. If your most important content, whether that's the price, the delivery promise, the key product benefit, isn't visible above the fold or near the top of the scroll, it often doesn't register at all.

Form design on mobile deserves its own audit. Most checkout abandonment problems I find in audits have at least one form-related cause. Fields that trigger the wrong keyboard type (a numeric field opening a full QWERTY, or an email field without the @ symbol prominent), autocomplete that's been disabled for no good reason, address fields that don't use postcode lookup. These are small things that compound into a frustrating experience.

Images are doing different work at different sizes. A product image on a 1400px widescreen has room to show context, environment, lifestyle. The same image cropped to a 390px mobile viewport might lose all of that and just show the product floating against a background. Art direction for responsive images, using the HTML picture element to serve different crops at different breakpoints, is one of those things that rarely gets done because it requires more production effort. It's also one of the things that makes the most visible difference to mobile product presentation.

Navigation patterns need rethinking, not just collapsing. The standard mobile navigation pattern is to collapse everything into a hamburger menu. It works. It's also a pattern that reduces discoverability, because content that's hidden behind a tap gets significantly less engagement than content that's visible. For ecommerce specifically, there's usually a case for keeping high-value categories accessible without requiring a menu open. Persistent category tabs, a sticky search bar, or even a simplified bottom navigation on mobile can perform considerably better than a hamburger that hides everything.

The thing most people get wrong about responsive design

Responsive design is often treated as a layout problem. Make the columns stack, shrink the font slightly, hide a few sidebar elements. Done.

The better way to think about it is as a context problem. The person on a phone is often in a different situation, with different intentions, and different tolerances for complexity, than the person on a desktop. Sometimes that's a radical difference. Sometimes it's minimal.

The question to keep asking is: what does someone need to be able to do at this screen size, and does the current design let them do it without thinking? If the answer requires hesitation, that's where the work is.

Responsive design problems are often invisible until you watch someone actually use your site. If you're not sure how your mobile experience is holding up, a UX audit will find exactly where it's breaking down. Find out how I work.