❖ The Redesign

Most of my posts are self-indulgent. This one will have an extra heaping helping of self-indulgence. I’m going to write about the big Blog Redesign Project of 2010. If you don’t care to know all the details, and frankly I don’t blame you, here is what you really need to know: the design is pretty much locked in for the time being. I hope your screen shows the entire design ¹ and you enjoy it.

If you’re interested and brave enough to learn more, read on.
What I expected to be a lengthy process ended up taking less time than expected thanks to a big WordPress update that dropped right in the middle of my project. I had a stack of books on my desk about CSS, web design theory, graphic design theory, typography, etc. I was spending my evenings flipping through them for ideas, examining various WordPress themes and sites I like, digging through code, and trying to figure out how to put my own unique site together.

I was really enjoying the process, to the point of near obsession ² , but it was harder than I expected. The issue I ran into is that each site is built a little differently, so you can’t just take four sites you like, dig around to find the code that you want to use, and then paste all those bits together.

So I was hacking away, both here on the main site and on my developmental site, loading in new themes, making adjustments, trying to figure out how to add things I wanted, but felt like I was just spinning my wheels.

And then WordPress released a major update.

WordPress 3.0 changed many of the details that go into customizing a site. Better yet, the default theme was no longer an ugly, plain one but a semi-styled template that was a snap to customize. Suddenly many of the changes I had been trying to make were a click or two, or a small edit to a few lines of CSS, away.

Quickly I got something that was along the lines of what I had been hoping to build: a clean, attractive site that didn’t look like 2000 other WordPress sites.

How did I do it? Let’s get even more meta.

I’ve long enjoyed the look of simple sites, notably Daring Fireball and Shawn Blanc’s site. While I don’t think too many of my readers, if any, frequent those sites, I didn’t want to just rip off their looks. Still, I wanted to try to mimic their aesthetic.

During the process, while digging through some saved images, I found a nice graphic that fit the gray theme I liked. Thanks to the WordPress upgrade, I just had to upload the file and there was my cool background image. No need to edit it in Photoshop to a specific size and then play around with the CSS to get it to look right.

I soon found the keyboard image for the header, made some adjustments to it, and I was well on the way to a theme that fit what I was looking to create and offered what, I hope, is a unique look.

Some more details of the process:

❖ I’m a big fan of light text on dark backgrounds. I find it to be easier to read on a computer screen. However, I know not everyone is comfortable with that look. Thus, I went with a traditional dark text – light background look, although I did knock back the brightness a bit in the background. Hopefully that takes away some of the glare.

❖ I did a lot of playing around with fonts. I forgot how much I enjoyed that process in my grad school design class. In general, I like sans-serif fonts. I tried many, but in the end went back to the Museo Sans font I had been using before. I compliment it with Museo Slab for the headlines, title, etc.

❖ Keeping with the clean look, I eliminated some of the graphics I used to have on the right side bar, and moved the entire sidebar to the footer. Thus my Last.fm most recently played tracks list is just a text list now, and I offer only a link to my Goodreads profile rather than the covers of six recent books. If you were attentive, you may recall one of the themes I tried for a few days had a footer that was hidden and could be called up with a mouse click. I like that, especially so people who want to see the recent comments, for example, can get to them without scrolling through the entire page. Figuring out how to do that is on my To Do list for the next redesign.

So that’s where I am now, July 2010. I like what I’ve done. I may not have accomplished all that I set out to do, build the entire look and operation of the blog myself, but I did more than I could have done a year ago. But this will serve as the next step along the path to eventually designing every element myself. I will continue to learn more about coding, design, and the various platforms that are available.

Interestingly enough, there is a move by many bloggers I follow and admire to simplify the process, moving towards platforms like Tumblr and away from WordPress, Movable Type, etc. I’ve moved our family pictures to Tumblr, so I’m playing around with it, but don’t expect to move TBB there anytime soon.

If you’ve made it this far, you may have a question: why? Why does a personal blogger with a handful of readers go through the effort to redesign his blog when there are numerous options out there that require a lot less work? As I mentioned above, I’d like my site to be relatively original, not just another one that uses the same template. I’m interested in web design, and this was the most obvious way to take a stab at it. Finally, there is a pride factor involved. I put the work into building this. It’s mine, from code to text.

While much of this process was about me, I hope that my loyal readers enjoy it, too.

❖