Major site redesign

filed under: ,

27 January 2008

Inspired by my copy of The Principles of Beautiful Web Design, I’ve been working on a redesign of this site since last March, and I’ve finally finished it and published it. The redesign doesn’t change the actual content at all, and in that sense is somewhat unimportant. It does dramatically change the look of the site, though, and in that sense is somewhat interesting. I also took the opportunity to refactor the underlying code that generates the site, to make it easier to maintain and redesign in the future.

As you can see, the look is somewhat dramatic1. It wasn’t really what I had intended it to be, but I am still happy with it. It’s a very solid first attempt at real design, even though I focused too much on the mechanics of the process and not enough on higher-level issues. I expect that my next attempt will be better.

The book defines 5 stages of web design: Layout, Color, Texture, Typography, and Imagery, which I followed:


I spent a lot of time researching layouts and colors. For the layout I finally settled on something much like what I’d had before, although I made the sidebar wider to follow the golden ratio.

I’m quite proud of one very subtle aspect of the site: it has a “fluid + fixed” width design. That means that it allows the reader to resize the fonts and still have the site work, but it also has a “fixed” structure that gives me much more control over the layout. I got all the design benefits of a fixed-width site, but with the usability of a fluid one. I don’t think anyone else has done quite this thing before (and I looked!). For my technically-savvy readers: the entire site is em-based, but with appropriate min and max values on widths that keep things static.

Color & Imagery

For the colors, I found that I generally liked analogous color schemes. Rather than try to pick a set out of the air (from billions of possibilities!), I hunted around on iStockPhoto until I found a few images that I liked. (I looked for orange flame fractals) Once I had the images, I had my colors.


For texture, I removed a major component from the old site: rounded corners. I was sad to see them go, but they were fickle and buggy, and to this day there is no good way to make them work in web browsers, so I gave them up. In their place are a few subtle things like the watermarked image behind the articles and the dividing image between the articles and the sidebar. I also created a “favicon” (that should be appearing up by the URL in your browser, right now), based on the colors and layout of the site.


I’ve always been interested in typography, so the old design was already relatively well thought-out and the changes here are relatively minor. I did do a major update to the way the code is organized, but you can’t see that here.

Typography on the web is still in its infancy so there wasn’t much that I could do, but what was possible, was done. The headers and body fonts are different, and are carefully thought out for maximum readability. As mentioned above, you can use your browser settings to increase the font size and the site should work perfectly. One major item of note is that the line-spacing (“leading”) is set wider than the default, which makes the text much easier to follow. Tied to that, the primary column has a maximum width so the page doesn’t ever get uncomfortably wide.

1 Note that this site was designed primarily for Firefox, as it is the only modern browser that is reasonably standards-compliant. There are a few customizations that help work around Internet Explorer bugs, but if you’re not using Firefox, the site won’t look quite the way it is intended to look. (IE7 gets it almost right.)

  1. matt says:

    The site looks beautiful! I’ve got to borrow that book. The only thing I noticed that might not be doing what you wanted was the hover effect on the top menu loses transparency in both Firefox and IE. Nice job.

  2. Nathan Arthur says:

    Thanks :) The loss of transparency is intentional (and in fact, took a lot of work!). It was intended to make it easier to read the text, while trying to click on it. I hadn’t thought that it might be mistaken for a bug, though. Do you think that’s a common problem?

    You’re welcome to the book any time. It was (obviously!) a huge help to me.

  3. matt says:

    Ah… and from a usability standpoint, you are very much correct – transparency and text don’t mix well (are you listening OSX design team!?). Don’t make a major design change just on my one opinion, but I do think the effect looks more like a bug than a feature. With how big your text is, it’s probably not a big detriment to usability to leave the background as it is. OR… and this might take a bit more work… you could add a fade effect for the transparency to transition smoothly to a solid color. THAT would make the effect look like it was intentional and have the added benefit that it would be incredibly elegant too. I think Rails has some Ajax-y thing that that would demo the effect I’m referring to – I just can’t seem to find it in 10 seconds with Google.

  4. Nathan Arthur says:

    Sounds fair. I’ve updated the effect to only affect the specific link under the cursor. Does that make it look less like a bug?

  5. matt says:

    Yep. Looks great!

    Are these images you’re using public domain? Were did you find them?

  6. Nathan Arthur says:

    They aren’t public domain – I actually paid (about $8, I think) for them, from iStockPhoto

Add a comment

(will not be displayed)

(not required)