What is Responsive Design?

Table of content

Responsive design is an approach where an interface adapts its layout, content, and interaction behavior to different screen sizes, devices, and available space.

TL;DR

Responsive design adapts an interface to changing screen and container sizes.
It involves layout, content priority, typography, controls, and interaction behavior.
Responsive does not mean shrinking the desktop version.
Flexible grids, constraints, breakpoints, and reusable components support responsiveness.
The goal is to preserve the task and hierarchy across contexts.

What does responsive design mean?

A dashboard that works at 1440 pixels may become unusable on a tablet if columns simply squeeze together and controls become too small.

Responsive design decides how the interface should reorganize when the available space changes.

A three-column layout might become one column. A dense table may prioritize a subset of fields. A desktop hover interaction may need a touch alternative.

What changes in a responsive interface?

Layout

Columns can stack, wrap, resize, or move.

Content priority

Secondary information may move behind progressive disclosure while core tasks remain visible.

Typography and spacing

Type scales and spacing may adapt while preserving readability and rhythm.

Controls

Touch targets, menus, and interaction modes must remain usable on different devices.

Media

Images, charts, and embedded content need flexible sizing and sensible cropping.

Responsive design vs. adaptive design

Responsive design commonly uses flexible rules that react continuously to available space. Adaptive design often uses several predefined layouts for specific ranges or devices.

Real products can combine both approaches.

How do teams design responsively?

Start with content and task priority.
Use flexible containers and constraints.
Define breakpoints where the layout genuinely needs to change.
Specify component behavior at different widths.
Test real content, including long labels and dense data.
Check keyboard, touch, zoom, and text scaling.
Review the full flow on representative devices.

Common mistakes

Designing desktop first and shrinking it

Responsive design requires prioritization, not compression.

Creating breakpoints for specific device models

Choose breakpoints based on where the layout stops working.

Ignoring component-level responsiveness

Cards, tables, forms, and navigation each need their own behavior rules.

The bottom line

Responsive design asks: how should this product preserve clarity and usability when the available space and input context change?

Relevant Figr resource

Read Responsive Design Best Practices.