Website design in 1999

Website design in 1999

Posted on by Thea

I’m not going to keep up the narrative style from the last post, so from now on it’s back to first person.

In this post I’ll go through the design updates, and I’ll post a follow-up detailing the constraints that went in to this.

Lets get designing!

First, since basic CSS worked in 1999 I’ll add some CSS inside the <head> tag to make the background trendy black and text awesome white, and set the font to something sans-serif for the body and something more impactful for the headings. 

<style type=text/css>
body { 
    background-color: black; 
    color: white;
    font-family: "Verdana", "Helvetica", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Impact", "Helvetica", sans-serif
}
</style>

I’ve also obtained some page dividing gifs from the internet archive! There aren’t many ways to divide a page up, so images like this are used to visual separate parts of a page.

<center><img src=zdivider.gif width=600 height=1></center>

Using center tags because I don’t recall using <div> tags that early. I think it might have been one of those Netscape vs IE things? I know Netscape had the <layer> tag.

Now to add some links to the future pages of the site. The pages aren’t there yet, but that’s OK because it’s under construction right? They’ll just 404 for now

<center>
  <a href=about.html>About Me</a> - 
  <a href=guestbook.html>Guestbook</a> - 
  <a href=pets.html>Pets</a></center>

Though I think it’s important to add another indication that the site is under construction

<center>
  <img src=underconstruction.gif width=567 height=36 alt="under construction">
</center>

Now let’s add a fancy animated star background by adding <body background=background.gif>. Yes, CSS for this worked, but what’s more 1999 than mixing styling systems?

Now we can’t really read the links using the default blue and purple. A lot of people wouldn’t be bothered but we can fix it with some more CSS! And add a hover effect for people using IE4!

a:link { color: #44F }
a:visited { color: #F4F }
a:active, a:hover { color: #F66; font-weight: bold }

And as a bonus I’ll add a picture of my cat. The photo isn’t from 1999, but the cat was alive then!

Check out the updates!

Next time

Next up it’s time for some interactivity with a guestbook!

Author’s notes

Corrections to part 1

In my first post I neglected an important detail - the background colour! In the 90s - at least when using Netscape Navigator and earlier versions of Internet Explorer - the default background colour wasn’t white, it was a mid grey colour. #C0C0C0 to be precise. Why? I’m not entirely sure. I’ve fixed this.

The site from part one has been archived at https://thea.net.nz/~thea/part1/

Styling and layout

Web browsers are amazingly backwards compatible, almost everything from 1999 still works (except <blink>). There is a problem though - window size. It’s hard to find statistics from the era, but a substantial number of visitors would have been using 800x600 monitors, with 1024x768 also being common. By comparison my 15“ laptop has an effective screen resolution of 1680x1050, and my desktop monitors are even larger.

So I’ve decided I’m going to add some CSS to cap the document width at 1000 pixels and centre it in the browser. Though to be honest this was a common thing to do in 2008 when larger screen sizes appeared and broke the layouts.

Comments

Post a comment