As the version number suggests, this is the fourth design of this web site since I started using WordPress almost three years ago. Personally, I think it looks somewhat more sophisticated than the previous ones. If you look at the screenshots below, you’ll see my point.

I had the intention to redesign this site for a while already, when I stumbled upon an existing WordPress theme called Mystique. It has some nice touches, especially the checkerboard-over-rainbow thing. Obviously, my design is inspired by Mystique, but not based on it. I built it from the ground¹ up, and gave my own swing on pretty much everything.

As I blogged about earlier, I no longer care about invalid CSS, so I didn’t hesitate to apply what I call progressive enhancements all over the place. Rounded corners, translucency, box and text shadows, that’s all CSS. That’s why this web site is best viewed in a modern browser, preferably one that’s not made by Microsoft. While I do support IE7 (which has some cosmetic issues I haven’t found a solution for yet) and IE8, the latest version of a more standards-compliant browser will give you the best experience. Folks using IE6 or even older are plain out of luck, they get served a very basic stylesheet, similar to what you would get if you were to print a page.

I also added some little extra’s for folks with JavaScript enabled. Not only the font size can be adjusted, you can pick a few different color schemes as well. It is also possible to turn off (and back on) animations². Some people like them, others don’t, so I left the choice to you. These options can be found in the top right corner, no matter how far you’re scrolled down. Just hover your mouse over the little “preferences” box to bring them up. In addition, sidebar widgets are collapsible, which could be useful especially for the archives widget which is already quite long. All these preferences are saved in cookies.

Which brings me to yet another extra: the Twitter thing in the header. I have your browser fetching my latest tweet from Twitter on each page load. I’ll probably have to look into caching that in a cookie for an hour or so, but I had to so something with all that empty space.

I don’t think this design is complete or finished. My designs never are, especially when just launched. Numerous tweaks and enhancements will probably be added in the near future. Consider this design beta.

Last but not least, here are some screenshots of the previous designs to compare with:

First design

Second design

Third design

Update (March 18th, 2010)

Made a rather major tweak. Found a nice font a few days ago, and decided to use it for the titles all over this site. It’s called Museo, made by Jos Buivenga.

1. The ground being a “blank” theme made by Chris Coyier
2. Except for the lightbox animations; once initialized, they cannot be dynamically toggled

So, besides the looks, what’s new? Well, if everything went as I hoped, nothing really. I already made the necessary changes two and a half weeks ago.

I have tested the design in Firefox 3, Opera 9.5, Safari 3 and Internet Explorer 7 and everything works there, except for some minor bugs with IE7 (complaining of JavaScript errors, but everything seems to work). Firefox 2, Opera 9.x and Safari 2 will probably work fine for the most part, but Internet Explorer 6 is explicitly not supported. If you’re still using that browser, you really, really ought to upgrade to at least IE7! Even better would be switching to a decent browser altogether — like one of those mentioned above.

One more thing to mention is the width of the site, and thus the minimum required width of the browser window to prevent horizontal scroll bars. Until now, I always kept my designs confined to within 800 pixels, or I used a fluid design. But a fluid design is tougher to get right, especially in combination with rounded corners.

The statistics for this site tell me that practically nobody uses such low resolutions anymore. That might change a bit with these mini notebooks that are becoming increasingly popular lately, but still I decided to go a step further and based the layout on a browser window of at least 1024 pixels wide. That requirement is met by over 95% of the visitors to this site.

Well, I’d say try it out, and if you encounter any problems, you can leave a reply below, or contact me directly.

First design

Second design

Back then, I said that I probably wouldn’t be designing anymore themes myself, mostly because of MSIE. But you know how these things go, it started tinkling again.

So I came up with the idea to base a layout on the “graphite” look of Mac OS X Tiger. The result is a completely rewritten theme. Some basic elements have made it into this new theme virtually unchanged, so those will look familiar if you’ve visited this site before.

The most notable changes are the header — which lost its bulky image — and the menu — which is now horizontal instead of vertical, leaving some more horizontal space for real content.

Below a is a screenshot of the old layout to compare:

Previous design

Personally, I think this new layout looks really clean, which is exactly how I like layouts. If you have any comments or suggestions, I’d be happy to hear them.

Reason for using WordPress is that I pretty much lost interest in building my own CMS, at least for the time being. My interests have moved to other things.

Reason for using an existing theme to base the layout on is mainly MSIE. I got sick and tired of designing layouts that would end up working half or not at all in that browser. And until MSIE 7 (wich has at least some standards compliance) gets mainstream and MSIE 6 is no longer popular, I don’t think I’ll change my mind about that.

Happy browsing.