# What is Mobile-First Design?

What is Mobile-First Design? A design approach that starts with the mobile screen and expands to desktop. Google indexes based on the mobile version.

## How it works in practice

Mobile-first means: when designing a page, view it on an iPhone 14 first, then on a MacBook. An element that looks stunning on desktop but breaks on mobile is broken for everyone. Google also ranks based on mobile experience.

## Related metrics

- Responsive Design — mobile-first + responsive is the right combination
- Core Web Vitals — measured separately for mobile
- mCommerce — mobile-first is the foundation for mCommerce
- PWA — mobile-first + PWA delivers the best experience

## Common misconception

'Responsive design = mobile-first.' No. Responsive means it adapts to any screen size. Mobile-first means planning from mobile first. A responsive site that wasn't designed mobile-first usually has a poor mobile experience despite adapting technically.

## How to fix it

Poor mobile experience? (1) Google PageSpeed Insights → Mobile tab, (2) Check tap-target size — buttons at least 48×48px, (3) Check font size — 16px minimum, (4) Check navigation — is the hamburger menu clear? (5) Check forms — are fields big enough for a thumb?

## Real-world example

Bag store: desktop CR 3.1%, mobile CR 0.7%. Mobile audit: the ATC button was partly hidden on an iPhone SE. Fixed mobile CSS in 4 hours. Mobile CR rose to 1.9%. With 68% mobile traffic, that's $13,000 in additional revenue/month.

## Where to start

Test mobile experience right now on 3 device sizes: iPhone SE (375px), iPhone 14 (390px), Galaxy (412px). If mobile CR is below 60% of desktop CR, a mobile-first fix is urgently needed.

---

Category: Technology · From the [Jimmy OS KPI Glossary](https://jimmy-os.com/glossary/kpi.md) · Source page: https://jimmy-os.com/glossary/kpi/mobile-first-design