Under Construction November 24th, 2015
It's interesting to see how things change. Back when the Web was new we just didn't really think too much about design. The sheer novelty of having a home page (that's what we had instead of blogs back then) was just so exciting, that we'd just put any old rubbish on there just because we could.
It's a little scary that there might be fully grown adults reading this who weren't even born at the time. Maybe I'm just old.
I'll spare you the horrible details of how you actually had to get on-line back in those days. I won't dredge up old memories of PPP and SLIP configurations. And of course I don't have to tell you that Trumpet Winsock is best Winsock. No, today I want to talk about design.
In the beginning was NCSA Mosaic. Well, it wasn't the first, but it was the first that most people had. Maybe you had Spry Mosaic or one of the other spinoffs. We're probably talking around 1993 here. What made Mosaic special was that it could display images on a webpage.
You see, before it was just text. There was no
such thing as CSS back then, nor even
<font> tags. So the
actual look of your page was dictated by the browser itself, in a
very standardized simple theme.
Let's see if we can go back in time a little here. The first thing we need to do is to get rid of all our clean, modern CSS and strip it back. It's interesting that I can't do that by simply omitting the CSS, as modern browsers have a nicer default theme. So I'll have to do it manually by configuring my own colors, fonts, and such, to try and match the old styles.
Here we go:
Welcome to Web 1.0
This is how it looked back then. It's not quite right, as the modern browser you're using will almost certainly be using anti-aliasing on the fonts, to make them look all pretty n'all. I can't replicate that in CSS unfortunately.
The background was grey. Links would look like this, with their nice blue underlines. And clickable images would always have a nice big blue outline around them, so that you'd know you could click on it:
This was the look, the only one. You had no choice, you could either take it or leave it. Every single website looked like this.
The web as we know it began around 1990-91, and at first there wasn't much to it - just a simple collection of linked documents. But it sent out ripples through the world, and a wave was coming. A wave that could not be stopped.
The first websites belonged only to the big institutions - universities and large tech companies. One of the first big websites was the NASA homepage, which was popular not because of what it was, but because it was one of the few websites at the time that actually existed and had lots of content.
If you wanted a website then you needed to have a machine connected 24/7 to the Internet. Most people at home only had a dial-up modem and could only remain connected to the Internet for perhaps an hour or so. If you were lucky, your ISP or university might provide you with a few megabytes of space to host a simple website in.
The idea of the home page sprung up. A "home page" was supposed to be a page about you - your personal representation to the rest of the world, like a kind of business card almost. Your home page would be the virtual avatar that represented you uniquely on the web. Everyone wanted their own one, and no-one knew what they were supposed to put on it.
But they found things to put on it. Oh, did they.
The wave hit hard. It wasn't enough to have text. Everyone wanted more, and it didn't matter what the "more" was. Anything would do - fonts, colors, animations. You name it and it was added to HTML, as quickly as possible.
The two browser giants, Microsoft and Netscape, entered into an arms race: to see who could add the most glitter as quickly as possible. Which side won? Like any good mutually-assured destruction, we all lost.
While hosting a .com website remained out of reach for most, the demand for your own home page grew stronger. For the great unwashed mashes, there was GeoCities.
GeoCities was a strange experiment. It wasn't only about webhosting. It was trying to form a kind of virtual community, hence the "cities" part. It tried to divide pages up into virtual regions based on their content. So pages about films might go into "Hollywood", or computer pages into "SiliconValley". Each page was assigned not a name, but a number which represented a street address.
Of course, like most experiments of the kind, no-one cared. They just wanted their free webspace.
But what did they put on this free webspace, you ask? Well sit yourself down, and I'll take you on a little walk through basic home page construction.
The first thing you have to realize is that every web page is Under Construction. Much like we were always at war with Eastasia, a home page is always under construction. This still applies even once constructed.
And they'd let you know this, in case you went around thinking this was the finished website. Under no circumstances could the visitor be allowed to not know something about the website's operation. They'd put little stickers to make it clear to you:
Jason Scott even went as far as to compile a list of all the under-construction icons from the entire of GeoCities. (trigger warning: may induce eye bleeding)
Now everyone wanted to know how popular their page was. Most web servers will log traffic internally, and you can install something like AWStats on your server and use it to keep track of things. How many visitors you had, which page directed them to your site, you get the idea.
But if you didn't have your own server, and were using GeoCities, then you couldn't do that. All you could control was the HTML. So instead you could use inject HTML from a third-party service into your webpage, which could then let an external server do the tracking for you.
We still use this idea today - Google Analytics provides a good example of a modern version. But that wasn't "Web 1.0"-enough for that era. Google Analytics only works behind the scenes - there's no way for your visitors to know about it! And in Web 1.0-land, if your visitors don't know about it then it doesn't exist.
No, instead back then we had something altogether more delightful: the Web Counter.
Unfortunately the old mainstay digits.com has long since gotten out of the counter business, but it turns out there actually are companies that still offer this service. I managed to track one down, and so have added a lovely hit counter to this very page. I'll leave it up here and then everyone can join in and see what number visitor they are. What fun.
More Technology Arrives
More technologies came, just simple additions but they could transform a website from a simple text document into something interactive, something more bi-directional.
The server-side image map was an interesting oddity. For years, the old NASA website used a server-side image map as it's main navigation tool. You could 'simply' click anywhere on the image, and the pixel coordinates would be relayed to the server, who would then decide where to send you.
Notice the little coordinates in your URL status bar/tooltip? This giant image would be the first thing that greeted you when you went to nasa.gov. This didn't resize either, so good luck if you had a different screen resolution. I can imagine the UX designers today recoiling in horror just at the thought.
Next came the guestbooks. We didn't have a comment system back then, like the cool kids over on WordPress do nowadays, because we didn't really even have AJAX or anything else that could run interactively. But we had forms, and so some sites would have a guestbook. This was basically just a single page you could leave a little note on. Let's add one here too:
|View My Guestbook||Sign My Guestbook|
It's a quaint idea, the thought that you'd make your visitors sign in like at a hotel. I wonder if anyone ever viewed them?
A home page didn't exist in a vacuum either. The GeoCities pages could link to others in the same "city", but that would be a very broad grouping. If a site wanted to be part of a community, it could join a "webring".
A webring was just a list of sites with a common theme, which you could register your site with. Each participating site would add a simple banner, which would let you jump forwards/backwards around the ring. It's a slightly odd idea - why not just have a list? I don't know, maybe that just wasn't how Web 1.0 did things.
I tried to actually find a still-functioning webring to sign this page up to, but there don't seem to be any left.
This site is part of the Computer Programming Web Ring!
Want to join the
|[Skip Prev] [Prev] [Next] [Skip Next] [Random] [Next 5] [List Sites]|
1995 was back in the era of the Great Browser Wars, when Microsoft and Netscape duked it out to see who could add the most poorly thought out features first.
In todays world we try to design pages to be compatible across all browsers, but back then you'd often see these little banners on each page, to indicate what browser you should be using:
Best viewed with
What's interesting is that many of the pages didn't actually have any compatibility issues at all, and would probably run fine on either browser. I guess the authors just liked having an excuse to add more buttons.
All That Glitters
Sit back down, we're not done yet, not by a long shot.
Our beautiful home page is coming along just nicely, with a guestbook, and a webring, but there's something... I don't know, just kind of... plain about it I guess? It seems kind of grey, and clinical.
In order to attract visitors we'll need something more. Something that will really pop. The trouble with this page so far is that there's just too much text. Text is old-fashioned. It screams of the 1980s. It doesn't jump out at you, it doesn't catch your eye. We need some images.
The browser vendors had been busy by this point adding lots of new features, and we're in the perfect position now to make use of them.
In order to express itself, a typical GeoCities website should wear at least 15 pieces of flair. 15 is the minimum. It's up to you whether you want to do the bare minimum, but some people choose to wear more and we encourage that. You do want to express yourself, don't you?
So let's put some images in.
The first thing to go is that stupid default horizontal rule. You know, this one:
Let's spice it up a bit!
Whoa, now we're getting somewhere! Look at that glorious rainbow! This is certainly going to be a good website.
We'll need to express ourselves a little more than that. There should be some more animated gifs:
At least one of these images should be missing. I don't know why, that's just how it always seemed to be back then.
Another important property they should have is that the page owner didn't make them. They'd have been collected up from other sites at random and just dropped onto the page. Things like color coordination didn't really matter. It wasn't important whether the images depicted something relevant, or joined together to make a coherent design. Their simple presense was enough.
Because they'd been authored originally for someone else's website, they would always have a weird little outline around them where the anti-aliasing for one background color didn't match the background color of the new page.
It's also important that they all be badly dithered to 256 colors, although ideally no two GIFs should share the same 256-color palette, thus forcing the OS to do more remapping afterwards.
We need a bit more decoration though. That default grey background is just... well... so 1993. We can do better. Let's introduce a nice background image. And we should probably take care of the font colors as well to match it.
Now this. This, is a home page.
Making simple changes like the font color just isn't enough. You need to make your website stand out from all the others. Luckily, Netscape engineers saw fit to add something useful that would fix this - the <blink> tag.
Not willing to be outdone by that Netscape startup, Microsoft went one better and matched it with their innovation, the <marquee>:
I was going to add two IFRAME borders to the top and side as well, for easy navigation, but I couldn't bring myself to be that cruel.
Best viewed with
You might think I'm making this up, or at least exaggerating. But the horrible truth is that this really was how these websites were. They all looked like this, every little one of the fuckers.
So what happened to the great web-design gold rush? Well to tell you the truth, I'm not sure. Somewhere around 2000 it started to fizzle out. Perhaps websites like Google, with their clean "no-distractions" look started to usher in an era of slight restraint.
In some ways I suppose the WordPress default themes may be the best thing to ever happen to web design. I never used to care for them much, but I see now that they've done a wonderful job of damage limitation.
It's nice to look back and see how things were. Being nostalgic is fun sometimes, but this is one of those occasions where we should be thankful we've moved forward.
Written by Richard Mitton,
software engineer and travelling wizard.
Follow me on twitter: http://twitter.com/grumpygiant