The First Responsive Design Website: Audi (circa 2002)

“Developing fixed-size Web pages is a fundamentally flawed practice. Not only does it result in Web pages that remain at a constant size regardless of the user’s browser size, but it fails to take advantage of the medium’s flexibility.

…

With an increase of alternative browsing devises on the horizon, such as WebTV, public access kiosks, video gaming systems, e-Books, small handheld devices, and other nonstandard applications, the continuum of viewable browsing sizes will only expand. Never before has the demand for flexibility been greater. Solutions developed on the Web now will affect and inform future design.”

The above quote is from an article I wrote in January of 2002. I was working at Razorfish in Hamburg at the time, and much of the thinking in that article came from team discussions around page layout flexibility. We were working on the relaunch of Audi.de and Audi.com.

My stance was clear, as you can infer from the above quote: web pages should be flexible and fit to the screen of the end user’s device. Others on the project favored a more controlled layout with fixed dimensions.

We resolved the conflict with an approach that called for each and every page in the site to have three different layout sizes: small, medium and large. Smart phones were not in play back then (heck, we were still dealing with WAP!), so small was 640×480, medium was 800×600, and large was 1024×768. The implemented solution used javascript to resize the layout of the page to fit one of these sizes. As you changed the width of your browser, the page layout would update dynamically on the client side.

With this, I believe it’s first example of a responsive design website, albeit primitive compared to today’s examples. (If you can find and earlier example, I’d be happy to retract my claim!)

Below are three screenshots of the same page from Audi.de website taken at the beginning of 2002:

1. A page from Audi.de (circa 2002) at 640×480 (small)

.

2. The same page from Audi.de at 800×600 (medium)

.

3. The page at 1024×768 (large)

.

To better see how the page layout responded to different browser sizes, download this PDF to your desktop, view it in full screen mode, and page through screens:

Audi 2002 Responsive Design Demo  (PDF)

Initially, this seemed like a good idea to the design team. But as the complexities of implementation started adding time and cost to the project both the client and Razorfish management questioned the approach. Indeed, at the time it proved to be fairly useless and more of design exercise than anything. But we launched the site with this responsive design. Subsequent relaunches did away with it, so you won’t see it live anymore.

Still, if we consider what Bill Buxton calls “The Long Nose of Innovation,” I’d like to think that in some way — perhaps indirectly — our approach was a precursor to modern responsive design. Buxton writes:

Any technology that is going to have significant impact over the next 10 years is already at least 10 years old. That doesn’t imply that the 10-year-old technologies we might draw from are mature or that we understand their implications; rather, just the basic concept is known, or knowable to those who care to look.

I presented this case study at the IA Summit in March 2002 in Baltimore. My presentation from that talk is now on SlideShare (after all these years). I also wrote a summary of the case study in Boxes and Arrows. See: “Challenging The Status Quo: Audi Redesigned.”

Again, the Audi.de and Audi.com websites from 2002 represent a primitive example of responsive design. But the motivation behind the layouts and the implementation mirror modern responsive techniques.

—————————-

UPDATE

To be clear, the Audi solution wasn’t just a liquid layout. It looked at the user’s viewport size and then served up one of the three different sizes dynamically with javascript. This technically doesn’t qualify as “responsive” by today’s standards, but it went beyond liquid layouts.

Tags: audi, responsive web design