Finally uploaded

I’ve been fairly quiet here for the past couple months due to a million projects at work, one of which I finally got to finish tonight. We revamped the Creative Commons website, and although it largely looks the same, there are some new sections, a reorganization, and complete recoding from the ground up, using the latest CSS tricks.

The logo is now using this image replacement trick to hide the logo from text browsers. I removed the javascript rollovers and script used in the navigation on every page, and instead replaced it with the CSS rollover technique, which borrowed heavily from the techniques used on the Lee Jeans site. It’s a really cool trick, each nav bar item is actually a larger image that shows both states, with CSS to move and hide the parts that don’t need to show. As these technologies and tricks are constantly evolving, Simplebits has a great tutorial on doing a three-stage rollover all with CSS (I’ll have to copy that and reduce the number of images and lines of CSS further). Before I was doing navigation and subnavigation using nested div elements, but now everything is a nicely organized, unordered list styled with CSS.

The end result are pages that look exactly the same as before, but the code is about 20% tighter (the site was already valid XHTML/CSS before), pages will be easily indexed by search engines, and the content will be more accessible to all. Take a look at the about page, then turn off styles in your browser and view source to see what all the work was for. Now, if I could only get IE 5 on the mac to allow for float:right to work when applied to a form element, I could get rid of the last table in the header, but even with that, the site is valid XHTML, it’s simpler to update, and carries both rich semantics and increased accessibility.

But don’t just take my HTML programmer word for it, there really is a business case to be made for coding websites like this.