AIM or Yahoo! Messenger:
GTDreamsmith

Site Design History

I thought it might be fun to take a look at how the look and feel of this website has evolved over the years -- if nothing else, it provides a look at my evolution as a web designer.

Now, it should be noted that I never intended to be a web designer (see my disclaimer on the index page linked to below). When I first snagged my own domain name on May 24th, 2000, I was just looking for a stable URL on which to host my personal website, the main function of which was going to be to serve as a stable location to find Qtarot, a program I had written but did not want hosted on my webpages at work or school. And at first, that's pretty much all it was. But then I had the idea of posting some of the things I was writing. By September, my webpage looked like this:

Version 1 Home

And to those who actually checked the "About" link, no, this system no longer runs on that old SPARCstation, but it did until January 16th, 2003, when that machine finally died of either a CPU or motherboard failure.

After a few months of running the above, I decided to really flesh out the website. More writings (I was in a creating writing class at the time), more ranting, and more software. I also wanted something that looked nice, but I really had no web design skills to speak of. Lucky for me, at the time there was a (now defunct) site called Moyra's Web Jewels that had a number of very nice designs for free use on personal websites, so I snagged one called "OP-ulent Greys" and went to work. The link below shows what it looked like, although the content is actually current thanks to my theme engine (more on that later). This version went online December 8th, 2000:

Version 2 Home

For a while, I was happy. But in the process of getting Moyra's design working with my site, I had learned a lot about web design. By the summer, I was itching to do my own design. I figured it wouldn't be as "nifty" as Moyra's, but it would be mine; for indeed, if I was going to use the site as a forum to present my own original writing, it ought to use my own original design as well. Thus we got the "Marble" theme, which went online on May 5th, 2001:

Version 3 Home

Of course, looking at it, it isn't much of an original design. In fact, it is laid out pretty much like it was before -- columns on the side, navigation widget on the top, a couple more buttons, but otherwise the only real difference was that all the graphics were my own, constructed in The GIMP, and the new navigation widget had three more buttons. So, although entirely original in code and graphics, the layout was still drawing heavily on the previous version.

What was actually the niftiest feature wasn't really visible to anyone but me -- in transitioning from versions 2 to 3, I moved a lot of design elements out of the documents into a "themes" directory, where they were simply included into the current document via the magic of SSI. The "themes" directory was actually a symbolic link to the actual theme, and by simply changing the symlink, I could change the site theme, and all the documents on it would change to the new look automatically. However, only one theme could be active on the site at a time, as that symlink would globally change the look. This would change in the next version...

The navigation widget in the version 3 site above is the final version -- at several points I changed a button or two on it. But the 3 x 4 layout kept causing me problems -- I couldn't simply add a button without either removing one or adding three more, nor could I remove one without finding something to replace it or removing three more. Also, I wanted to start breaking down some of those sections into subsections, and have a nice way to navigate between the content in each section without always having to pop back to the section index, much like how the navigation widget allows you to go from section to section without having to pop back to the site index (in fact, I didn't actually have a site index).

At this point, I realized what I really wanted was a new layout. (It was about this time that I also realized that, despite my redoing all the graphics, my layout was still the same layout I had been using with Moyra's OP-ulent Greys.) In addition to having a high level navigation widget at the top, an index to the entire site, I would have a secondary navigation panel on the site, indexing an area of the site. Additionally, the previous designed had restricted the width of the content to a certain area, no matter how wide you made your browser window. In the new design, I decided to fully utilize the window space available (try altering your browser's window size and see what happens). These goals in mind, GIMP in hand, and a large library of picture CD-ROMs on my desk, I went to work...

Version 4 Home

There's actually a story behind each picture across the top, a reason why each belongs in my personal collage, but I'll save that for another day. With regards to the actual coding of the site, one of the most interesting features of this latest version is the ability to switch themes on the fly, an ability you've been using to view previous versions of the site design. In the version 2 and 3 links above, notice the "www" is replaced with "v2" or "v3"? Those don't actually link to different servers, or even different files on this server. Instead, they provide a hint to the theme engine about how it should present the page. The webserver provides different graphics or code-snippets for the same requested file, all through the magic of Apache's rewrite module. This and a bit of SSI makes it possible for multiple themes to exist and be usable simultaneously without needing to rewrite symlinks.