“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.
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.
Mine may count — originally http://secondwivesclub.net, now http://secondwivescafe.com. I just looked on Internet Archive to be sure I wasn’t crazy, but I recall CSSing it up to size dynamically in 2001: http://web.archive.org/web/20011202114743/http://www.secondwivesclub.net/
The Audi site is certainly more polished… and a lot less pink! :)
Das nannte sich früher mal “liquides” Design – gab es schon immer (quasi der Default-State) und wurde 2001 wieder heraus gekramt im Zuge von Zengarden und Design mit CSS und dem Haten von Tabellenlayouts. Aber das schreibt ja auch Mary schon. Tabellenlayouts mit fixen Breiten sind auch erst in Mode gekommen, als Designer/Grafiker anfingen, Webseiten zu designen. In der Hoffnung, alles pixelgenau zu kontrollieren.
Pingback: Coderhouse | Introducción al Diseño Responsive - Coderhouse
Pingback: La discordia responsiva – Dinael Blog
Pingback: 6 Things You Should Know About Responsive Websites - Ad Inicio Digital
Pingback: 20 Years of CSS
Pingback: It's Been 20 Years of CSS - MushfiQ Shishir
Pingback: Responsive Development Pt II | Connections Marketing | Expert Blog
Pingback: Web content with mobile experience in mind – Qualifast
Pingback: 12 Necessary Benefits of Responsive Net Design - DICKLEUNG DESIGN GROUP
Pingback: 12 Important Advantages of Responsive Web Design – Digital South Africa
Pingback: ۳ هسته اصلی طراحی وب واکنشگرا – یو ایکس کد
Pingback: Is responsive website development is necessary? | Litmus Branding