mclaughlin.me v3 - Late 2009

I participated in SiteSprint II this holiday season, which basically means I commited to redesign and launch my site in 30 days. I started with 57 others on the 15th of November, 29 days ago, and I'm finally finished. This post will hopefully give you a peek into what I did when approaching the decisions behind, and some of the insights I've gained from this new design. Enjoy!

Initial Thoughts

My primary goal in redesigning was to develop a nice, easy to read dark theme. I chose a very similar color-scheme to mclaughlin.me v2 (pictured below), but overhauled the typography.

In mclaughlin.me v2, I played around with the @font-face CSS property, and decided that it's not quite mature enough for my tastes. Because of that, I started looking for nice, widely used (read: web-safe) fonts that complimented each-other. I settled on Myriad Pro (defaulting to Helvetica) for headers, and 10pt Cambria for the body copy.

After I had the typography figured out, the rest of the design fell into place really quickly.

Templating

At this point, I took my ideas into Photoshop, and had to make some interface choices. One of the key features of the design, is the minimal, but always-there header. Along with that, I decided to make the sidebar persistant (a choice that I'm not quite 100% on, but it's OK for now.)

I sliced some PNGs by hand, and mocked up the HTML/CSS until I was satisfied. I added a couple features that were never part of the PSD, like the per-post share links below the date. (The gorgeous icons are by Komodo Media.)

Coding

Accompaning the complete redesign of the front-end, the back-end was rewritten from the ground up. This blog isn't powered by WordPress, or ExpressionEngine, or even TextPattern. It's powered by a simple PHP publishing platform that I wrote because I wanted complete contr/over exactly what took place behind the scenes.

Among the features that were added to the rewrite, were some awesome short URLs for the posts. Granted, they're not as short as is.gd or u.nu, but they're personal, which is worth the extra charectars to me. The short link for this post is http://mclaughlin.me/2/, where '2' is simply the post's unique ID.

There are numerous other under-the-hood changes that you guys will never see, but hopefully the site is more responsive as a result of my optimizations.

Wrap up

There are still many additional things that I need to do to have the site at 100%, but then again, there're always improvements to be made, right? You've got to ship the code sometime.

As always, feel free to leave your comments. I really appriciate all the feedback I get, whether it be negative or positive (as long as it's constructive.)

#redesign#sitesprint (∞)