The changes may not seem like that much at first, but it’s definitely more of a realignment than a redesign. When I originally set out, I had just few goals in mind that I wanted to accomplish. I kept adding more changes and it ended up being almost a total code rewrite.

More contrast and tire marks

My first objective was to increase the contrast. On some monitors the older version had a washed out look. I wanted the graphic elements to be subtle and not overpower the content, but I think they were a little too subtle. So, the colors and the graphic elements such as the pin-striping have been adjusted for greater contrast. I toyed with the idea of changing the background color to something light, but in the end I decided to keep the background dark. My next goal was to have the page load faster and reduce the file size of the background images. That meant getting rid of the huge gradient background in the previous version. It has been replaced with a much smaller and simpler gradient. The biggest visual change however, is the addition of the dark footer at the bottom of the page.

Page structure and new templates

In order to implement the footer, the XHTML had to be restructured. Originally the footer information was not last in the structure of the XHTML and that’s something that always bugged me. Now when the site is viewed with CSS off, the pages make more sense from top to bottom. The PHP templates that power the site have also been redone. When I first implemented them along with Wordpress, I had two sets of templates. One for the main part of the site and one for the blog. Now they both use the same templates, and while I was at it I upgraded to the latest version of Worpress.

Designing with rules and breaking them

One of my other priorities was to establish consistent rules in which to treat different types of content. Take links for instance, on the last version links might have been a myriad of different colors. Now white text indicates that element is a link. Other rules have also been established, text is a grey, headlines and elements are orange, and buttons all have the same treatment. Rules are always meant to be broken, it’s knowing when and how that makes it acceptable. The one place the links are not white is in the bottom part of the footer. The decision to do this was based more on an objective than it was on aesthetics. The need to have this information recede overrode the need for it to be identified as a link.

Doing more with less

There were two reasons behind establishing rules for the design. One was to establish consistent behavior of elements throughout the site. The second reason was that in writing CSS, I have been trying to establish general styles for the different types of content, and then writing additional styles only as needed. When new or different types of content are added, there is a lesser need to write new styles to accommodate them. The last goal was to not just simplify the code, but also the presentation of the content. There seemed like there were too many pages for the amount of content on the site. The main area of the site that this affected was the portfolio. Instead of individual pages for each item, all the pages have been merged into three main pages. To accomplish this Thickbox was implemented with some modifications. The result is fewer clicks to access the same amount of information.

Standards Reboot

For the first time I participated in a community reboot. Standards Reboot launched earlier this month and it is focused more not just on the aesthetics but on the code behind it with an emphasis on Web Standards. This was in line with the changes that I was making to this site, so I decided to participate. I really never intended to recode mostly everything, but it really helped with updating the way I approach a project. This is important in a environment where techniques and processes are changing daily.