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

In the mean time, I totally had it with green. So I swapped it out for something dark reddish this time. Not really sure if I like it yet, so it might change to blue or some other exotic color in the near future.

The displaying of comments has improved, most notably the comment time, as opposed to only the date. I didn’t go as far as to implement threaded comments in my theme, because as they are now, with a fixed width, I don’t really see a viable way to clearly distinguish between levels. That will be something for an upcoming theme.

Notices and warnings now have a uniform appearance, with nicely rounded corners in browsers that support the CSS3 border-radius property. Same goes for form buttons, which had the default browser appearance until recently.

Other than that, there have been numerous small, less notable, improvements all over the place. As for the upcoming theme I mentioned above: don’t expect something anytime soon. It is currently no more than some vague ideas and sketches.

First of all, there was nothing to open full-size images in-page for thumbnails, they just behaved like normal links. I formerly used Lightbox for that, but was never really happy with it. Fiddled around somewhat with other implementations, and ended up using Shadowbox on this web site from now on.

Then, I recreated the Files section — which now makes use of Shadowbox for images and movies — and the font-size adjustment — which can now be found to the right of the main menu.

Also, since the fixes for Internet Explorer require JavaScript to be enabled anyway, I decided JavaScript could just as well handle the loading of said fixes. So I removed the conditional comment (nasty thing ) from the HTML.

And lastly, I didn’t particularly like the gray background, but hadn’t decided yet what to do with it. As you can see, I have now.

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

In the upper right corner, there are two A‘s in a small box. Clicking on the larger one makes the text on this site larger. Clicking on the smaller one changes it back to normal. A decent browser with JavaScript support will even apply the change on the fly, without a page reload.

Of course, your preference will be remembered throughout this site, even across multiple visits. Your browser must accept cookies though.

Update (August 16th, 2008)

In the new theme, there’s a link to the right of the main menu which will increase or decrease the font size.

Update (March 13, 2010)

In the latest design, the font size option is located in the preferences box clinging to the right of your browser window.

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.

First of all, the page navigation on the left was somewhat buggy. When one was somewhere inside the blog, the “Blog” item in the menu would not be highlighted. That’s been fixed.

Secondly, the page titles were inconsistent. Static pages were OK, but in the blog, somtimes there was a page title (when inside archives or posts), but for example on the main blog page, it simply said “helvensteijn.com”, without any page title. Not very nice. Now, whenever one is somewhere inside the blog, the title will reflect that correctly. On the main blog page, it now sais “helvensteijn.com » Blog” and deeper inside the blog, it will tell you where you are.

The third issue was that one could not post any comment while logged in. Since I’m the only user and I have user registration disabled, this actually only concerned me. But still it was annoying (there’s some top-secret password-protected pages on this site where I use comments to keep track of certain things concerning this site, like bugs to squash ). That was probably due to some stupid mistake that I made earlier when prepping this site for initial launch. It took me a while to trace it back to it’s origin, but now I’m finally able to comment on myself while logged in.

Then, I tweaked the home page to always be /home/ instead of / for more clarity. Whenever someone tries to access / on this site, he or she is silently redirected to /home/ to reflect that in their browser.

And finally, to the outside world probably the most visible change, the home page now lists the three most recent posts from my blog.

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.