Blog Redesign 2009

For over a year now, I've been wanting to redesign my blog. Two months ago, I began the process of reorganizing and redesigning.

After three years, I think I got my money's worth out of the Yaletown theme, and it's time to move on. What really pushed me over the edge was the new threaded comments feature of Wordpress, and the extreme difficulty – given my nonexistent PHP abilities – of backward fitting the Yaletown theme to be compatible.

The other thing that was annoying me about my blog design was that all my photos had to be sized down to 475 pixels wide to fit. Flickr, my image host, defaults their medium images to 500 pixels wide. This meant having a plugin called iMax Width that, whenever I saved a blog post, would go download all the images in the post, check their height and width, and then set the img tag's width and height proportionally so that no image was wider than 475 pixels. This meant that it took forever to save any little change to my blog posts. Ugh. Plus, it didn't always work. So I made sure my new layout allows room for 500 pixel images.

Dev Server

The first step in my redesign was to "do it right" with an installation of Wordpress on my own computer to make development fast, and allow for testing (imagine that!) of new changes to not break the live site. In theory, I can test everything from a CSS padding change to a plugin install to a Wordpress version upgrade before deploying that change to my live site.

For my development server, I found this awesome package called MAMP that provides a trivially easy installation of Apache, Mysql, and PHP. I exported my blog database from the server, imported into my local db, and was off running!

Design

Next I went theme browsing. My two criteria were that it allow threaded comments and have three-columns. My old layout was needlessly thin. Eventually I found one that didn't look too bad, and I installed it. I can't even remember the original name of the theme because that was so long ago. The only thing remaining from the original theme is the black sidebar headers.

Then I shamelessly stole the background texture and general color scheme from the beautifully designed Digital Photography School website, added some gradients of my own with Photoshop, and voila! I have gained a lot of respect for people, like my colleague Alan, who design websites for a living. The actual coding of HTML and CSS is easy; I'm an expert at that. It's the creativity of choosing color schemes and layouts that look good that is the hard part.

Data Migration

Now that I've got a new Wordpress theme, I should be done, right? Wrong. My database is full of hundreds of posts with images set to a 475 pixel width. I'm sure I could have done the data repair in PHP, but I have a very mature, robust XHTML library for java that I've written over the past few years. And I know how to request images over HTTP and check their sizes in java, and I don't in any other language. Another benefit of using my XHTML library is that I'm guaranteed to get valid XHTML back out of it; but the downside is that I had to manually repair several dozen posts that were using naughty non-XHTML tags like or

So I wrote a program to load each blog post from the database into my XHTML java object structure, search it for images, download each of those images from the internet, and if the image was larger than 475 pixels, fix the width tag up to a limit of 500 pixels. The entire process to load 934 posts, download and examine all their images, and save the repaired HTML code to the database took approximately 4 hours. After much, much testing, I finally ran it on the real data this morning.