Mobile-First Design — Explained with Examples

Mobile-first design starts with the smallest screen layout and progressively enhances for larger screens, prioritizing core content and performance.

Mobile-first is a design strategy where you begin with the mobile layout (smallest screen) and add complexity as viewport size increases, using min-width media queries. This contrasts with desktop-first (starting with the largest layout and using max-width queries). Mobile-first forces prioritization of essential content, smaller asset sizes, and simplified interactions.

Think of mobile-first like building a house starting from a tiny cabin (mobile) and adding rooms as you expand (tablet, desktop). You never have too much house for the lot. Desktop-first is like building a mansion and then trying to squeeze it onto a small plot — you end up removing wings and rooms (hiding elements with display: none).

Mobile-first aligns with progressive enhancement: the base experience works everywhere, and advanced features layer on for capable devices.

/* Mobile-first (min-width queries) */
/* Base: mobile styles */
.container {
    padding: 1rem;
}

.card {
    width: 100%;
    margin-bottom: 1rem;
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }
    .card {
        width: calc(50% - 0.5rem);
        display: inline-block;
    }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
    .card {
        width: calc(33.33% - 0.67rem);
    }
}

/* Contrast: desktop-first (max-width queries) */
/* @media (max-width: 767px) { ... } — mobile overrides */

Mobile-first advantages: better performance on constrained devices, cleaner code (no unnecessary overrides), and improved SEO (Google mobile-first indexing). Over 60% of web traffic comes from mobile devices.

Responsive Design, CSS Preprocessor, Accessibility, PWA

Responsive Design Guide