visual design
Responsive design
What is responsive design?
Responsive design is building one layout that adapts to any screen - fluid widths that stretch and shrink, plus breakpoints where the structure itself rearranges (a three-column grid becoming one column, a menu collapsing). One codebase, one URL, reshaping itself to fit the space rather than shipping a separate "mobile site".
Also known as: responsive design, responsive web design, fluid layout, breakpoints
Prefer to watch?
Watch the recap 0:46
The demo
Here's a little site in a resizable frame. Drag the handle (or the slider) to narrow it, and watch the layout reorganise - not just shrink - as it crosses each breakpoint.
What this demo shows (text version)
A miniature website sits in a frame whose width you control with a slider or a drag handle. As you narrow it, the layout doesn't merely scale down - it re-structures at breakpoints: the three-across cards become two, then a single stacked column, and the horizontal navigation folds into a hamburger menu. The current width and which breakpoint you're in are shown.
That re-structuring is the essence of responsive design: one layout adapting to the space, fluid between breakpoints and rearranging at them, rather than a fixed design shrunk until it's unusable. Breakpoints should be placed where the content starts to break, not at specific device sizes, and you should still ensure touch targets stay large at narrow widths.
Responsive design means the layout reflows to fit the viewport: fluid up to a point, then re-structuring at breakpoints so content stays readable and usable from phone to desktop. Set breakpoints where the content breaks, not at specific device sizes, and reflow by changing structure (columns, navigation) - not just by shrinking everything until it's unusable.
Drag the edge in and the layout didn't just shrink - at certain widths it reorganised: the columns stacked, the row of cards became a list, the navigation folded away. That re-structuring at breakpoints, not mere scaling, is what makes a design responsive. One layout, comfortable at every width you dragged it to.
Responsive is fluid plus breakpoints. Between breakpoints, flexible widths let content fill the space; at a breakpoint, the structure changes - columns collapse, a grid re-spans, a horizontal nav becomes a menu - because past a certain width the old arrangement stops working. Scaling alone isn't responsive; tiny unreadable text on a phone is the failure that approach produces.
Set breakpoints to the content, not to device names. Chasing specific phone and tablet widths is a losing game; instead, widen the window until the layout looks strained, and put a breakpoint there. The right breakpoints are wherever your particular content starts to break - which is why they differ for every design.
It pairs naturally with a grid (reflow by re-spanning columns) and with mobile-first thinking (design the small screen, then enhance for larger). And mind touch: a layout that's responsive visually but keeps tiny desktop tap targets on a phone has only done half the job.