Stop 09 · Mobile & Responsive DesignTopics · 1/8

Responsive Design Principles

In short

Your design will be opened on a budget phone, a laptop and a giant monitor, sometimes by the same person on the same day. Responsive design means one layout that bends to fit them all.

Designing layouts that adapt gracefully across different screen sizes — using flexible grids, relative sizing, and breakpoints rather than a single fixed-width layout.

The jaadu pours water from a jug into a tumbler, a tall bottle and a wide bowl lined up on a table.

Think of it like this

Water takes the shape of the glass

Pour water into a steel tumbler, a tall bottle or a wide bowl. It fills each one perfectly without being redesigned. A responsive layout behaves like water: same content, flowing into whatever screen it's poured into.

Watch it happen

Fixed layout vs fluid layout

Fixed width

Designed for exactly 1440px
Side-scrolls on phones
Wastes space on big screens

Fluid and responsive

Columns use percentages or fractions
Images scale inside their box
Breakpoints change layout when needed

Design with flexible grids and relative sizes, then add breakpoints only where the content starts to look broken.

The big ideas

What you need to know

Fluid grids

Columns are sized as fractions of the screen, not fixed pixels, so they stretch and shrink smoothly.

Flexible media

Images and videos should never be wider than their container. They scale down with the layout.

Relative units

Sizes in rem, %, and viewport units adapt to the screen and to the user's font settings.

Content priority

Decide what matters most. On small screens, the most important content comes first.

See it in code

Walk through the code

css

1.product-grid {2  display: grid;3  gap: 16px;4  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));5}6 7.product-grid img {8  max-width: 100%;9  height: auto;10}

1/3A CSS grid with 16px gaps between cards.

A product grid that fits as many 220px-wide cards as the screen allows. One column on phones, four or more on wide screens, with no breakpoints.

Save yourself the pain

Common mistakes

Oops

Designing only a 1440px desktop frame and calling it done.

Do this instead

Design at least a phone and a desktop frame, and check sizes in between by resizing.

Oops

Simply shrinking the desktop layout to fit a phone.

Do this instead

Rethink the layout for small screens: stack columns, enlarge tap targets, and move key content up.

Your mission

Stretch test

~20 min

Quick check

Which approach is most responsive?

Go deeper

1Resize a browser window on a well-designed website and observe how the layout adapts.
2Design a simple layout for 3 different widths: mobile, tablet, and desktop.
3Learn why designing 'flexibly' from the start beats retrofitting a fixed layout later.