“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.”
This quote comes from an article I penned back in January 2002, reflecting my perspective while working at Razorfish in Hamburg. At that time, our team was deeply involved in the relaunch of Audi’s online presence, specifically Audi.de and Audi.com. Discussions within the team frequently revolved around the crucial aspect of page layout flexibility.
My viewpoint, as evident from the quote, was firm: websites should be adaptable, adjusting seamlessly to the screen size of the user’s device. However, some of my colleagues on the project advocated for a more rigid structure, favoring layouts with fixed dimensions.
We navigated this difference in opinion by adopting a solution that mandated three distinct layout sizes for every page on the site: small, medium, and large. This was in the pre-smartphone era – we were still grappling with WAP! “Small” corresponded to 640×480, “medium” to 800×600, and “large” to 1024×768. The implemented system employed JavaScript to dynamically resize the page layout to fit one of these predefined sizes. As users adjusted their browser width, the page layout would responsively update on the client side.
In retrospect, this approach represents what I believe to be a very early example of a responsive design website, albeit rudimentary when compared to today’s sophisticated standards. (If anyone is aware of an earlier instance, I would gladly revise my claim!)
Below are screenshots illustrating the same Audi.de page from early 2002, rendered in each of the three sizes:
To appreciate the page layout’s responsiveness to varying browser sizes more effectively, you can download this PDF to your computer, view it in full screen, and navigate through the screens:
Audi 2002 Responsive Design Demo (PDF)
Initially, the design team considered this a promising approach. However, as the complexities of implementation became apparent, increasing both the project’s timeline and budget, both the client and Razorfish management began to question its practicality. Ultimately, at the time, it proved to be somewhat impractical, leaning more towards a design experiment. Nevertheless, the site launched incorporating this responsive design feature. Subsequent website redesigns, however, discontinued this approach, meaning it is no longer live.
Reflecting on Bill Buxton’s concept of “The Long Nose of Innovation,” I like to think that our approach, even if indirectly, served as a precursor to modern responsive design. Buxton insightfully notes:
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 Baltimore in March 2002. My presentation from that event is available on SlideShare. Furthermore, I provided a summary of this case study in Boxes and Arrows, titled “Challenging The Status Quo: Audi Redesigned.”
To reiterate, the Audi.de and Audi.com websites of 2002 represent a foundational, albeit basic, example of responsive design. The underlying principles driving these layouts and their technical execution foreshadow the responsive techniques we commonly use today.
UPDATE
For clarity, the Audi solution was more than just a liquid layout. It assessed the user’s viewport size and dynamically served one of three pre-designed sizes using JavaScript. While technically not “responsive” by contemporary standards, it went beyond simple liquid layouts, marking an early step in the evolution of responsive web design.
