What does mobile-first mean?

Glossary · Updated October 23, 2026 · Also called: mobile-first design, mobile-first CSS, mobile-first indexing

Definition Mobile-first is a design and development approach that starts with the smallest screen and adds layout for larger screens step by step. In CSS it means base styles for phones plus min-width media queries for wider screens. The same word is used for Google's mobile-first indexing: Google crawls and ranks pages using their mobile version.

Related guide: Responsive Breakpoints in 2026: Which Widths to Design For

Mobile-first design

Designing for a 360–440 px wide phone first forces decisions about what matters: one column, the main action visible, no hover-only menus. Wider layouts are then enhancements. Designing desktop-first and squeezing the result onto a phone usually leaves hidden content, tiny text and elements that stick out past the screen.

Mobile-first CSS

In code, mobile-first means the default rules (outside any media query) are the phone layout, and min-width queries add columns as space grows:

.layout { display: grid; gap: 16px; }            /* phones: one column */

@media (min-width: 48em) {                         /* about 768 px and up */
  .layout { grid-template-columns: 2fr 1fr; }
}
@media (min-width: 75em) {                         /* about 1200 px and up */
  .layout { grid-template-columns: 1fr 3fr 1fr; }
}

The opposite, desktop-first, writes desktop rules by default and undoes them with max-width queries. Both work, but mobile-first stylesheets tend to be shorter: phones don't load and then override desktop rules, and each breakpoint only adds what the wider screen needs.

Mobile-first indexing

Google uses mobile-first indexing for the whole web: Googlebot fetches pages as a smartphone and uses that version for indexing and ranking. If your mobile pages hide content, structured data, image alt text or internal links that the desktop version has, Google doesn't see them. With responsive design both versions are the same HTML, so this problem disappears.

Mobile-first indexing doesn't mean desktop pages don't matter, or that sites without a mobile version are dropped: Google still indexes them, it simply uses whatever its smartphone crawler sees. A page that is slow, broken or cut down on phones is judged by that version.

Google also retired its Mobile-Friendly Test tool and the Search Console Mobile Usability report in December 2023, so checking how pages work on phones is now up to site owners and tools like Lighthouse and MobileCheck.

How MobileCheck checks it

A mobile-first layout should survive the narrowest common phones. MobileCheck runs real phone viewports from 344 px (folded Galaxy Z Fold) to 440 px wide and tablets, and flags content wider than the screen, text that's too small and tap targets that are too small or crowded.

Related terms

• Responsive web design (RWD)Responsive web design is building one page whose layout adapts to any screen width with fluid grids, flexible images and media queries.
• Media queryA media query is a CSS condition (@media) that applies styles only when the device matches it, such as a minimum viewport width or dark mode.
• BreakpointA breakpoint is a viewport width at which a responsive layout changes, set with a media query, for example from one column to two at 600 px.
• ViewportThe viewport is the area of the browser window where a web page is drawn, measured in CSS pixels: about 360–440 px wide on today's phones.

Guides and tools

• Responsive Breakpoints in 2026: Which Widths to Design For
• Google Mobile-Friendly Test alternative
• CSS media query generator

Sources

1. Google Search Central: Mobile site and mobile-first indexing best practices
2. MDN: Using media queries

All 27 glossary terms, A to Z