Mobile first is a design and development approach in which a website or application is designed first for mobile devices and only afterwards extended for larger screens (tablet, desktop). The order is decisive here: instead of retrofitting a desktop variant to be “mobile-friendly”, the design starts at the smallest screen size, and grows upwards from there. Behind the concept stands a simple reality: more than half of global web traffic comes from mobile devices today, and since 2020 Google has indexed almost exclusively the mobile version of a website. Anyone not taking the smartphone as the starting point inevitably builds past the most important usage scenario.
Mobile first vs. responsive design
The two terms are frequently used interchangeably but describe different things:
| Concept | What it describes |
|---|---|
| Responsive design | A website adapts fluidly to different screen sizes – via CSS media queries, flexible grids, scalable images. |
| Mobile first | The order of development: the mobile variant first, then scaling upwards. |
Mobile first is thus no opposite of responsive design; it’s the approach with which a responsive design is almost always built today. In CSS this shows in how media queries are written: min-width queries (mobile first, then bigger) are mobile first; max-width queries (desktop first, then smaller) are desktop first.
/* Mobile first: base styles apply to small, media queries extend */
.headline { font-size: 1.5rem; }
@media (min-width: 768px) {
.headline { font-size: 2rem; }
}
@media (min-width: 1200px) {
.headline { font-size: 2.75rem; }
}
Why mobile first has prevailed
- Google’s mobile-first indexing: since September 2020, Google primarily uses the mobile version of a website for indexing and ranking. Content shown only on desktop is effectively invisible.
- User behaviour: over 60% of organic traffic runs on mobile. In some sectors (news, local search, social referral) the share exceeds 80%.
- Performance pressure: mobile devices have slower CPUs and fluctuating network connections. Optimise here first and you automatically build leaner.
- Content discipline: the narrow mobile viewport forces designers and editors to show the genuinely important content and calls to action first. What sits at the top on mobile is usually desktop-relevant too.
Effects on the design
Mobile first concretely changes how layouts come about:
- Single-column layouts are the base – columns only appear at larger viewports
- The navigation collapses into a burger menu or a sticky bottom bar: complex mega menus unfold again from tablet upwards
- Touch targets from 44×44 px: buttons and links must be reliably operable with a thumb
- Typography scales along: a base font size of 16–18 px for good mobile readability, larger headlines only from tablet
- Images are delivered responsively:
srcset,sizes, modern formats (WebP/AVIF) drastically reduce data volumes - Conversion paths are simplified: forms with fewer fields, a clearer hierarchy of CTAs
Mobile first and Core Web Vitals
The Core Web Vitals – Google’s performance metrics – are measured on mobile. That makes mobile first indirectly an SEO factor:
- LCP (Largest Contentful Paint): on mobile, the main element should appear in <2.5 s
- CLS (Cumulative Layout Shift): the layout mustn’t jump, particularly critical with lazily loaded images and ads
- INP (Interaction to Next Paint): tap response under 200 ms
Implement mobile first consistently and you almost always have green Web Vitals too.
Common mobile-first mistakes
- Hidden content: hiding content on mobile via
display: none– Google then possibly doesn’t see it in the index at all - Tap targets too small: links directly next to each other without sufficient spacing
- Font sizes under 16 px: iOS then zooms in when tapping a form field – bad UX
- Huge hero images without
srcset: mobile needlessly loads the desktop asset - Horizontal scroll: an element is wider than the viewport and tears the page open
Frequently asked questions about mobile first
Is mobile first mandatory for every website? Practically yes. Even sectors with predominantly B2B desktop use have over 30% mobile traffic today – mostly at first contact. Appear poorly there and you lose the lead before the desktop ever comes into play.
Mobile first or a dedicated mobile domain (m.example.com)? A dedicated m. subdomain is outdated and creates technical problems (duplicate content, redirect chains). Today’s standard is responsive mobile first on one domain.
Does mobile first also work for complex B2B software? Yes, but with a sense of proportion. Data tables, multi-pane layouts and drag-and-drop workflows are often not sensibly operable on mobile. Here, a reduced read-only mode is usually offered on mobile while full functionality stays desktop-only.
Does mobile first change the effort involved? Overall no – the effort just shifts. The mobile variant costs more time up front, but the desktop layout then emerges faster through additive extension.
Conclusion
Mobile first is the standard today, not a recommendation. Anyone planning a new website or overhauling an existing project should take the mobile use case as the starting point, not for trend reasons but because Google, users and performance metrics are decided there. We implement mobile first consistently in every project, whether website development, web shop or relaunch. If you’d like an outside view, simply get in touch.