The Idea Had Three Parts
On 25 May 2010, A List Apart published a piece by Ethan Marcotte called "Responsive Web Design." The article ran to about 2,000 words, introduced a coined term, and described a technique made from three existing ingredients that nobody had previously named as a system. Fluid grids — layouts built in proportional units rather than fixed pixels. Flexible images — media that scales within its containing element rather than overflowing it. Media queries — the CSS at-rule that applies rules conditionally, depending on the viewport. None of the three was new in May 2010. What was new was the argument that they belonged together, that the combination was a coherent design method, and that this method had a name.
The name mattered. Before Marcotte's piece, the challenge of serving multiple screen sizes was handled in a handful of ways — dedicated mobile subdomains (m.example.com, a now-largely-abandoned pattern), separate templates loaded by server-side user-agent detection, or simple neglect. "Responsive web design" gave practitioners a phrase that carried its own logic: a design responds to its context, the way a building responds to its site. It was a phrase borrowed from architecture — specifically from the idea of responsive architecture, a term that grew out of work such as Zuk and Clark's 1970 book Kinetic Architecture — and the borrow was clean and precise, not decorative.
The CSS specification underpinning one of those three ingredients, the @media rule, reached Recommendation status at the W3C in CSS 2.1, and CSS3 Media Queries became a W3C Candidate Recommendation in 2009. Browser support was already good enough to use by 2010, but nobody had framed using it at that scale as a named design philosophy. Marcotte framed it.
- May 2010Marcotte's article published in A List Apart
- 2011expanded into a book, A Book Apart
- January 2012Bootstrap 2 ships responsive grid classes
- August 2013Bootstrap 3 makes responsive grid non-optional
- 2014–2015
srcsetand<picture>land in browsers - April 2015Google's mobile-usability ranking update
- March 2017CSS Grid ships in Chrome 57 and Firefox 52
- 2023container queries reach every major engine
From Article to Book to Default Assumption
A List Apart had been the field's working journal since the late 1990s — the place where Jeffrey Zeldman wrote about web standards, where Eric Meyer worked through CSS, where practical theory got published before it reached conference stages. Marcotte's piece fit the tradition exactly: a working professional making a documented argument from first principles, with code you could copy and use.
Twelve months later, in 2011, Marcotte expanded the article into a short book published by A Book Apart, the imprint A List Apart had launched the previous year. Responsive Web Design ran to 147 pages and sold widely enough that A Book Apart went on to commission dozens of subsequent titles on adjacent subjects, from content strategy and accessibility to performance. The book format let Marcotte develop the fluid grid arithmetic more carefully — the math for converting fixed-pixel designs into proportional columns was explicit and reproducible, and the formula (target ÷ context = result) appeared on enough whiteboards in the following years to become a kind of industry mnemonic.
Browser support was already good enough to use by 2010, but nobody had framed using it at that scale as a named design philosophy.
The industry's response was not slow. By 2012, responsive design had moved from technique to expectation. Clients began writing it into briefs. Google began factoring mobile-usability into search ranking signals — a decision it formalised publicly in April 2015 as the so-called "Mobilegeddon" update, which made responsive design commercially urgent for any site dependent on organic search. Frameworks absorbed the pattern: the second version of Bootstrap, released in January 2012, built responsive grid classes directly in. By the time Bootstrap 3 shipped in August 2013, the responsive grid was not optional — it was the grid.
Brad Frost's work on pattern libraries and atomic design was developing in parallel through this period, responding to the same problem Marcotte had named: that a fixed-width PSD delivered to a developer made no sense as a design artifact when the same content could appear on a 320px phone and a 2560px monitor. The workflow around responsive design — style tiles, element collages, designing in the browser — reshaped what design deliverables looked like and, eventually, what design tools were built to produce. Figma's canvas, which accommodates multiple frames at multiple widths simultaneously, is a later software answer to a question Marcotte's article made urgent.
What the Technique Actually Required
Fluid grids meant doing layout in percentages rather than pixels. Columns defined as width: 45.33% rather than width: 412px. The arithmetic was tedious and the tooling was primitive — Sass, which made percentage calculations manageable, was itself only a few years old in 2010. CSS Grid did not exist as a specification in usable form until March 2017, when Chrome 57 and Firefox 52 shipped it within a fortnight of each other. Until then, fluid layouts were built on float-based or flexbox-based systems, and the percentage arithmetic was real work.
Flexible images were simpler in principle — max-width: 100% on the img element, a rule so concise it reads like a trick — but the implications for image delivery were substantial. A fluid image that fills a 1280px container on a desktop and a 375px container on a phone is being downloaded at full resolution either way unless you intervene. The srcset attribute and the <picture> element, which let the browser select the appropriately sized source, arrived in browsers in 2014 and 2015 — four years after the article that made their absence obvious.
Media queries were the conditional logic that held the system together. The @media rule lets a stylesheet branch: below this viewport width, the columns stack; above it, they sit side by side. Marcotte's article used breakpoints tied to device widths that made sense in 2010 — 320px for an iPhone, 768px for an iPad — but the field fairly quickly moved toward content-driven breakpoints, the idea that a layout should break when the content requires it rather than when a specific device exists. That shift in thinking arrived largely through Marcotte's own subsequent writing and through voices like Jen Simmons, who spent much of the 2010s pushing the field toward more genuinely layout-aware approaches, a trajectory that culminated in her advocacy for CSS Grid as a layout tool at Mozilla.
Rachel Andrew's work documenting CSS Grid at Grid by Example, and Simmons's layouts.css experiments, extended the responsive logic into something richer than the stacked-columns pattern that had become almost universal by 2015. Container queries, which reached every major engine in 2023, completed the shift by moving the breakpoint logic from the viewport to the component itself — the thing Marcotte's original article could only gesture toward, because the spec didn't exist.
The Name Has Outlasted Its Precision
What's lost in the diffusion of a term like "responsive web design" is exactly what made the original article valuable: precision. The article named three specific things and said they worked together. By 2015, "responsive" had become a synonym for "works on mobile," an adjective applied to any site that didn't break catastrophically on a phone. That's a weaker idea, and it has produced plenty of technically fluid but practically broken layouts — sites that reflow but don't reconsider, that stack rather than redesign.
The article is still at A List Apart, at the URL it has always had. The code still runs. The argument — that a design should respond to its environment, not by detecting the device but by following the content — is still being worked out, in container queries and @layer and CSS Grid's track-sizing functions. Marcotte named a direction. The field has been walking in it for fifteen years.