Why Batman Forever is so Important for the Web
You may have heard the name Jeffrey Zeldman before. He’s often referred to as the godfather of the web, and in the early 2000’s he was a major force behind the Web Standards Project. But Zeldman started his career in advertising, and wound up at Grey Entertainment in the mid-90s. It was Alec Pollak who first showed him the web while working there. Zeldman was immediately hooked.
Not long after that, Don Buckley of Warner Bros. Pictures came to their offices with a request. He wanted a website built for his employers new film, Batman Forever. Even in 1995, Buckley understood the value of the web and its ability to connect the Batman franchise to fans around the world.
Initially, Zeldman and Pollak were hesitant. They had been tinkering with the web a bit, but had never worked on a project of this level. Still, there was only one answer that made sense to them. They would do it. They loved the web. And they would figure this out.
For the web, it was still early days and browsers were limited in terms of layout and design options. Good design demanded quite a bit of attention and effort. But almost as soon as there was a web to design for, site owners began to experiment.
Hotwired was one of the earliest examples of great design on the web. A web presence for Wired magazine, the site launched in October of 1994. From the start, Hotwired had a fresh and unique design. Keep in mind, this was before CSS could style elements, or tables could force them into place. All the Hotwired team had was a few browser specific tags and the natural flow of the web medium to go off of. But what they put together was bold and ambitious. It featured iconography from designer Max Kisman that filled out the navigation. They used image maps to lay things out in a grid-like structure, and when the browsers forced styles on them, they embraced it.
Hotwired became known for a lot of firsts, and it was not uncommon to see a redesign every year. But even from the day of its launch, the website set the bar pretty high for both designers and brands.
Hotwired almost assuredly acted as inspiration for the Batman Forever design team. Zeldman and Pollak grabbed their colleague Steve McCarron to help out. For a few months, the trio locked themselves in an office and tried stuff out, piecing it together as they went along. They emerged with a website that would act as a beacon for web designers everywhere. A sort of demo of what could be done with the web medium, and a leap forward for the still incredibly young field of web design. With Buckley’s approval, they unleashed BatmanForever.com to the world.
The site mixed functional design, witty copy and unique typography and images (pictured above). It showcased cutting edge hacks and modern techniques, like full screen backgrounds, which had just been introduced in Netscape. It also included some interactive features, with videos to download and a message board where fans could post about Batman (or anything they wanted). The team even brought on Doug Rice to create an intro animation of a bat flying towards the screen.
This stuff would’ve been hard to pull off at any point in the web’s history. In 1995, it was near impossible.
True, some parts of the site had been done before. But the team pulled a lot of different experiments together into something that, at the time, seemed like a breakthrough. Designers took notice. Everybody did. The site reached 1.5 million visitors a day, at a time when there were only 3 million people on the entire web.
The following year, 1996, ended up being a bit of a turning point for web design. Microsoft released its first version of Internet Explorer. Adobe Flash was born, and kitchy intros became more and more common. In December, CSS was first introduced. Every brand had to have a website. Geocities and Angelfire launched, and more and more people started making homes for themselves on the web.
Table-based layouts also came into style. The technique didn’t have much in the way of semantic HTML, but it did afford designers a lot more control. Even Zeldman went back to the Batman Forever site and added some tables to tighten up the design. And in the 1996 redesign of Hotwired, tables became the dominant layout method. This wasn’t all bad. Tables helped designers focus on new, innovative techniques. But it did set the web back a bit. Once CSS matured, thankfully, developers and designers swung back to a more semantic, accessible approach.
There are many sites that designers will think of when you ask them for their very earliest influences. But I’m willing to bet that more then a few of them will stick Batman Forever’s website on that list. It wasn’t perfect. Far from it. But that’s what gave the site its most potent connection. Even though there wasn’t a lot that could be done with HTML, and even though there would almost certainly be bugs, pushing the boundaries of the web was worth it. If you pulled it off, you could create an experience that was compelling, interactive and told a story. For eager designers on the web, that was a worthwhile pursuit.
If you’re ever struggling with a design, just think about what it would be like without CSS. Or presentational HTML. And just a few colors. Then, tip your hat to the web’s first designers who did so much with so little, and get back to work.
Added to the Timeline
- "Hotwired." Wikipedia. September 9, 2016. https://en.wikipedia.org/wiki/HotWired
- Alec Pollack. "How I Helped Launch Batman Forever." The Outtake. June 6, 2015. https://theouttake.net/batman-to-birdman-forever-bf3bc83dc412#.aeqiefhw6
- Sandijs Ruluks. "A brief history of web design for designers." Froont. December 12, 2014. http://blog.froont.com/brief-history-of-web-design-for-designers/
- Ryan Essmaker and Tina Essmaker. "Jeffrey Zeldman." The Great Discontent. August 8, 2012. http://thegreatdiscontent.com/interview/jeffrey-zeldman
- Jeffrey Veen. "Looking back at Hotwired." Veen. July 7, 2006. http://www.veen.com/jeff/archives/000903.html
- Jeffrey Zeldman. "but i play one on the web." Zeldman. 1998. http://www.zeldman.com/old/designer.html