Stop 09 · Mobile & Responsive DesignTopics · 2/8

Mobile-First Design

In short

Start with the smallest screen and you're forced to decide what really matters. Add space later and it's easy. Start big and try to squeeze down, and everything fights for room.

Starting the design process with the smallest, most constrained screen size and progressively enhancing for larger screens — forces prioritization of what's truly essential.

The jaadu happily packs a few essentials into a small cabin bag next to a big open suitcase.

Think of it like this

Packing a cabin bag first

If you pack for a cabin bag, you only take what you truly need. Upgrading to a big suitcase later is easy: add the extras. Starting with the suitcase and squeezing into a cabin bag means painful choices at the last minute.

Watch it happen

Growing a product page from phone to desktop

360px

768px

1280px

1/3Phone first: photo, name, price and a big 'Add to cart' button. Reviews and details below. Nothing extra.

The big ideas

What you need to know

Forces priorities

A small screen makes you rank content. What's left on the phone is your real core.

Progressive enhancement

Add layout and features as space grows, rather than removing them as it shrinks.

Matches how people browse

For many products in India, most users are on phones. Design where your users actually are.

Simpler CSS

Developers write base styles for phones and add min-width media queries for larger screens.

See it in code

Walk through the code

css

1.product {2  display: block;3}4 5@media (min-width: 768px) {6  .product {7    display: grid;8    grid-template-columns: 1fr 1fr;9  }10}

1/3Base styles are for phones: everything stacks in one column.

Mobile-first CSS: the default is a simple stacked layout, and the side-by-side grid is added only when the screen is wide enough.

Save yourself the pain

Common mistakes

Oops

Hiding important features on mobile because they don't fit.

Do this instead

If it matters, find a mobile-friendly way to show it, like a collapsible section. Phone users need features too.

Oops

Thinking mobile-first means only designing for mobile.

Do this instead

It means starting there. You still design tablet and desktop, built up from the mobile core.

Your mission

Phone first, then grow

~35 min

Quick check

In mobile-first CSS, what do min-width media queries do?

Go deeper

1Redesign a desktop-first layout starting from the mobile constraint instead.
2Learn why designing mobile-first tends to produce cleaner, more focused desktop layouts too.
3Practice identifying what content or features to hide, not just shrink, on mobile.