Remember websites back in the days?

9 min. read

The other day I was doing some cleaning on my hard disk and I found a lot of old files that I have kept in my computer for more than 10 years now. For example, I found my old "websites" folder. THAT folder. The folder where my first websites ever were stored.

There are not only websites made by me entirely from scratch (with tables!), but also, experiments of all types: decorated boxes, papyrus backgrounds, ROUNDED CORNERS... I also had a folder where I saved websites made by others that I was dissecting. Websites that I considered interesting or that had some functionality that I wanted to learn about. Like, "holy cow, a menu appears when I hover!". Super high technology like that ;-p .

BEWARE! Nostalgia attack!

Rounded corners

I (re)discovered that I had an obsession with rounded cornered boxes. I had like 12 folders of different techniques to create them (I considered keeping them to make a museum, but at the end deleted them all). Remember how those were made?

Back in the time (2003-2004) you had to use images with rounded borders... up to 12 images... and then engage in all kinds of sorcery with tables to position them. And they where super inflexible.

Then, somebody had the idea of using JavaScript to create them. That was the famous Nifty corners, who allowed all types of personalization. Recently, I made a gist to translate all those examples to simple CSS using border-radius.

When a solution with divs arrived, we were all running like headless chicken. This was it:


<div class="rbroundbox">

    <div class="rbtop"><div></div></div>

    <div class="rbcontent">
        <h2>Header</h2>
        <p>Text here my love.</p>
    </div>

    <div class="rbbot"><div></div></div>

</div>

The divs inside the "top" and "bottom" divs where used as styling elements, their sole purpose was to contain the right-corner images.

THIS was DA THING.

Today, nobody remembers that. But I had an entire site made with this technique. Of course now it uses border-radius.

Thanks God for border-radius.

Those footers

It was almost mandatory that all footers contained "Optimized for a resolution of 800x600" and, of course, "Webmaster: email@address.com". Because one single person could do a whole website back in the days XD. By the way, the designs used to be super rigid and full of images and backgrounds, because nobody in their sane mental health would browse the internet from a mobile phone. Although they certainly made nice throwing weapons; you could easily break the floor if your phone fell down.

CAPSLOCKS

Remember when your stylesheets had all the attributes written in capslocks? Same for the html tags and their attributes as well. And ASP reserved words. And SQL syntax. Capslocks. CAPSLOCKS EVERYWHERE.

Transparency

One of the sites I had saved in my dissectionables folder was the home page of the Aeroporto di Venezia. Why? Because back in 2002, it had transparent menus. There was a background image, and a set of menus and submenus would appear on hover. They had a blue background with some opacity that allowed to see the background image through the menu.

Today, this sounds so eezzyyy. Back then... it was hell.

Up until 2010, you couldn't even use rgba syntax, and you had to use a png for backwards compatibility.

And much earlier, for non-IE browsers you could use 60% transparent PNG images, but IE didn't understand PNG transparency, so you had to use transparent (and much more pixelated) GIF images instead. There was a famous blog post that I can't find anymore, showing an eagle on a transparent PNG flying over the sun, that didn't work at all in IE.

PHPbb forums

So easy to install, and with a million themes. I found like 7 different phpbb forum installations in my old folder. My favorite skins were "What is real", (because TRANSPARENCIES!), and "NoseBleed".

JavaScript

We usually talk about the evolution of CSS and all the things we can do with it now. But JavaScript was funny back in the days. I'm sure you remember this:


<script language="JavaScript"><!-- hide the script from old browsers --

which is not needed anymore. Or what about "discontinued" properties like document.bgColor? Now you would use document.body.style.background.

These were a classic in the days when accessing the status bar made you feel like a hacker:


<body onLoad="window.defaultStatus=This is my page">

<a HREF="newpage.htm" onMouseOver="window.status='Click Here to go to the Next Page!';return true" /a>

And, remember how you swapped an image on :hover? With JavaScript, like this:


<a href="document.html"
onmouseover="document.home.src='pic2.jpg'"
onmouseout="document.home.src='pic1.jpg'">
<img src="pic1.jpg" name="home">
</a>

For example:

Dynamic layers

I never really came to get what exactly this was, but I saw it for the first time in a forum, where you could click a row to display all the replies to that comment. Today you would do that with JavaScript (or even with the CSS :checked hack), but who knows what they were using. At the time, I was doing an internship on web development with ASP and SQL, and when I asked my mentor, I got that answer. "Oh, those are dynamic layers".

CSS Zen garden

I think Mezzo Blue's CSS Zen garden site marked a before and an after in the direction of the web, and helped it be where it is today. I was so amazed at the things people submitted to this page. I downloaded them all, to dissect them, of course. I learned a lot from them. Even if this site dissapears in the future, it will always have a place in my heart (although with the release of html5 they seem to be active again).

Comments