---
name: mobile-first-design
description: Use when asked to design or build starting from the smallest screen and scaling up — content/feature prioritization, responsive design, progressive enhancement, mobile-first SEO/indexing — as a design philosophy distinct from responsive design alone.
---

# Mobile-First Design

Mobile-first design is a design philosophy in which the design process
starts with the mobile-device experience and then scales up to larger
screens (tablets, desktops) — focused on delivering an optimal
experience on smaller screens with limited space, processing power, and
bandwidth.

## The approach

Designing for the smallest screen size first — typically a smartphone —
and working up to larger screens forces designers to prioritize content
and features, and think carefully about the most efficient way to
present information. Mobile-first design encourages techniques like
responsive design and progressive enhancement to keep the experience
consistent across all devices.

## Why start small

Mobile devices are the primary way most people access the internet —
more than half of internet traffic comes from mobile, and growing.
Designing mobile-first ensures a positive experience on the
constraint-heaviest, most common device category, rather than treating
mobile as an afterthought squeezed out of a desktop-first design (where
content and features designed for a large screen often get awkwardly
cut down rather than deliberately prioritized).

## SEO benefits

Google has stated that mobile-friendly websites rank higher in search
results, and uses mobile-first indexing — meaning the mobile version of
a site is treated as the primary version for indexing and ranking, not
just an alternate view of a "real" desktop site.

## Mobile-first vs. responsive design alone

Responsive design (layouts that adapt to different screen sizes) is a
*technique* mobile-first design commonly uses, but the two aren't
identical: a responsive design can still be built desktop-first,
designing for the large screen and then adapting downward, which often
results in mobile experiences that feel like a compressed afterthought
rather than a first-class design. Mobile-first specifically means the
smallest-screen experience is designed and prioritized *first*.

## Common pitfalls

- **Building responsively but designing desktop-first anyway** — using
  responsive techniques doesn't automatically produce a mobile-first
  result if the design process and priorities were actually set for the
  desktop experience first.
- **Cramming every desktop feature into mobile** — mobile-first design
  is meant to force real prioritization; trying to fit everything from a
  desktop design onto a small screen defeats that purpose.
- **Ignoring performance/bandwidth constraints** — designing visually
  for a small screen while still shipping desktop-scale assets and
  scripts misses a core part of the mobile-first rationale.
- **Treating mobile-first as "mobile-only"** — the goal is to prioritize
  and then scale up thoughtfully, not to neglect what a larger screen's
  additional space genuinely allows.

## Learn more

- [[user-centred-design]] for the broader design discipline mobile-first design sits within.
- [[front-end-design]] for the implementation-level responsive and progressive-enhancement techniques mobile-first design relies on.