Classic responsive design cuts the web into steps: a mobile version, a tablet one, a desktop one. In between, the site jumps from one stair to the next. Text that suddenly grows, a grid that reorganises abruptly. What you actually maintain is three layouts. And three chances to break something.

Fluid, or continuous

A fluid site has no versions. It adapts continuously, from the smallest screen to the largest, with no stairs. Text, margins and images grow together, at the right speed. clamp() and container queries made that possible without JavaScript.

What the eye does not see but feels

Good fluid work goes unnoticed, and that is the point. No jump betrays a change of format, no area breaks at a forgotten width. On any phone, tablet or work screen, the proportions stay right. Nobody will ever congratulate this work, since it consists precisely in there being nothing to notice. I still hold it to be the strongest UX there is: you stop thinking about the device, you read.

The three widths that were drawn, and everything left between them A horizontal axis of screen widths, from the narrowest on the left to the widest on the right. Three page silhouettes sit on it, each with its header bar and its blocks: a narrow one on the left, a medium one in the middle, a wide one on the right, marked below the axis with the words mobile, tablet and desktop. Between them, two grey zones drawn with dashed outlines, with no header and no block; a bracket in the accent colour measures each one below the axis and gives it the label "a forgotten width". Together the two empty zones take up more of the axis than the three silhouettes put together. FROM THE SMALLEST SCREEN TO THE LARGEST THREE LAYOUTS mobile tablet desktop a forgotten width a forgotten width
Three widths were drawn, and the whole rest of the axis ships without anyone ever having looked at it.

Less code, better holding

Three mockups means three times the design, build and testing work. One fluid scale, set once, covers the whole range. Fewer breakpoints, fewer rules, fewer edge cases dragging bugs along for years.

The same work counted three times, then counted once Two groups of rectangular cells of strictly the same size, separated by a wide gap. On the left, three columns of three cells: the columns carry the names mobile, tablet and desktop above them, the rows carry the names design, build and testing to their left, and the group is labelled underneath "three times". On the right, a single column of three cells, drawn in the accent colour, sitting on the same three rows and labelled underneath "set once". Three dashed lines link the two groups, one per row. THREE MOCKUPS ONE FLUID SCALE mobile tablet desktop design build testing three times set once
The same three jobs, redone for every mockup on one side, set down once on the other.

Three versions means three times the risk. EVA CSS turns it into a method: this site has a single width media query. The detailed figures are in two other notes: What responsive still costs and The old dream of fluid CSS.