15 Years of Responsive Web Design

The history of the Web is replete with important dates. 12 March 1989, the date Tim Berners-Lee submitted Information Management: A Proposal to Mike Sendell at CERN. 6 August 1991, the day the first Web page went live on the open Internet. 30 April 1993, the date when the source code for the first server and browser were released into the public domain.

Here's another: 25 May 2010, the day Ethan Marcotte's ideas about Responsive Web Design were published in an article in online magazine A List Apart.

At the time, I had been on the W3C Team for just over a year teaching an online course about how to create pages for the mobile Web. I got that job for two reasons: first, I had been a member of the Mobile Web Best Practices Working group and so knew the current thinking on how this should be done; secondly, I had some experience and even a qualification in adult education. Incredible as it seems today given her eminence as a Web designer and accessibility expert, students on the first run of that course included Laura Kalbag. In the preceding years, while one working group developed the Mobile Web Best Practices, another closely associated group created the Device Description Repository Simple API and related documents. When we started that work in July 2005, under the leadership of Dan Appelquist, Rotan Hanrahan and Jo Rabin, creating a website for Mobile meant finding out exactly which device was being used to look at your content and adjusting your code accordingly. That is, you would need to dynamically adjust your site for every device on the market, taking into account the variation in widths and heights of the screen and a bunch of known bugs.

This nightmare was caused by various factors. A lack of adherence to standards by the then fledgeling mobile web device manufacturers was one (Nokia was the biggest show in town at that time), but more fundamental was the approach everyone took. Namely "how can I fit my beautiful deskop design onto a tiny screen?" The starting point was the desktop/laptop that everyone was familiar with.

Ethan Marcotte's brilliant insight was to jettison that thinking and, instead, tackle the problem from an entirely new perspective: mobile first. Assume you have a small screen and create a linear presentation. If you have more horizontal space, let your design flow to fill it.

That's it. That's Responsive Web Design.

The CSS standards already had the necessary functionality to do this. The concept of media queries was first suggested by CSS co-inventor Håkon Wium Lie in 1994 and formal work to define them began in 2000 but, I think I'm right in saying, that no one had thought to use them in quite the way foreseen by Marcotte. It was a revolution and, 15 years on, is the way all websites are designed. It made a lot of that Device Description work redundant (sorry Rotan and Jo!) but most of the Mobile Web Best Pratices I'm pleased to say remain as pertinent as they ever did.