The Birth of Responsive Design —
From Ethan Marcotte's Manifesto to a Mobile-First World

Remember when "responsive" wasn't a word?

You pull out your phone, open this page, and the text reflows, the images shrink, the menu folds into a hamburger. It's so natural that "design" barely seems like the right verb for it anymore. It just happens.

But this invisibility is young. Before 2010, the word "responsive" didn't exist in our vocabulary. Not as designers talked about it, anyway.

Websites back then usually had two lives. One was the desktop site, carefully tuned to width: 960px;. The other lived at a different URL — often m.example.com — a stripped-down mobile cousin, served after a user-agent sniff on the server. You didn't write one site that adapted. You wrote two sites that pretended to be the same product.

When I first started taking on real client work, "please make it work on mobile" was a completely separate line item in the quote. It meant "please build us a second website." The idea that a single HTML document could gracefully serve both wasn't something anyone was asking for, because nobody really believed it was possible.

What the iPhone broke, and what it left behind

Then, in 2007, Apple introduced the iPhone. On stage, Steve Jobs called it "the real internet" — a small phrase that became a big homework assignment for the industry.

Mobile Safari, for all its famous omissions (no Flash, a detail that became its own saga later), was astonishing for its time. It rendered full desktop websites, faithfully, and let you pinch and zoom your way through them. Users started saying something designers hadn't heard before: "I don't want m.example.com. I want the actual site."

Of course, "the actual site" on a 320-pixel screen was a rough experience. You double-tapped to zoom into a column, you scrolled sideways to follow a line of text, and you did that on an iPhone, then an Android, then an iPad, and then on an endlessly multiplying list of screen sizes nobody had planned for.

The industry was quietly panicking. Building a separate site per device class was already expensive. Now there were going to be dozens of device classes — and the budget and headcount at your agency weren't multiplying to match.

One article, and the frame changes

On May 25, 2010, A List Apart published an essay called "Responsive Web Design." The author was a Boston-based designer named Ethan Marcotte.

Marcotte opened not with CSS, but with architecture. He pointed to the emerging field of "responsive architecture": walls that bent when people walked past, glass that shifted its opacity based on ambient light. Buildings that responded to their environment instead of fighting it. Why, he asked, couldn't the web do the same?

His technical recipe came in three parts: fluid grids (layouts in percentages, not pixels), fluid images (media that scales with its container), and media queries (CSS that reacts to viewport width). Every one of those tools already existed. He didn't invent a line of code.

What he invented was a frame. A way of seeing.

/* When the viewport narrows, the layout answers back. */
@media (max-width: 768px) {
  .sidebar { width: 100%; }
  .main    { width: 100%; }
}

A handful of lines. But the shift underneath was profound. Instead of sniffing the device and branching, you wrote one HTML document and let CSS respond to whatever surface it happened to land on. Websites stopped being things you built in multiples. They became things that bent.

A timeline: from manifesto to default

From Marcotte's essay to responsive being standard practice took roughly five years. From there to mobile-first being the default posture took another five. Here's the shape of those fifteen years.

From "responsive" to "mobile-first": a quiet reversal

Marcotte's original piece, in practice, leaned desktop-first. You designed the rich, wide-screen version, and then you used max-width media queries to patch the layout as the screen got smaller. The desktop was still the home base. Mobile was a series of corrections.

Luke Wroblewski reversed the polarity. In Mobile First, his argument was almost aggressive in its simplicity: design for the small screen first, and let the big screen inherit.

Why did the order matter so much? Because the order of design is the order of decisions. When you start small, you're forced to ask which piece of content earns its place first. When you start big, there's always room for one more banner, one more promo, one more "while we have the space."

The market reinforced the shift. In 2015, Google folded mobile-friendliness into its ranking signals, and soon after it began crawling the mobile version of sites as the default. Mobile-first went from design philosophy to business requirement, and the argument was effectively over.

Where "responsive" has quietly gone next

More than fifteen years after Marcotte's essay, "responsive design" isn't really a topic of debate anymore. It's roughly as contested as the idea that HTML documents flow from left to right. It's just the floor.

But the idea kept evolving, quietly.

The clearest shift is from media queries toward container queries. @media answers the question "how wide is the viewport?" — a useful question in 2010, when layouts were page-sized. Today, when we ship interfaces as components, the more honest question is "how wide is this component's container?" CSS @container gives us that answer. The spirit is the same; the granularity moved.

Second, the meaning of "responding" has broadened. prefers-color-scheme lets a site respond to dark mode. prefers-reduced-motion respects users who find animation nauseating or distracting. The responsive idea — design that listens — has crept past screen size into the fuller context of who is actually looking.

Third, with CSS Grid, Flexbox, and functions like clamp(), we can now build layouts that bend fluidly without always needing explicit breakpoints. You can argue that Marcotte's opening line — "the web is, by nature, a flexible medium" — has only recently acquired the CSS to really back it up.

Responsive design, in the end, did something larger than solve a layout problem. It changed what the web thinks it is. Not an extension of print, not a shrunken app. A medium whose content meets each reader where they happen to be, at whatever size, under whatever conditions, and still makes sense.

Next time you reach for @media, or clamp(), or a container query, try to notice it for a second. Those few lines aren't just utility CSS. They're the direct descendants of a question one designer asked out loud in 2010: what if the web was finally allowed to be what it already was?