So what’s up with that simplification? It basically means that this site is now mainly a blog, as opposed to a bunch of pages with a blog somewhere in between. The main menu reflects this: it went from five items — three of which had submenus — to a flat menu with only three items (actually four, but one is visually pulled out of the menu and only appears when scrolling down). As for the blog itself: there are no more categories, only tags. I believe one kind of taxonomy is sufficient for a simple blog. Category archives still exist, but are indistinguishable from tag archives.

The pages that disappeared from the menu are, in fact, still there, but I just won’t link to them anymore. They are now just sitting there along with some other non-public pages. I’m not sure whether or not I’ll keep them online forever, but for now, nobody should see “404 Not Found” errors. If you do, please let me know!

Another thing I wanted to mention is that this layout is much lighter than any of the previous ones. No more than five seven images are used for the theme. I also got rid of jQuery. I like it, but I could easily accomplish all behavior — there really isn’t much of it anyway — without it. The most heavy parts are now the font used for the titles (still Museo) and the Shadowbox script (the thing that pops up images and stuff).

I made heavy use of CSS3 in this design. Rounded corners, transitions (currently supported in Safari, Chrome and Opera), opacity, web fonts, etc. I also made the switch from XHTML 1.0 to HTML 5. Makes the markup a bit more semantic, and also has lots of new form input types. There’s not much support for those yet, but iPhone and iPad present optimized keyboards for e-mail and URL input fields. And since I own both an iPhone and an iPad, I also added some optimizations for those (and other) mobile devices.

As usual, the best experience will be had with recent versions of Safari, Chrome, Opera or Firefox (in that order). IE 7 and IE 8 work, but everything isn’t as nice. IE 6 users are served with a basic stylesheet so everything is at least legible. I can’t say anything about IE 9 yet, but it should rival the other modern browsers.

To conclude with, here’s a screenshot of the previous design for comparison.

Fourth design

To compare with even older designs, those can be found here.

Update, Saturday, September 18, 2010

Got rid of Shadowbox as well. Made a simple implementation myself. It currently only works with images, and not at all in Internet Explorer (problems with positioning, have to look into that). But it is very small: barely more than a hundred lines of (non-minified) code.

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 is a screenshot of the previous design to compare with. For screenshots of all past designs, look here.

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.

Second design

Screenshots of all past designs can be found here.

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.