Command Line Heroes - Web UX Begins

Episode Date: May 4, 2021

Looking at the internet in 1995 is like looking back at awkward grade school yearbooks—all the weirdness and flaws stand out in stark contrast to what it’s grown into since. And web design took awhile to become a career—but it got a big boost in 1995. When the Batman Forever website launched to promote the movie, it showed people what was possible on the web. And it forever changed what we’d expect from a website. Jay Hoffmann describes the quirky designs of the early web. Richard Vijgen explains how we went from a lack of conventions to a homogenized web. Jeffrey Zeldman recounts building the Batman Forever movie’s website—and sowing the seeds of professional web design. Jessica Helfand outlines the process and joys of designing a web page. And Kyle Drake shares how he founded Neocities in an attempt to recreate some of that magic of the early web.

You know, of all the Batman movies ever made, 1995's Batman Forever? Yeah, it's not at the top of a lot of lists. It was campy, with strangely muscled outfits and overblown acting. But it did boast one superb element. The website for Batman Forever was a breakthrough. The first standalone site ever made for a movie. When people visited, they found full-screen backgrounds, videos you could download, message boards where fans could chat.

It was a whole new arena of digital marketing. And it was a harbinger of things to come. All of a sudden, the World Wide Web was opening up to whole new levels of design. Batman Forever's website launched on May 25, 1995. We've been talking all season about how that year propelled us into a new future. Because 1995 was the year the web took on a life of its own. And that new life was looking good. Because the internet after 1995 was one where design, user experience, suddenly mattered like never before.

The look and feel of a web page would determine success. And that inspired a lot of innovation because a new army of web designers were asking, what should a website even look like? The answer at first was, it could look like anything. I'm Saran Yitbarek, and this is Command Line Heroes, an original podcast from Red Hat. I wanted to know, how did that rush of 1990s web design change our online world? It was a period

of extreme change for designers. And looking back at that period today, the work can look a little weird, sometimes even cringeworthy. But that's because a foundational shift was underway. Before web designer was a bona fide profession, there was a lot of amateur action going on. Old enough, you might remember cobbled together websites from the mid-90s full of obnoxious banners, proudly positioned site counters, and scrolling neon text in all caps. Like I said, it was a weird time for web design. But nowhere was this weirdness flourishing more than at a little web hosting company called GeoCities. It was started by David Bonet and John Reznor, and they both basically just wanted to create a way for people to just host any websites, really. Jay Hoffman is a developer at Reactive Studios,

and he's been running a website called The History of the Web for the last few years. He says those GeoCities founders picked up on the fact that the web was going to be a place where user participation rules. The strength of the web was its ability to bring users of a website into the process itself. And there was a real belief that moving forward, the web was going to be a participatory medium. So in other words, everybody was going to have a website and everybody was going to have kind of a home base on the web. And that's what we would use to communicate to each other. Bonnet and Reznor built GeoCities so users could easily manage their own homepage for free.

Users were given templates and a visual editor where they could work on their HTML. And all this drastically lowered the bar for starting out. In an afternoon, you could create a simple 15 megabyte corner of the internet that was all yours. You actually chose a neighborhood and the neighborhoods each had a theme. Area 51 was science fiction and Beverly Hills was fashion. Nashville was country. You would actually like drill down to the street itself. So you would like pick your neighborhood and then you would go to a street and you would pick your spot on the street and you would have actual neighbors. Users were like pioneers, citizens of a brand new country. They called themselves netizens.

And they were learning to imagine the World Wide Web as a territory they could inhabit. The web is this big community. It's this big space. And what you need to do is just find your place in it. And I think that was extremely powerful. And it caught on very quickly. Those home bases needed to be decorated. They needed to be personalized. Once the idea had been formed that you own a piece of the web,

users were inspired to invent ways to show off a bit. I think what you would see a lot is people experimenting with the medium. You would learn a little bit of HTML. You would come to a site and it would be this big, bold background that was green or purple or gold and text on that that was maybe barely readable against it, but big and there were some elementary tags that let you scroll text.

So you would often see a little bit of scrolling text and maybe a random spot. Imagine a teenager who got to design their own bedroom. It's not going to be the lobby of the Ritz. In our teenage bedrooms, we took an early stab at establishing an aesthetic of our own. And that's exactly what was happening at GeoCities in 1995. It was being done by people that were younger, so they had kind of a different aesthetic. But it was also by people that were maybe a little bit on the outside of the mainstream and willing to take a chance on some things.

So you saw some really, really interesting experiments come out of 1995. One of those chance takers was Richard Fiven, an artist who was also an avid citizen of geocities. There weren't any rules. So there weren't any conventions about what a homepage should be or what it should look like or what kind of language you should use or how you should use images or sounds or videos it was basically evolutionary process where people would look at one another's websites and think like hey that's a good idea i might use this midi sound or this this repeating background or this real player video and i think it was really a sort of collaborative process of people trying to figure out how to use the medium. Collaborative and democratic, amateurs were pushing the medium forward with an openness that would later seem impossible

because a commercialized and professionalized web was just around the corner. In 1999, Yahoo purchased GeoCities. Then, in 2009, Yahoo shut it down. The decision upset a lot of those early netizens. More than a decade of experimental web design disappeared overnight. If we're sticking with that teenage

bedroom metaphor, this is the moment you come home from college and realize your bedroom's been turned into an office. And yet, not all was lost. Fiven had heard there was a backup of GeoCities, a kind of digital heritage effort in the form of a huge file on BitTorrent, about 700 gigabytes of data. And I thought to myself, here's a paradox, because I think it's very important that they made this backup. And at the same time, it's almost impossible to use it and to show it to someone and convince them of the cultural value of early 90s internet and geocities because this format was so closed, so hermetic. Fiven, whose art focuses on data visualization,

began working to translate that file into a piece of digital culture that anyone could interact with. He called his creation the deleted city, a digital ghost town that anyone could wander, a testament to the earliest days of amateur web design. I wanted to share the enthusiasm that I had for this early online culture, because this was a time when Web 2.0 platforms like Facebook and Twitter were really taking over the internet could be in a very different way than the sort of first generation internet that I came to love. That web 2.0 was a web where design choices were made for you. A web where social media platforms handled all the code on your behalf, and everybody's corner of the internet looked a lot like everybody else's. Here's Jay Hoffman again.

When GeoCities closed, the web was already beginning to turn. It was becoming something that was a little more mainstream. It was becoming a place of business rather than a place of, let's say, personal exploration. It was the rise of the dot-coms and potentially the fall of the weird. But the days of exploration weren't over yet, because even as the amateur paradise of geocities became a ghost town, a whole new culture of professional web design was emerging. I mentioned the Batman Forever website at the top of this episode. The 1995 creation that signaled the beginning of professional web design.

But just how big a change was it? We locked ourselves in our offices and wouldn't talk to anybody and basically just did a three-month war room until we came out with a website. That's designer Jeffrey Zeldman, who, along with Alec Pollack and Steve McCarron, built the Batman Forever website. Thing was, like every other designer at the time, they had essentially no clue what they were doing. The job was still being invented. Our agency president went down the hall and asked Alec Pollack and me, can you guys make websites? And we lied and said, of of course and we had no idea they imagined for starters a little drama what if the batman logo flew toward the screen only problem flash wouldn't be invented for three more years zeldman explains how art director mccarran used the graphics

capabilities of netscape 1.1 to make it work. And quick disclaimer, the way he pronounces things in this next clip does not reflect this podcast's position on the GIF versus GIF debate, but to each their own. So he took an image of the bat logo and he shrank it by 20% and saved it as a GIF. And then he shrank it by 20% and saved it as a GIF. And he shrank that by 20% and saved it as a GIF. And then he shrank it by 20% and saved it as a GIF. And he shrank that by 20% and saved it as a GIF. He kept going. So basically what he had made was the equivalent of just the series of the Bat logo getting smaller.

Then he sequenced it so that it looked like the Bat logo was getting bigger. There was a language called Perl that was a back-end language that you could use to control the timing of events on the web. So the effect was that the bat logo came at you out of the dark and was animated. They were basically stapling and duct-taping this website together, making it up as they went along. The result was more immersive and more fun than any website that 1990s audiences had ever seen. We basically made a movie theater that looked like something from a Batman comic and all these

buildings and we stacked them next to each other and we had what was called an image map, which is where you make a giant picture and then you mark these areas and say, this is a live link, this little area. So if anyone clicks anywhere near this part of the picture that represents Gotham Cinema, they'll be taken to the Gotham Cinema page. And if anyone clicks near the Gotham Library building,

they'll be taken there. Basically a clickable version of the city foram Cinema page. And if anyone clicks near the Gotham Library building, they'll be taken there. Basically a clickable version of the city for the front page. Did they bother to include the movie's title on that homepage? Nah. It was weird and wonderful. Zeldman told us there were about a million people

using the web at that time. And half of them visited their website. Joel Schumacher said it was better than the movie. There was nothing else like it, and there still is. When people go, oh, look at these old websites, and they laugh and show geocities or something, I'm like, we were doing something much more aesthetically refined and excellent. Zeldman and his team delivered a test case that inspired others.

Internet Explorer and Adobe Flash and CSS all arrived soon after, and a new world of web design was unleashed where professional designers could flex their muscles. Meanwhile, every company now needed a website of their very own. Something else was happening too. As companies began demanding their own websites, they also started demanding predictable results. All those clicks and little signals of user behavior were starting to add up to a culture where the Wild West could be replaced by reams of hard data. There was a push toward best practices, and clients wanted their websites to look and feel

like every other website. Soon, the experimentation of something like the Batman Forever site became a liability. We were making something cool and underground, and it assumed you were an early web adopter. You had the patience to sit through an animation and find out what the website was about. Your friend told you it was cool, you'd sit there while the animation loaded. Wouldn't make that assumption today. Today people are looking for information. Today's web is much more transactional. It's much more about I need to do, I need to see, I need to learn. Even while we mourn the loss of those less rule-bound early days, we should remember that

making things easy to navigate is really about accessibility. The original Batman Forever site assumed you'd get the browser it needed, Netscape 1.1. And it made all kinds of assumptions about language, literacy, and education too. Now we would try to be inclusive from the get-go and we would test and I would use language that was clear instead of clever. I wouldn't make navigation based on a metaphor like a city. You know, I'd have navigation that would say download video files, right? Because nobody has time. We've lost some charm and wonder, but we've gained tremendously in usability. New rules were being written, and a decade or so later, we would have less patience for the experiments of 1995. But we can't underestimate how much change took place before that new rule-bound reality emerged.

As web design became a bona fide respectable field, it remade the larger world of design in its own image. I remember standing by a fax machine and drawing on 8.5 by 11 paper, drawing what I thought the screen should look like and faxing sketches to clients. Jessica Helfand is a designer and one of the founders of the Design Observer site. She lived through that moment of transformation when the web arrived and her industry changed forever. Today, it's obvious to us that web design is just as valuable as the design of a printed magazine. But Helfan remembers a hybrid moment when designers were still learning how to translate their skills and their attention onto digital screens. I actually always drew on tracing paper,

which is very forgiving and fun and kinetic. So I would make these tissue sketches, rolls of tissue like architects use, and I would send these tissue sketches to clients. When Helfand designed the website for the Discovery Channel, for example, she used old mediums to imagine the dynamism of a web experience. On paper, she drew screens on top of screens as she imagined a user navigating the site. We did everything on paper and then drew them in Photoshop so long before, you know, Adobe had XD. We were really thinking about

how to make the most elegant transition of information to go from the printed page to the screen. Transitioning print onto the screen has been fundamental to Helfand's career. She designed the website for the New York Times, and they've been a client ever since. Along with a team of grad students who knew their HTML, she discovered that web design could be more than a simple digitization of older ideas. We avail ourselves of the resources we have at any given time. And in a way, the real fun wasn't even doing the work for these wonderful clients like the New York Times and Discovery. It was figuring out how to get the work done. And so I still have those sketches. In the 1990s, Hal Phan's team used Illustrator and InDesign on Apple computers

and figured out how to design for display on browsers like Netscape Navigator. But nothing was universal or easily transferable. She remembers the problem of display on different machines. And it was very humbling and very shocking that this beautiful thing you had concocted that was backlit on your screen and it looked really fantastic and then you print out the pages and put them on the wall and you'd imagine what it looked like when somebody looked at it

on their 15-inch monitor. You'd get them on an like when somebody looked at it on their, you know, 15-inch monitor. You'd get them on an IBM and just forget about it. All hope would be drained from your face because it would look totally different. Even designing a large page size would increase the upload time for users on a dial-up connection. And that would make your bounce rate skyrocket. But amidst all those early frustrations, there was also a phenomenal opportunity for the designers who didn't cling too tightly to the past.

Serious limitations force us to rethink basic principles. I was interested in how stories and narrative and photographs and history could be interwoven using interaction as a social construct, as a connective tissue between constituent groups. And that's, in a sense, has always been my interest. And what I was excited about then as now was inventing new ways of seeing. And in the end, new ways of seeing is exactly what we got. The shift from printed page to digital screen

meant thinking of user experience in dynamic new ways. It meant reimagining what a retail experience could look like. It meant new interactive designs with feedback and engagement that were simply impossible before. What we've inherited is a radically transformed design world that emerged after that initial disruption of 1995. The question is, where do we get that push to discover new ways of seeing today? Many of us miss the 1995 moment when geCities made avant-garde web designers out of amateurs. And we miss the moment when professionals like Helfand were forced to reinvent themselves.

We miss the pioneer phase of web design. So how do we recapture that sense of experimentation? How do we make room for our own weird and wonderful? Hi, my name is Kyle Drake, and I am the founder of NeoCities. Growing up, Kyle Drake liked... Weird fan fiction. And he got into...

Connecting to weird servers all over the world. And his favorite websites were often... Weird and 90s looking. Now, that's a lot of weird. You might not be surprised to hear that Drake was an avid member of GeoCities back in the mid 90s. More recently, a company he helped to start was sold and he had the chance to take a break and look back through the old websites he designed in the 90s. I said to myself, wow, I love these sites.

Like, why don't people make websites like this anymore? This is actually really cool. So just as sort of a weird couple-week project, I sort of threw together the initial NeoCities. NeoCities launched in 2013, offering people the chance to revisit those experimental glory days of web design. He didn't expect too much.

Just to offer users the chance to build in a way that's less defined by algorithms and more defined by personal creativity. He wanted to give people something very simple and yet rare in the 21st century, a truly blank canvas. It went viral and we got a ton of support and people started using it and it just sort of snowballed organically from there.

Turns out, a lot of people were looking for that free-form design space we left behind in 1995. There are 350,000 sites on NeoCities already, all from word of mouth. To Drake, it's not about nostalgia, it's about recovery. We're looking for the things about the 90s web that were fundamentally better in design and outcome than the web of today, which isn't things like technological limitations and dancing baby gifts, right? It's about creative expression and about being able to sort of retake control from the algorithms and actually go out and explore the way that you want to explore. Whether it's on NeoCities or platforms that haven't been invented yet, the spirit of 1995,

when you were in charge of designing your own little corner of the web, is always waiting to be rekindled. Making the web more predictable was a necessary part of making it work for everyone. But as a result, preserving our weirdness is something we have to constantly work at. If we're not careful, our online lives can be entirely designed for us. As the web evolves, I guess it's inevitable that some amount of best practices and templates and standardization show up. But it's worth remembering that every best practice, every template, was once a brand new idea. And if we want to know what the best web of tomorrow looks like,

we should keep building online spaces where weirdness can thrive. For more details on the web design revolution of the 1990s and our whole season's worth of bonus material about 1995, visit redhat.com slash command line heroes. Next time, we'll be diving into another major area of change from that fateful year, e-commerce. We're exploring how perfect timing and some crucial new technologies turn some tiny startups into the biggest stores in history. Until then, I'm Saranya Dvarik, and this is Command Line Heroes, an original podcast for Red Hat. Keep on coding. Hi, I'm Mike Ferris, Chief Strategy Officer. I've been a Red Hatter for about 25 years.

And before your episode starts, I want to talk a bit about AI. The hot topic right now is foundation models. And those are important, but at Red Hat, we see them as just a piece of the larger AI infrastructure. And here's what I mean by that. Enterprises are built of hundreds or even thousands of applications. It's not hard to imagine a future in which those applications are being served

by hundreds or thousands of models. Without a common platform for your data scientists and developers, without a way to simplify some really complex workflows as you train, tune, serve, and monitor models, it can get overwhelming pretty quickly. And that's why we've built Red Hat OpenShift AI, a platform where everyone is working together on the same page

to build and deploy AI models and applications with transparency and control. Find out how at redhat.com.