codersnotes

Basic

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 Wave

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.

GeoCities

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:

Hoo boy.

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 Computer Programming Web Ring?
[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:

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:

Click Here To Send Me An E-Mail!

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.