Quick answer
Mobile first is an approach that designs and builds for small screens and constrained conditions first, then enhances for larger screens; in SEO, mobile-first indexing means Google uses the mobile version of a page for indexing and ranking.
What does mobile first mean?
Mobile first is an approach to designing and building websites and apps that starts from the smallest screen and the most constrained conditions (touch input, limited bandwidth, interrupted attention) and then adds layout and features for larger screens. The term was popularized by Luke Wroblewski in 2009 and became standard as mobile traffic overtook desktop.
The phrase also has an SEO meaning: mobile-first indexing, Google's practice of using the mobile version of a page's content for indexing and ranking.
Mobile-first design principles
| Principle | In practice |
|---|---|
| Content priority | Decide what matters most because a phone screen has room for little; put it first |
| Progressive enhancement | Build a working core for small screens and basic browsers, then enhance for larger ones |
| Touch-friendly | Tap targets of at least 24×24 CSS pixels with spacing; primary actions within thumb reach |
| Performance budget | Small images, few scripts, fast first render on mobile networks |
| Readable without zoom | Body text around 16 px, responsive layout, no horizontal scrolling |
| Forms for thumbs | Few fields, correct input types, autofill |
In CSS, mobile first usually means writing base styles for small screens and adding min-width media queries for larger ones.
Mobile-first indexing
Google completed its move to mobile-first indexing for the web: Googlebot primarily crawls and indexes pages with a smartphone user agent. Practical consequences:
- Content, headings, structured data and internal links must be the same on mobile as on desktop.
- Content hidden or missing on mobile may not be indexed.
- Mobile page speed and usability affect how pages perform.
- Lazy-loaded content must load without user interaction that Googlebot cannot perform.
Mobile first vs responsive vs adaptive
| Mobile first | Responsive design | Adaptive design | |
|---|---|---|---|
| What it is | A design and build strategy | A technique: fluid layouts and media queries | Separate fixed layouts per device class |
| Starting point | Smallest screen | Any | Each breakpoint designed separately |
| Relationship | Usually implemented with responsive design | Can be mobile first or desktop first | Alternative to responsive |
Measuring whether mobile first works
Compare mobile and desktop on: share of traffic, conversion rate per funnel step, Core Web Vitals at the 75th percentile, bounce rate and errors. A large mobile gap at one step points to a mobile-specific problem.
Mobile first in TapCub
Break down any report by device type, browser and OS; check real-user Core Web Vitals on mobile in Performance; and compare mobile and desktop funnels. See check Core Web Vitals and mobile CRO.
Related terms: Core Web Vitals, page experience, indexability.
Sources
- Wroblewski, L. (2011). Mobile First. A Book Apart.
- Google Search Central. Mobile-first indexing best practices.
- W3C. WCAG 2.2: target size (minimum).
Was this explanation clear?
We use your answers to fix and expand this page.
Couldn’t send. Please try again in a minute.
Thanks for the feedback. We’ll use it to improve this page.You’ve already sent feedback on this page. Thanks.
Customer Experience Consultant
Writes about live chat, visitor conversations, and self-service, sharing practical ways to make customer communication clearer and more effective.