Redesigned Personal Site

Avatar of Chris Coyier
Chris Coyier on (Updated on )

As I do from time to time, I redesigned my personal site (redesign notes). I wanted to make the site a better vessel for writing, so the shell of the site has a much nicer structure for doing that. It’s 100% WordPress of course. I did break one major rule: the design is a complete overhaul of the previous site, rather than an evolutionary step. I just felt like evolution wasn’t going to cut it this time. And besides, this is a low-traffic, personal site, not major news portal or web app or anything where the “Who moved my cheese?” phenomenon is much stronger.

In typical web design, a generic template is used for articles. Images may be dropped in, but by and large, each article follows the same structure. If you are familiar with WordPress, think of the single.php file, which serves as the template for all blog post articles on the whole site. There may be nothing wrong with that for a lot of sites. This site is like that, by and large.

Of course all of you have heard of Jason Santa Maria and his website. Jason’s idea is that web design doesn’t have to be like that (even CMS driven sites). He says that web design can learn a lot from print design, in the care and craft that goes into publishing content in that media (e.g. a magazine). Articles throughout a magazine may have similar characteristics, but each one will have also have design choices that suit the content it is serving. Perhaps large graphics, text wrapping around images, multiple columns, different colors and title styles, could be anything.

The idea is coming to be known as ‘Art directing on the web’. Jason is a great example, but check out Dustin Curtis as well. This isn’t just a fad, it’s just good, timeless design. I’m going to try and get on board myself with the new blog. Not every single thing I write will be a complete transformation, and some may have none at all. I like my base template just fine and it will accommodate quick writings just fine. But when I have the time an inclination, this new site will be a fun base to build around.

Here are some recent posts I’ve played with a bit.

List of Post Apocalyptic Movies

Grooveshark on the iPhone

10 years of Simutronics

So how is it done?

Well if you aren’t using a CMS, it’s easy, just design away. If you are using a CMS, there is already a template in place which you means you need to “fight” against the existing CSS. I’m using WordPress, and I think the easiest way to accomplish it on that platform is through the art direction plugin.

This plugin adds a box to the post editor with two fields. One for code to insert on any page the post appears, and the other for code to insert only when the page is viewed in it’s single form.

With that code dropped into the right box, that code is now inserted into the <head> of the page when it’s loaded.

Because this comes after the CSS file, identical selectors are overwritten by these. No fancy !important stuff needed. Important to note here, is that whatever goes in these boxes gets inserted. It doesn’t have to be a <style> block. It could be a link to an external CSS file (preferable if what you are doing gets complex). It could be JavaScript as well.

I’m just starting to get the hang of this. None of the above examples is any crazy major transformation, but I think enough was done to make each of them interesting and serves the content a little better. My plan for the future is to make a set of CSS files that I can use as a base for a post alterations as needed. For example, a “white.css”, that I can load in to replace the sites dark background with a light background. This will involve changing that background color, but also flip flopping colors on lots of different text to make it dark-on-light, as well as stuff like my name/logo up top. Then if I have a post that will make more sense to be on white (because of imagery, for example), I’ll duplicate that stylesheet and use it as a base for alterations. Fun fun!


Oh, and Happy Halloween!