Skip to main content
UI Coach Logo

Topic

Responsive Design

Breakpoints, fluid layout, and interfaces that hold up across devices.

Responsive design is the work of keeping the same product usable from a phone to a wide desktop. Content priority and layout reflow matter more than hiding everything behind a hamburger.

UI Coach guides

Start here

GuideUI CoachResponsive Design

Responsive UI Design

Responsive product UI: what to keep, what to reflow, and how to avoid hiding the real task behind a hamburger.

Read the guide

From the community

Latest articles

Ethan Marcotte · <name>Ethan Marcotte</name> · May 28, 2020

Responsive design: seams & edges.

In some ways, responsive design was an attempt to move past the idea of a “page.” How’s that worked out for us?

Read

Ethan Marcotte · <name>Ethan Marcotte</name> · May 25, 2025

Responsive web design turns fifteen.

The original “Responsive Web Design” article was published fifteen years ago. Time’s weird, man.

Read

Manuel Matuzovic · Jan 27, 2023

Day 90: scoped styles in container queries

Rules within a container query only apply to descendants of that container. If you write a media query and you put rules in the media block, the rules apply to the entire document. Apply rules @media (min-width: 1024px) { * { outline: 4px solid } } @media (min-width: 1024px) { .demo1, .demo1 * { outline: 4px solid } }.

Read

Ethan Marcotte · <name>Ethan Marcotte</name> · May 25, 2020

Responsive web design turns ten.

The original “Responsive Web Design” article was published a decade ago! Here’s how it happened, and who helped make it happen.

Read

Manuel Matuzovic · Dec 23, 2022

Day 65: using the em unit in container queries

Relative units used in container queries work differently than relative units in media queries. If you use em in a media query, the font-size of the , , or any other element on the page doesn't matter. That's because relative length units in media queries are based on the initial value , which means that units are nev.

Read

Manuel Matuzovic · Dec 29, 2022

Day 69: width in container queries

In a media query, it’s obvious what width means. It always refers to the width of the viewport. With size container queries it’s not that obvious. /* Kicks in when the viewport has a minimum width of 500px */ @media (min-width: 500px) { body { background-color: hotpink; } } width in a size container query queries the.

Read

Practice this

Related challenges

Beginner
Marketing

Mobile Product Launch Page

Design a responsive launch page for a mobile trail journal that proves its core value before asking visitors to install it.

Responsive web1 to 2 hours
Responsive DesignVisual Design
Beginner
Creator tools

Present a Design Case Study

Design a portfolio case study that explains the problem, decisions, contribution, evidence, and outcome without exposing confidential work.

Responsive web1 to 2 hours
Content DesignVisual Design
Intermediate
Messaging

Message Customer Support Without Losing Context

Design an asynchronous support chat that moves between automated intake and a human agent while preserving identity, attachments, and status.

Mobile2 to 4 hours
Interaction DesignContent Design

Related roles

Current design jobs

161 active roles currently match UI designer in the UI Coach job catalog.