Responsive Web Design: How Ethan Marcotte Changed the Web Forever

Episode 0001: Ethan Marcotte

Ethan Marcotte interview on responsive design, tech unions, and building a more just, inclusive web.

In May 2010, a web designer named Ethan Marcotte published an article on A List Apart that would fundamentally reshape how we build websites. The article introduced a term that became ubiquitous in web development: responsive web design. Within a year, major publications like the Boston Globe had adopted the approach. Within a few years, it became the default way to build for the web.

But responsive web design wasn’t just about making websites work on mobile phones. It was about working with the web’s inherent nature rather than fighting against it. It was about flexibility, inclusion, and designing for everyone.

This is the story of how one idea changed the internet forever.

Why Responsive Web Design Matters

Before responsive web design, building websites for different devices was a nightmare. You built a desktop version. Then you built a separate mobile version. Then tablets arrived, and you needed another version. Every new screen size meant another website to build and maintain.

Marcotte’s insight was simple but profound. The web is flexible by default. It doesn’t care what size screen it’s displayed on. We were the ones forcing it into fixed dimensions.

Marcotte explained in a conversation about the origins of responsive design. For decades, designers brought habits from print design to the web, treating screens like fixed-dimension pages.

We’re trying to bring that thinking over into the web, which is the first completely flexible design medium.

Responsive web design matters because it works with the web’s grain rather than against it. It acknowledges a fundamental truth: you can’t control how people access your website. They might be on a brand-new iPhone. They might be on a 10-year-old laptop. They might be on a slow dial-up connection.

The web is for everyone. Responsive design is how we honor that promise.

The Difference: Fixed vs Flexible Thinking

The shift from fixed to flexible thinking represented a complete mental model change for web designers.

In the early 2000s, web designers talked about screen resolutions. You designed for 640 by 480 screens. A few years later, you could finally design for 800 by 600. Every design decision was based on pixel-perfect dimensions carried over from print design.

Marcotte’s formative influence came from an essay called The Dao of Web Design by John Allsopp, published around 2000. Allsopp argued that designers were bringing an impulse from print, treating the web like it had fixed dimensions when it was actually completely flexible.

“That just kind of like, that broke my tiny little 20 something brain a little bit,” Marcotte recalled, “because it was like, they’re just showing me that there was a different way of thinking about the design work that I was doing.”

This wasn’t just a technical shift. It was philosophical. Rather than asking “What screen size should we design for?” responsive design asked “How can we design for any screen size?”

The difference shows up in how you approach every design decision:

Fixed thinking: Design a layout that’s 960 pixels wide. Flexible thinking: Design a layout that adapts from 320 pixels to 2560 pixels and beyond.

Fixed thinking: Create separate mobile and desktop versions. Flexible thinking: Create one codebase that works everywhere.

Fixed thinking: Control exactly how users see your site. Flexible thinking: Embrace that users access the web in countless ways.

This shift wasn’t easy. Marcotte himself came up in an industry where the “big client reveal” was standard. Designers worked in isolation, then presented finished comps. The process was siloed and heads-down.

“It took me a long time to work out of that,” Marcotte admitted. “It still feels scary to bring folks into something that doesn’t feel finished.”

But flexible thinking requires opening up the process earlier, getting feedback when designs are still sketches, acknowledging that you’re designing for unknowns.

The Signs: How to Recognize Flexible Design

How do you know if a website is built with responsive design? Here are the signs:

It works without resizing or zooming. Open a responsive site on your phone. You don’t need to pinch and zoom to read text or tap buttons. Everything automatically adjusts to your screen size.

The layout shifts at breakpoints. Resize your browser window. Watch how the site reorganizes itself at certain widths. A three-column layout might become two columns, then one. Navigation might collapse into a menu icon.

Images and media scale. Photos don’t overflow their containers or force horizontal scrolling. Videos resize to fit the screen. Everything stays proportional.

Touch targets are appropriately sized. On mobile, buttons and links are large enough to tap comfortably. On desktop, they work equally well with a mouse.

Content remains readable. Text doesn’t require horizontal scrolling. Line lengths adjust for comfortable reading on any screen size.

The Boston Globe’s responsive redesign in 2011 was the first major publication to demonstrate these principles at scale. Marcotte contributed to that project, working with a large team to bring responsive design to a traditional news organization.

“For them, at least, it was a business imperative,” Marcotte explained, “because they had, like everybody doing business online, they were trying to reach people who were on every size screen at different points of the day trying to read their content.”

The business case was simple. You couldn’t afford to exclude anyone based on their device. Responsive design was the solution.

What Makes Responsive Design Work

Three core techniques make responsive design possible:

Flexible grids. Instead of fixed pixel widths, layouts use percentages and relative units. A sidebar might be 30% of the container width rather than 300 pixels. This allows layouts to scale proportionally.

Flexible images. Images scale within their containers rather than maintaining fixed dimensions. CSS techniques ensure images never exceed their container width while maintaining aspect ratio.

Media queries. CSS media queries detect the viewport size and apply different styles at different breakpoints. You might show three columns on wide screens, two on medium screens, and one on narrow screens.

These techniques existed before Marcotte’s article. But he was the first to bring them together under a unified name and philosophy. That unification was crucial.

“I think the thing that was special or different was this unified way of thinking about it and talking about it,” as one web designer noted. It wasn’t a hard set of rules. It was a way of thinking that allowed designers to apply their own sensibility to whatever they were working on.

That flexibility, ironically, is what made responsive design so universally adoptable.

The Craft Nobody Sees

There’s another layer to responsive design that most people never think about: the quality of the underlying code.

Marcotte grew up in a rural community with farming families. “I was sort of told from an early age, like, you’re going to do something, it’s worth doing it right,” he said. That philosophy carried into his web design work.

He came up alongside designers like Dan Cederholm who talked about craft in terms of joins in woodworking. The parts you don’t see matter. If your stylesheet doesn’t load, what kind of experience are you serving someone?

“There’s craft in the joins, right?” Marcotte explained. “Like these fundamental pieces that you don’t often see, but you can tell that somebody thought about that.”

This connects to semantic HTML and web standards. A well-built responsive site has clean, readable markup. The document structure makes sense even without CSS. This isn’t just aesthetic perfectionism. It’s about accessibility and inclusion.

“Folks didn’t have the benefit of choosing their hardware or choosing the way that they access the internet,” Marcotte noted. He still has family members who access the internet on connections close to dial-up, on hardware that’s 5 or 10 years old.

The underlying craft ensures responsive design works for everyone, including people with screen readers, people on slow connections, and people on old devices. The craft nobody sees is what makes the web truly accessible.

The Boston Globe: A Case Study

The Boston Globe’s responsive redesign in 2011 proved that responsive design could work at scale for major organizations.

Before responsive design, the Globe faced the same problem as every publication moving online. Desktop users expected one experience. Mobile users expected another. Tablet users fell somewhere in between. Maintaining separate versions was expensive and inefficient.

Responsive design solved this problem with a single codebase that worked everywhere. The Globe’s redesign demonstrated that responsive design wasn’t just a clever idea for personal blogs. It was a viable business strategy for major publishers.

“That was the first big name that I’m aware of, at least, that sort of like took the jump,” Marcotte said. “I was pretty honored to contribute to it.”

The Globe saw responsive design as a business imperative. They needed to reach people on every size screen at different points of the day. A fixed-width desktop site would exclude mobile readers. Separate mobile and desktop sites would double their development and maintenance costs.

The Boston Globe’s success opened the floodgates. Once a major publication proved responsive design worked, other organizations followed. Within a few years, responsive design became the standard approach.

The reception wasn’t what Marcotte expected. “I hit a publishing deadline. And I thought that was going to be the end of it,” he said about the original A List Apart article. “I was not prepared for how it snowballed from there.”

Designers Marcotte respected, like Jon Hicks, became early adopters. “For someone like him to kind of like put a stake in the ground and be like, this is something that you can bring craft to,” Marcotte said. “That just blew me away.”

The experimentation that followed was magical. Designers didn’t just copy Marcotte’s exact approach. They brought their own sensibilities to flexible design. They asked: “If I was going to bring my design sensibilities to this, here’s how I would do it.”

How Responsive Design Changed Development

Responsive design didn’t just change how websites look. It changed how developers and designers work.

Design systems became essential. When you’re designing for every screen size, you can’t create separate mockups for each possibility. You need flexible component systems that work across contexts.

Mobile-first thinking emerged. Starting with mobile constraints and progressively enhancing for larger screens became a best practice. This forces you to prioritize content and functionality.

Performance became crucial. Responsive sites need to work on slow connections and old hardware. This pushed the industry toward better performance practices.

Cross-discipline collaboration increased. Responsive design requires designers and developers to work together from the start. You can’t hand off fixed comps and expect someone else to make them flexible.

The open web community thrived. Designers shared techniques, patterns, and solutions. The early days of responsive design saw “grand experimentation happening,” as Marcotte described it. “I haven’t really seen anything like it since.”

This collaborative, experimental spirit connected back to the early web culture Marcotte loved. The BBS communities. The independent publishing. The sense that you were building something together.

“It still feels like there’s that wild west frontier,” Marcotte said about the independent web. “That rough and ready community building is still there, which still gives me hope.”

Progressive Enhancement and Layered Design

Responsive design connects to a broader philosophy called progressive enhancement. The idea is simple: start with a baseline experience that works everywhere, then layer enhancements for more capable browsers and devices.

Your website should work without JavaScript. It should work without CSS. It should work on a text-only browser. Then you add layers: basic styles, advanced layouts, interactive features, animations.

Each layer enhances the experience for those who can receive it. But nobody is excluded from the core content and functionality.

This layered approach reflects the same flexible thinking as responsive design. You’re not controlling the user’s experience. You’re providing the best possible experience for their context.

Marcotte emphasized this when discussing craft: “If your style sheet doesn’t load, what kind of experience are you serving somebody?”

The answer matters. Someone on a slow connection might not load your CSS. Someone using a screen reader might not see your visual design. Someone on an old browser might not support your JavaScript framework.

Progressive enhancement ensures these users still get a functional, accessible experience. Responsive design is progressive enhancement applied to layout and screen size.

The Architecture Connection

Marcotte’s original article drew parallels with responsive architecture, citing real-world examples like the High Line in New York.

“There are a whole bunch of like elements of that, like benches and other sorts of like fixed elements that could be sort of like moved around to accommodate different sizes of groups or crowds,” he explained.

This led him to research interactive architecture where rooms could literally reshape themselves. Prehensile materials that could bend and flex. Glass walls that become opaque when needed.

“I just love that idea,” Marcotte said. “Thinking about this as like a conversation between the space that was designed and the people or person that was occupying that space.”

But web design has a huge advantage over physical architecture. Architecture is “an incredibly inflexible medium over centuries or millennia.” The web has been around for minutes by comparison. And unlike physical materials, the web doesn’t care what shape it takes.

If we think more flexibly and design more flexibly, things get really interesting real quickly

The architecture metaphor helped people understand responsive design. But the web’s inherent flexibility made responsive design easier to achieve than responsive architecture. We just needed to stop fighting the medium’s natural properties.

Designing for the Unknown

One of responsive design’s most profound implications is that you’re designing for devices that don’t exist yet.

In 2010, the iPad had just launched. Most smartphones had small screens. High-resolution displays were rare. Smartwatches, e-readers, in-car browsers, VR headsets, none of these were common design considerations.

But responsive design accommodated them all. Because it wasn’t designed for specific devices. It was designed for flexibility itself.

“Folks didn’t have the benefit of choosing their hardware or choosing the way that they access the internet,” Marcotte noted. Responsive design honored that reality.

This design-for-the-unknown philosophy connects to Tim Berners-Lee’s famous line: “This is for everyone.” Marcotte joked that you could read that as a curse or a blessing. The blessing is obvious. The curse is the complexity.

Designing for everyone, for every device, for every context, is hard. But it’s also the web’s fundamental promise. Responsive design is how we keep that promise.

The Takeaway

Responsive web design changed the internet because it changed how we think about web design itself.

Before 2010, we fought the web’s flexibility. We tried to impose print design’s fixed dimensions onto a medium that has no inherent size. We built separate versions for different devices. We excluded people based on their hardware.

Ethan Marcotte’s insight was to work with the web’s grain rather than against it. To embrace flexibility as the web’s defining characteristic. To design for everyone, regardless of how they access the internet.

That shift in thinking, more than any specific technique, is what changed the web forever. Responsive design isn’t just about media queries and flexible grids. It’s about recognizing that “this is for everyone” isn’t just an aspiration. It’s a design constraint that makes the web better.

The craft underneath matters. The semantic HTML matters. The performance matters. All of it ensures that responsive design keeps the web’s fundamental promise: accessibility for all.

As Marcotte put it: “Folks who access the internet in ways that are different than the ways I access the internet, you know, they still deserve a beautiful experience.”

That principle reshaped how we build for the web. And it continues to guide us as we design for devices we can’t even imagine yet.