WebBuilding

People

Ethan Marcotte

Summary

Ethan Marcotte is a Boston-based web designer who coined the term responsive web design. He presented the idea at An Event Apart Seattle in April 2010 and described it in A List Apart on May 25, 2010, as one site built from fluid grids, flexible images and media queries so its layout adapts to any screen. His book Responsive Web Design followed in 2011, and he helped build the responsive BostonGlobe.com, launched that September.

Web Building Encyclopedia · People · Last reviewed October 22, 2026 · 9 min read

Who Ethan Marcotte is

Ethan Marcotte is a Boston-based web designer who has worked in web design for about two decades. On his own site he calls himself “the person behind that ‘responsive web design’ thing.”1

Responsive web design is a way of building one website whose layout adapts to the size of the screen it is viewed on, from a small phone to a wide desktop monitor. Marcotte named and described it in an article for the web design magazine A List Apart on May 25, 2010.2 Mozilla’s developer documentation still credits him with coining the term in 2010.3

His clients have included New York Magazine, the Sundance Film Festival, The Boston Globe and People Magazine.4 His own site adds The Today Show and Google.1 He has written three books for the publisher A Book Apart and co-written two others, and he later became a public advocate for unions in the technology industry.5678910

Before the name: fluid grids and flexible images

Marcotte’s earliest article in the A List Apart archive, “Where Our Standards Went Wrong,” is dated September 22, 2008.4 His ideas about flexible layout appeared in the same magazine the next year.

In “Fluid Grids,” published March 3, 2009, he argued against designing for an assumed minimum screen resolution, the habit that produced layouts fixed at one width in pixels.11 He showed how to turn the pixel measurements in a designer’s mockup into proportions instead. His formula was “target ÷ context = result”: divide the size of an element by the size of the box that contains it.11 A 700-pixel column inside a 988-pixel grid, for example, becomes 70.85% wide, so the grid keeps its proportions as the browser window changes size.11 The article named images and Flash movies, which have a fixed size, as the hard part.11

He tackled images in a journal entry on unstoppablerobotninja.com, which his 2010 article links to for flexible images.2 The core rule was to give every image a maximum width of 100%, so it shows at its natural size unless it is wider than its container, in which case it shrinks to fit.12 He credited Richard Rutter’s experiments with the same technique, and used a separate fix for older versions of Internet Explorer, which did not support the max-width property.12

In 2009 he also worked on two books from the publisher New Riders. Handcrafted CSS: More Bulletproof Web Design (August 2009) lists him with Dan Cederholm, and the publisher’s description credits him with one chapter.8 The third edition of Jeffrey Zeldman’s Designing with Web Standards (October 2009) was updated with Marcotte as co-author.9

Naming responsive web design in 2010

Marcotte first presented the idea on stage, in a talk called “A Dao of Flexibility” at the An Event Apart conference.13 Jeffrey Zeldman, writing in a post dated April 6, 2015, said Marcotte had debuted responsive web design at An Event Apart Seattle 2010 “five years ago today,” which places the talk on April 6, 2010.14 The recording of the talk posted on Vimeo is described as coming from An Event Apart San Diego, also in 2010.13

The article followed on May 25, 2010, in issue 306 of A List Apart.2 It began from a practical problem. Marcotte wrote that more companies were asking him for “an iPhone website” as part of their projects, and that one answer was to “quarantine the mobile experience” on a separate subdomain.2 He proposed a different approach: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”2

The article named three technical ingredients:2

  • Fluid grids. Layouts measured in proportions rather than fixed pixels, as in his 2009 article.11
  • Flexible images. Images and other media that scale down inside their containers.12
  • Media queries. A feature of CSS, the language that styles web pages, that applies a set of rules only when a condition is true, such as the device’s screen being 480 pixels wide or less. The article’s examples also used max-width conditions, at 600 and 400 pixels, to rearrange the layout as the browser window narrowed.2

He noted that desktop browsers including Safari 3 and later, Chrome, Firefox 3.5 and later and Opera 7 and later already understood media queries, as did newer mobile browsers. Internet Explorer did not yet, though Microsoft had committed to support in IE9, and he pointed to a JavaScript library, css3-mediaqueries.js, as a stopgap for older browsers.2 He also said a separate mobile site could still make sense when its users’ goals were narrower than on the desktop site.2

The name came from architecture. The article cites Michael Fox and Miles Kemp’s book Interactive Architecture and an “emergent discipline called ‘responsive architecture’,” in which rooms and buildings respond to the people inside them.2 The book was published by Princeton Architectural Press in 2009.15 In a 2014 interview, Marcotte said he had picked it up in a bookstore, and recalled the book’s description of responsive architecture as “a conversation between the person and the space.”16

He has also credited John Allsopp’s “A Dao of Web Design,” published in A List Apart on April 7, 2000, which urged designers to let go of control and become flexible.1716 Marcotte’s article opens with Allsopp’s words and ends by saying responsive design allows designers to “design for the ebb and flow of things.”2 Looking back in 2021, he said the earlier, desktop-focused approach to page layout “worked great until mobile broke everything.”18

One more piece became standard in practice, though the article does not discuss it: the viewport meta tag. Some phone browsers draw a page in a wider virtual window, 980 pixels in MDN’s example, and then shrink it to fit the screen, so media queries written for narrow screens never apply. A line in the page’s HTML such as width=device-width tells the browser to use the real screen width instead.19

The book and The Boston Globe

A Book Apart published Marcotte’s book Responsive Web Design on June 7, 2011.5 Its five chapters cover the responsive web, the flexible grid, flexible images, media queries and “becoming responsive.”5 A List Apart ran the chapter on flexible images as an excerpt the same day. It extends the max-width rule to video and other embedded media and repeats the workarounds needed for Internet Explorer 6 and 7.20

Three months later, on September 12, 2011, The Boston Globe launched a new BostonGlobe.com designed to work on phones, tablets and desktop computers from one code base.2122 The Boston firm Filament Group led front-end development “with Ethan Marcotte at our side,” and the design studio Upstatement set the visual design.21 Poynter reported that the site could take six different layouts depending on screen size.22

Marcotte’s own account at the time said he “played a small part in its design” and credited the Globe’s staff, Upstatement and Filament Group.23 His site now describes him as one of the lead designers and calls the launch the first large-scale responsive website.1 His publisher announced the redesign on its blog a week after launch, on September 19, 2011.24

Responsive design drew debate as it spread. In a March 2011 post, Marcotte answered the argument that different contexts need different experiences and so responsive design is flawed. He called that reasoning a fallacy, said a dedicated mobile site can sometimes be the better choice and urged teams to decide based on their own research and audience: “nobody knows your project, your audience, better than you do.”25

Teaching the practice, 2014 to 2018

With Karen McGrane, Marcotte started the Responsive Web Design Podcast, in which the two interviewed the people behind responsive redesigns. Episode 1, about The Boston Globe, came out on August 18, 2014, followed by episodes on Marriott, Fidelity and Capital One.26 The show ended with episode 157 on March 26, 2018.27 The same site offers a newsletter and in-house corporate workshops on responsive design.28

A second edition of Responsive Web Design followed on December 2, 2014. The publisher’s page lists 153 pages and a foreword by Jeremy Keith.5

On November 17, 2015, A Book Apart published Responsive Design: Patterns & Principles, with a foreword by Mandy Brown.6 The book looks at reusable design patterns for responsive navigation, images and video, and advertising, and at principles for flexible layouts.6

Later work: Editorially, Autogram and tech unions

Marcotte’s site says he co-founded Editorially, a startup that built a platform for writing and editing together, in 2011.1 He introduced it publicly in a post dated February 2013, calling himself “a small part of this team.”2930 In February 2014 Editorially announced that it would shut down on May 30, 2014, saying it had “failed to attract enough users to be sustainable.”31

In August 2020 he announced Autogram, a small consultancy he started with Karen McGrane and Jeff Eaton.291 Autogram describes itself as “a partnership of content management and design systems experts.”32 A design system is a shared library of reusable interface components and the rules for using them.

From 2019 his writing and talks turned toward labor in technology. In “The World-Wide Work,” a talk given at the New Adventures conference in Nottingham, England, and posted in October 2019, he argued that web design is a form of power and that tech workers should organize.2933 A May 2021 post, “Union,” put it directly: “Tech workers, we have to unionize.”2910

His book You Deserve a Tech Union, with a foreword by Clarissa Redwine, was published by A Book Apart on August 15, 2023. It covers who counts as a tech worker, the history of worker activism, how unions work and how to form one in the United States.7

How responsive design became the default

The parts Marcotte combined were standardized and adopted in the years after his article:

  • Media queries became a standard. The W3C, the body that publishes web standards, made Media Queries a Recommendation on June 19, 2012. Its earlier editors included Håkon Wium Lie.34
  • Search engines recommend it. As of its December 2025 update, Google’s guidance says it uses the mobile version of a site’s content for indexing and ranking, and that it recommends responsive web design “because it’s the easiest design pattern to implement and maintain.”35 The shift is covered in mobile-first indexing.
  • Phones are the main screen. StatCounter measured 58.99% of worldwide web traffic from mobile devices in September 2026, against 39.26% from desktop computers and 1.76% from tablets.36 The range of devices behind those figures is the subject of computer monitors and screen sizes.
  • Layout tools caught up. Mozilla’s documentation says modern layout methods such as Flexbox and CSS Grid are “responsive by default,” and still recommends the max-width: 100% rule for images and video.3 In 2021 Marcotte said CSS Grid had changed how he approaches layout and reduced how often he needs media queries.18
  • Components can respond too. Container queries, a newer CSS feature, apply styles based on the size of an element’s container rather than the size of the whole screen.37

Marcotte has said the three ingredients have stayed the same since 2010, while the practices around them have changed.18

Timeline

  1. A Book Apart publishes You Deserve a Tech Union7
  2. A Book Apart marks ten years of the Responsive Web Design book18
  3. Marcotte announces Autogram with Karen McGrane and Jeff Eaton29
  4. The Responsive Web Design Podcast ends with episode 15727
  5. Responsive Design: Patterns & Principles is published6
  6. Second edition of Responsive Web Design5
  7. First episode of the Responsive Web Design Podcast, on The Boston Globe26
  8. Marcotte introduces Editorially30
  9. Media Queries becomes a W3C Recommendation34
  10. The Boston Globe launches its responsive BostonGlobe.com21
  11. A Book Apart publishes Responsive Web Design5
  12. "Responsive Web Design" appears in A List Apart, issue 3062
  13. Marcotte presents "A Dao of Flexibility" at An Event Apart Seattle14
  14. Designing with Web Standards, third edition, with Marcotte as co-author9
  15. "Fluid Grids" appears in A List Apart11

What it means for your website

Almost every site you can build today, on a website builder or on WordPress, is meant to be responsive. Marcotte’s three ingredients give you a short list of things to check.

  • Test on a real phone, not only a desktop preview. Most visits now come from mobile devices: 58.99% worldwide in September 2026, according to StatCounter.36 Google uses the mobile version of your content for indexing and ranking, so check that phones get the same text, links and images as desktop visitors.35 Our guide to websites and SEO covers what each builder lets you control.
  • Check the viewport tag. If your theme or custom code leaves it out, phones may draw the page at desktop width and shrink it, and your mobile layout never appears. MDN says to always include it.193
  • Make images flexible. If photos spill off the screen, the theme is missing a max-width: 100% rule or something is overriding it.3
  • Drag the window between sizes. Layouts usually change at a few widths called breakpoints. Problems often show up between them, on small tablets or half-width desktop windows, which a fluid grid is meant to handle.11
  • Do not lock text to the screen width. MDN warns that sizing text with viewport units alone stops visitors from zooming it.3
  • Avoid a separate mobile site unless you have a clear reason. Google calls responsive design the easiest pattern to implement and maintain, and it keeps one address for each page.35

We build on WordPress every week. If you are deciding whether an older, fixed-width site needs a full rebuild, our website redesign guide explains the options, and the glossary entry on responsive design gives the short definition.

See also

References

  1. About. Ethan Marcotte, ethanmarcotte.com. accessed October 22, 2026.
  2. Responsive Web Design. Ethan Marcotte, A List Apart, issue 306. 2010-05-25. accessed October 22, 2026.
  3. Responsive web design. MDN Web Docs, Mozilla. accessed October 22, 2026.
  4. Ethan Marcotte: author page. A List Apart. accessed October 22, 2026.
  5. Responsive Web Design (book). A Book Apart. accessed October 22, 2026.
  6. Responsive Design: Patterns & Principles. A Book Apart. accessed October 22, 2026.
  7. You Deserve a Tech Union. A Book Apart. accessed October 22, 2026.
  8. Handcrafted CSS: More Bulletproof Web Design. Dan Cederholm with Ethan Marcotte, New Riders, via O'Reilly. 2009-08. accessed October 22, 2026.
  9. Designing with Web Standards, Third Edition. Jeffrey Zeldman and Ethan Marcotte, New Riders, via O'Reilly. 2009-10. accessed October 22, 2026.
  10. Union. Ethan Marcotte, ethanmarcotte.com. 2021-05. accessed October 22, 2026.
  11. Fluid Grids. Ethan Marcotte, A List Apart, issue 279. 2009-03-03. accessed October 22, 2026.
  12. Fluid images. Ethan Marcotte, unstoppablerobotninja.com. accessed October 22, 2026.
  13. Ethan Marcotte: A Dao of Flexibility, An Event Apart. An Event Apart, via Vimeo. accessed October 22, 2026.
  14. Responsive Web Design's Debut (with video). Jeffrey Zeldman, zeldman.com. 2015-04-06. accessed October 22, 2026.
  15. Interactive architecture (library record). Canadian Centre for Architecture. accessed October 22, 2026.
  16. Ethan Marcotte on how responsive web design came about. Creative Bloq (net magazine). 2014-06-09. accessed October 22, 2026.
  17. A Dao of Web Design. John Allsopp, A List Apart. 2000-04-07. accessed October 22, 2026.
  18. Celebrating 10 years of Responsive Web Design. A Book Apart. 2021-06-11. accessed October 22, 2026.
  19. <meta name="viewport">. MDN Web Docs, Mozilla. accessed October 22, 2026.
  20. Fluid Images. Ethan Marcotte, A List Apart (excerpt from Responsive Web Design). 2011-06-07. accessed October 22, 2026.
  21. Introducing the new responsive-designed BostonGlobe.com. Patty Toland, Filament Group. 2011-09-12. accessed October 22, 2026.
  22. Report on the launch of BostonGlobe.com. Jeff Sonderman, Poynter. 2011-09-12. accessed October 22, 2026.
  23. The Boston Globe. Ethan Marcotte, ethanmarcotte.com. 2011-09. accessed October 22, 2026.
  24. Boston Globe's Responsive Redesign. A Book Apart. 2011-09-19. accessed October 22, 2026.
  25. Toffee-nosed. Ethan Marcotte, ethanmarcotte.com. 2011-03. accessed October 22, 2026.
  26. Responsive Web Design Podcast: episodes 1 to 4. Karen McGrane and Ethan Marcotte, responsivewebdesign.com. 2014-08-18. accessed October 22, 2026.
  27. Episode 157: THE END. Karen McGrane and Ethan Marcotte, responsivewebdesign.com. 2018-03-26. accessed October 22, 2026.
  28. Responsive Web Design. Karen McGrane and Ethan Marcotte, responsivewebdesign.com. accessed October 22, 2026.
  29. Journal archive. Ethan Marcotte, ethanmarcotte.com. accessed October 22, 2026.
  30. Hello, Editorially. Ethan Marcotte, ethanmarcotte.com. 2013-02. accessed October 22, 2026.
  31. Editorially is shutting down on May 30. Shawn Blanc, shawnblanc.net. 2014-02-13. accessed October 22, 2026.
  32. Autogram. Autogram. accessed October 22, 2026.
  33. The World-Wide Work. Ethan Marcotte, ethanmarcotte.com. 2019-10. accessed October 22, 2026.
  34. Media Queries (W3C Recommendation). World Wide Web Consortium. 2012-06-19. accessed October 22, 2026.
  35. Mobile site and mobile-first indexing best practices. Google Search Central. 2025-12-10. accessed October 22, 2026.
  36. Desktop vs Mobile vs Tablet Market Share Worldwide. StatCounter Global Stats. 2026-09. accessed October 22, 2026.
  37. Container queries. MDN Web Docs, Mozilla. accessed October 22, 2026.

Web Building Encyclopedia. First published October 22, 2026. Last reviewed October 22, 2026. Every fact on this page is linked to a source we opened. Spotted an error? Write to [email protected].