Viewing the source was how the web was made in the early days. You viewed the source code for the website you were looking at, to see how they did some display trick or another, then you’d copy that code, make it your own, and incorporate it into your work. Open source is what the web was built on. Looking at, and using the code of others was all just part of how we worked.
The initial design of the Project Cool website was inspired by a landing page created by David Siegel. David is a brilliant man who manages to do a lot of interesting things. If you ever get the chance to sit down with him, I highly recommend it.
When we founded Project Cool, there was hope we would have some money to do things like, oh, hire people to do the initial website design. At Project Cool, particularly in the early years, we didn’t have money to do nearly anything. I would have loved to have had David design our initial site, I’m sure it would have been good, but that fell to me.
The idea behind the landing page David presented, spoke to me. It was an asteroid with a translucent rectangle with the site name crossing part of the image. It inspired me to look at space as the theme for the Project Cool website. I recently asked David if he might still have a copy in an archive someplace, but alas, he does not. His floppy disks were lost years ago, like everyone else’s.
I have always been a fan of science fiction and space travel. I sat down and looked at NASA images and picked objects to represent the different areas of the site. Saturn was the planet everyone would see when they came in. Venus held sway over the developer zone, Neptune was the planet for Coolest on the Web, a comet represented Sightings.
Yes, I came up with the wonky site and company name, Project Cool. I love wordplay and while I couldn’t do a Cool Site of the Day, I could certainly do a Project Cool Sighting, which contains the sounds “cool site.” Sighting was a play on UFO’s and unknown objects. Later, the sighting would be accompanied by an alien spokesperson.
The name was also about branding, because I had spent so long having been the expert on cool, it was part of my brand. Even today it’s hard to escape. In fact, just a few days before Project Cool launched, Newsweek named me The King of Cool. Branding had to be part of the name.
I didn’t use a landing page, I simply had Saturn and the buttons had a simulated translucence. I selected Futura as the font family. I have a deep love for typography and fonts. At one point Adobe gifted me their entire postscript font collection on CD’s. Futura has always spoken to me. I used an extra bold font for the buttons at Project Cool. You’re seeing it here now, it’s the font family you’re reading.
So the first design was there, then the web started doing interesting things.
I modified the code, made it work just a tad better, and put it on the website. The questions about how it worked caused me to do something pretty much unheard of in the day, I documented the code.
I put remarks in the code that would explain how it worked to anyone who viewed the source. I explained what needed to be changed, etc. Then I told people to “steal this code.” And they did.
The second iteration was easy. I changed two images at once. The first, the usual button highlight. The second, an image at the top of the button pane would also swap to the object representing the section. It was an easy trick, and once more I documented the code.
Someone at Adobe complained that the front page didn’t tell people what the sections they might go to were. I, personally, thought the names like Sightings and Developer Zone were pretty self explanatory, but ok. This one was easy too. A square with each section being a graphic with a text description of the section that would appear on mouseover, and Saturn was in an open area at the center of the square. It was an okay design, but just kind of meh, in my opinion.
Because the graphics had to be there, or the presentation wouldn’t work, I did something new. I created a basic landing page where I said something like “While you’re paused reading this, we’re pre-loading the graphics you’ll see on the next page. Aren’t we clever?”
And there, at the bottom of the page, were little 1×1 images that weren’t really 1×1, but the browsers would display any size you specified. So these little dots were the preloads and when the user clicked through to the next page, all the graphics were, hopefully, preloaded and instantly appeared.
That was the last easy page I did.
From that point forward, any time I changed the website, I tried to do things on the front page that people didn’t think possible. I would literally sit in a room alone and undisturbed for a day or two and come out with something no one had seen done before. And the first impossible one? Let me tell you about it.
It’s not that these things weren’t possible. Clearly they were. I just managed to think outside the web browser box model more often than not. Yes, I know. That pun was a stretch. Most days I’d be thinking about the web for 12 hours or more a day and I didn’t have clients to satisfy. I’d sit there in front of my workstation and just try things.
There are a few things you should know about the web then. First, a fast connection at home was rare, we were talking 14.4 kilobits per second. In fact, Project Cool sat behind a 1.5 Mbps, or megabit per second T-1 line. That was the maxim speed data could exit the site at.
Most people were using telephone lines to access the web. You could generally expect that a megabyte of data would take five seconds to transfer to a user. So, if you weren’t careful the user might see empty spots where graphics should be. This was particularly problematic when a lot of design still required text on graphics to be, well, design. If you wanted to use a font, you put it in a graphic.
The four main options were 3-d font images I had rendered in TrueSpace, a 3-d graphics tool I loved to play with. I used the Univers font family, Univers Condensed Bold Oblique, I believe. This was what the artist who created our logo had used for the company name, so they were perfectly matched.
There was also a very large, for the time period, image of Saturn. Well, part of Saturn. The part that would be off screen wasn’t there. The visible part of Saturn, was about 400×220 pixels and I was building the site with a 480 pixel width. So, Saturn was the biggest thing on the page.
This was probably the most important design I ever made. This was one of my first to show some of the real possibilities that were to come.
So what did people see when they came to the site?
Well, they were shown a webpage with some beautifully rendered text and up in the corner, the upper left corner of the browser, Saturn, rendered in TrueSpace, floated down behind the other graphics and stopped.
After everyone picked their jaws up off the floor, they viewed the source. And there, fully documented, was everything they needed to know to take that code and use it for themselves along with my token “steal my code” statement and an accompanying tutorial in the Developer Zone.
The era of Dynamic HTML had begun and I was on board.