What Changed?

The new design features a fixed header that stays at the top wherever you go, allowing you to quickly search through the site, access the archives, send me an e-mail, subscribe to the blog feed, or connect with me on one of my favorite social media sites. My intent was to move from a huge header that simply looked good to one that took up little real estate but was useful. To that extent I think the new slim, fixed header is a big success. But let me know how you feel, I’m always open to feedback!

Some of you may be disappointed that I got rid of the old header with the great Apple keyboard shot, but it was time for a change. Sorry Dave I’m afraid I can’t do that.

Other changes were dropping the sidebar widgets to the bottom of the page, allowing me to give the main content a much wider space. Doing so lets me embed full size YouTube videos and wide images into posts. As you can tell, I really went for usability and functionality here rather than looks. The look itself is really simple and clean and draws the focus back onto the content.

On a sidenote, you’d think the new wider look would break on an 800 x 600 resolution, but that’s not quite the case. By dropping the sidebar below the content the design scales gracefully to a low resolution.

I’m still working on re-adding some of the widgets I had before (most notably the Scribnia and Friendfeed widgets) but otherwise it’s all done!

Before & After

Here’s a snap of the before look (note, it’s not an exact replica as I deleted the old look, this one is from an older local copy I had but it’s basically the same):

Old header, body, and sidebar

Now let’s take a look at how this section looks in the new design:

Oooh...more room for content!

Another section I wanted to tweak up was the Thesis teasers section. I felt they were a bit small so I widened them out and made each teaser fall on its own line. Personally, it makes it easier to scan through the teasers and archives and allows for a bigger thumbnail image.

Here’s how the teasers used to look:

Effective, but can they be improved?

Looks OK, but in the move to the wider main content column, they looked a bit scrunched up and out of place. In the new design each teaser falls on its own line:

What a tease...

Another section I felt needed a good deal of revamping was the comments and footer. Here’s a look at the old comments and footer section:

Comments and footers, pretty bland.

Quite bland, eh? Let’s take a look at the new comments and footers, which for those of you using new versions of Safari or Firefox feature lots of easy to look at rounded corners.

Roundy boxes.

And here’s the comments:

New Comments with more rounded corners

That’s about the bulk of the changes. There’s a few more tweaks and touchups here and there but the majority of the look’s covered above. If you find anything out of place or have any suggestions or questions on how I did something, feel free to ask. Hope you all enjoy the new design!

Thanks to eelke dekker for the HTML vs. CSS lego figures.