Greg's Blog

helping me remember what I figure out

The Site Re-design

| Comments

I love having time on my hands. Apart from it being a nice break it gives you the time to work on things that you were planning on doing for absolutely ever. So it was time to re-work the site and finally get rid of all those tables and deliver a truly a site that separates content from presentation. Here’s how I went about it and the tools I used to get there.

Since the original design had been built as a go between traditional development methods and xHTML, this revamp was actually so much less painful than any other. In terms of time it took me 2 days to re-work the site completely. 3 hours were spent on design the concept and building the prototype and the rest was building/modifying/tweaking. The first tool I used was a color picker called Quick Color, and I was lucky enough to stumble across it a few days before starting this re-design at Zeldman.

By then I had already settled on a layout, opting for a two columned approach, the code for which I found at Glish.com. Another aspect of the document structure that I was keen to implement was making use of lists for my navigation, which appears the proper semantic way of doing things. I followed the instructions in the article on taming lists on ALA and another article over at DevEdge

Once the structure and a satisfactory prototype were completed I went about making all the content dynamic, which just involved re-formatting the output from all the queries that drive the site. Imagine how pleased I was that I had decided to code the output for the pages in that manner. There is something to be said for a modular and separating your code from the content approach as well.

The nest item I wanted to add was my e-mail address but being weary of spam and the likes I wanted to make sure it wouldn’t get spidered. So I made use of a tool that I came across some time ago from hiveware: email enkoder. This app generates a little bit of JavaScript that allows you to display your email address normally, but look under the hood and it’s encrypted and hence safe (well for the time being) from those spam spiders.

Now I was nearing the end of my re-design and it was time to validate all my code to make sure it was xHTML/CSS compliant. To this end I made use of the validator service over at W3C: for xHTML and for CSS. Since I had also developed an RSS feed, I decided to validate this one as well, which you can find here. After all this work I thought I might as well advertise the fact that they were compliant, but the original buttons are pretty ugly, so I made use of this button generator tool to create the buttons you see at the bottom of every page. This app is based on the development of Minimal Verbosity.

To round it off though, it should be noted that not all pages validate properly. This is due to some outdated content and in some case my just cutting and pasting links and not modifying them to reflect xHTML (i.e. changing the “&” to &). Over time I hope to rectify this. Another thing that I haven’t completed yet, is the WAI conformance. The tool used here for testing compliance is Bobby. As soon as I am done, I’ll be making use of that button tool again. And that’s it the background on my re-development is complete.

For completeness here’s the complete list of tools and links