Blog Redesign 2009

July 21, 2009 By: erik Category: News 59 views

Rate this post:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

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 <u> or <iframe>.

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 <img> 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.

Conclusion

No doubt the change has been a bit of a shock to my regular readers. I am open to all forms of opinion, criticism, etc. of the new layout. Too cramped? Better? Worse? See a post where something is misaligned? Please let me know.

 
  • http://www.hillbillyplease.com/blog/ jane

    I like it! Very nice.

  • Paul

    First I should say that I liked the last blog design very much. Thank you for posting a picture of it on your Flickr account so I can still see and remember it. Second, I like this new design even more. I like the wood grain on the sides, and the shades of tan. I’m still not sure about the dirty blue background of the main menu bar. It is supported by the blue tones of the water and sky in the picture right over it, and by the Dawkins link, but I would like to see something that complemented the red background of your post dates. I suspect I’ll like it more as I view it more.

    • http://www.erik-rasmussen.com/ Erik R.

      Yes, I made sure to save a copy of the old design to Flickr, because it’s exactly the kind of thing that you forget about as time goes on. I’ve been working so much on this design, that recently, when I went back to the live site, it seemed odd.

      (first threaded comment! woohoo!)

  • http://www.hillbillyplease.com/blog/ jane

    I also love the BITWRATHPLOOB link/graphic in the sidebar.

    • http://www.erik-rasmussen.com/ Erik R.

      Thanks! It’s not by accident that it looks like he’s gazing in rapture at the FSM.

      MHNATY.

  • http://www.thegradys.net Alan G

    The darkness of the header photo puts me in a sad mood for some reason.

    • http://www.erik-rasmussen.com/ Erik R.

      Yeah, that photo is a little “dusky”. Part of my goal with this redesign was to have a header image that I could change whenever the mood strikes without having to work everything.

      Paul’s right about the blue menu header, too. It’s out of place. He’s also right about needing to incorporate more of the maroon.

  • http://www.hubbers.com Hubbers

    I love the new design. Very professional.

  • http://landofnospice.blogspot.com mondraussie

    Looking good! And i like the threaded comments (something i didn’t think about when i changed mine, but it’s too late now!) Oh, and i like the header photo…

  • http://landofnospice.blogspot.com mondraussie

    but… strangely enough, i was able to submit my comment without any “human checker” word, and then after i’d submitted it, it told me that there had been an error… however i see that the first comment did actually get posted… you’re the techie boy, not me, so i’ll leave that in your capable hands!

    • http://www.erik-rasmussen.com/ Erik R.

      Hmm. That’s odd.

      I’m using a new super-secret matter-of-national-security human checking plugin that should, in theory, alleviate the need for you to type in some goofy word.

      Everybody be on the lookout for future error messages and let me know. I haven’t seen any yet.

      • http://landofnospice.blogspot.com mondraussie

        a ” new super-secret matter-of-national-security human checking plugin”? i’m intrigued…

        • http://www.erik-rasmussen.com/ Erik R.

          Hopefully not intrigued enough that I have to kill you.

  • Jim in MN

    Erik,

    I just wanted to say thanks for putting up such a great Blog. I grew up in Spain (My mother is spanish, father American) and love reading about your experiences. Generally when I have a question about something, I look on here first. (I was curious about my iPhone 3GS working there and which carrier used them and low and behold you have a huge geekish article about it)! :) I could’ve googled it, but your experiences are always a lot more entertaining. Thanks again, buddy!

  • Paul

    Are all those “Reply” messages a feature or a bug?

    • http://www.erik-rasmussen.com/ Erik R.

      A feature. If you click “reply” on another comment before submitting your comment, you will be replying to that comment. This is what I meant by “threaded comments”.

  • http://erik-rasmussen.com/blog Betsy

    Why do some of the comments have numbers and others do not? I like the banner picture. Still from the Laredo beach, right?

    • http://www.erik-rasmussen.com/ Erik R.

      That’s very observant of you. They all have the numbers, but when a comment has a reply, the reply is on top of its parent’s number. I’ll see what I can do.

      Another feature I added yesterday is that, for five minutes after submitting your comment, you should be able to edit it. I like this system better than the “live comment preview” thing I had before.

      The photo is of high tide from the maritime walkway here in Colindres.

      • http://www.erik-rasmussen.com/ Erik R.

        Well, it was an image of high tide, but I’ve just changed it to one of low tide.

  • http://letterstosg.com Lance

    I’m just seeing this after staying up most of the night redesigning my own. This looks great!

    I give you credit for sticking with a consistent theme for so long. One of the top 3 reasons I even have a website is that I like futzing around with PHP and CSS, and I wouldn’t have any excuse to otherwise. (That’s also why I run a 3-reader, single-author blog on Drupal.) Back when I ran a site with lots of visitors and some revenue, it was all I could do to not constantly be implementing small changes to the look and feel of the site. My hat is off to you for keeping steady on until you had a reason to change, and then making such quality changes.

    Also, hooray for threaded comments.

  • http://global-gal.com/ globalgal

    Thanks so much for mentioning the MAMP package! I am an amateur at blog design, but I enjoy “messing around” and with a dev server I can do this so much easier. I didn’t know how to go about it until I read this post.

    Your site looks great!