The State of Responsive Web Design in 2012
Two years after Ethan Marcotte named it, responsive web design went from a technique in one article to a practice Google itself was recommending by 2012.
Responsive web design had a specific birthday: May 25, 2010, when Ethan Marcotte published an article by that exact name on A List Apart. Marcotte didn’t invent the underlying CSS techniques, fluid grids, flexible images and media queries had all existed separately before, but he was the first to name the combination and argue for it as a coherent alternative to building a separate site for every device. The article was influential enough that Marcotte turned it into a short book for A Book Apart in 2011, and by 2012 that book had become close to required reading for anyone building websites professionally.
What made 2012 the year the idea moved from theory to default practice was a combination of device chaos and one specific endorsement. Screen sizes had multiplied past anything the fluid-grid pioneers of the mid-2000s had planned for: iPhones, a growing range of Android phones in different dimensions, iPads and Android tablets and laptops of every size all needed to render the same content in some reasonable way. Building and maintaining a separate site for each category, the common approach through the late 2000s, was turning into a real maintenance burden for any team trying to keep content in sync across two or three codebases.
Then, in June 2012, Google’s Webmaster Central blog formally recommended responsive design as its preferred configuration for smartphone-optimized sites, over the alternative of running a separate mobile subdomain. That recommendation mattered beyond its technical content, because it settled an argument that had been running in web development circles since Marcotte’s original article: whether one adaptable site or two separate ones was the smarter long-term investment. With Google on record, agencies and in-house teams that had been on the fence had a much easier internal argument to make to skeptical stakeholders.
Case studies helped too. The Boston Globe relaunched its website using responsive techniques in September 2011, and by 2012 it had become the flagship example every conference talk and agency pitch deck pointed to: a major, high-traffic publisher proving that a single, fluid layout could handle everything from a phone screen to a desktop monitor without sacrificing the reading experience on either end. It wasn’t a small blog or a portfolio site making the case; it was a newsroom serving a demanding daily audience.
None of this meant the technique was easy or fully settled by 2012. Media queries and fluid grids solved layout, but performance was becoming its own problem, since a “responsive” site that just hid desktop content with CSS on a phone still often loaded the same heavy images and scripts regardless of screen size, a gap that would occupy the next several years of the field’s attention. Navigation patterns for small screens, image handling and workflow between designers and developers were all still being figured out in real time, often differently from team to team.
Even with those rough edges, the direction was no longer in question by the end of 2012. What had started as one article’s argument for a better technique had become, in the space of two years, the industry’s default answer to the device fragmentation problem, backed by the search engine that most of these sites depended on for traffic in the first place.
