Gordaen's Blog

I have been meaning to redesign my “main” site for quite some time. I put “main” in quotes because Gordaen.com started as my only site, but my Toyota MR2 site receives far more visits every day than this blog, which receives far more hits than my “main” site. One of the reasons that traffic has always been low is the niche that it fits into and the fact that it was rarely updated. The other problem was that it was fugly. The fugly and stale content problems were related: I designed the site when I was new to PHP and I was more interested in trying new things with PHP than trying to make it look nice or trying to make it easy to update. Hence, I’ve felt the need to update it for a long time, but have never had the desire (nor the time).

Old Design

This screenshot shows the old, horrendous look of the site. The black background might be stylish, but it tended to cause more eye strain when reading text. The site was originally called “Gordaen’s Knowledge,” because “Gordaen” had become my online nickname of sorts and the “Knowledge” was from my intent to share what I knew about a lot of different things. Unfortunately, I never really got around to adding much of what I had hoped to (such as (X)HTML tutorials), so the name was not very good. Though I did get a few hits here and there for “poems about knowledge.”

First Redesign Attempt

Early in the summer, I had come up with this design. It was entirely em-based, even the photos, so increasing and decreasing the font size in any browser (that didn’t terribly suck) would maintain the exact same layout as if zooming. My goal was simple, accessible, and minimal images (the text-shadows are a CSS feature, supported by Safari; they are not images). Unfortunately, I ran into a lot of quirks with the em-based alignments and I started to see that browsers aren’t truly ready for this sort of layout. I also had some frustration with determining where to put the information about each image.

Current Design

I did like a few of the features of the previous redesign attempt, such as the menu, so I tried to incorporate those into the latest design. I finally decided on a new name, Gordaen’s Aberration, and created a banner to go along with it. I spent a fair bit of time designing a print stylesheet that removes the menu and header (replacing the header with simple “Gordaen’s Aberration” text instead) and focuses on printing the content. I doubt if many (if any) people actually print from my site, but I know that when I print webpages, I hate having to deal with the “print selection” feature because they didn’t bother to remove all their ads and other crap for me. Speaking of which, I removed all advertising from the site and used the additional space for content. That gave me enough room to wrap info text around photos.

I don’t consider this design perfect by any means, but it’s a huge improvement and actually has a splash of color. One of the nice things that no one else will really see/appreciate is that I completely separated the site into an MVC architecture, which makes the pages so much cleaner and easier to work with. Theoretically, this will make it very easy for me to update the site, so I will be able to share my artwork without having to do a lot (if any) coding.