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.

Now that should have been that, but when the server was up and running again, I found that MySQL was pretty much dead. And I couldn’t fix it right away, had to go to work. So when I got home tonight, I jumped right on it.

Turned out that MySQL had some corrupt files, so I fixed them, but it was still behaving pretty buggy. I couldn’t even get it to check or repair my tables, so I did that with myisamchk. Still no luck.

Because I was more concerned with getting my site back online than figuring out what the heck was wrong with MySQL, I decided to take the quick ‘n’ dirty approach: I just reinstalled the thing. A little drastic (and Windows’ish, as a friend pointed out ), I know, but at least it worked and was indeed quick.

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

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.

There is, however, one thing about valid code, especially CSS, that is rather unfortunate. Insisting on valid code makes using some modern techniques impossible, because some of those techniques haven’t made it to official specs yet, so they will not validate. A good example of this is the border-radius property. It is bound to be included in CSS3, but since CSS3 is not even draft-status yet, that doesn’t help today’s projects.

Many modern browsers (IE and Opera being the notable exceptions) are, in fact, already aware of the technique, and it is available for use in those browsers, be it that in all cases I’m aware of, support still experimental. Usually the browser doesn’t support the border-radius property per se, but has a similar property in a “namespace” specific to the rendering engine, like -webkit-border-radius or -moz-border-radius. There are also some syntax differences between different browsers, like -webkit-border-top-left-radius vs -moz-border-radius-topleft. The same goes for more of those techniques that haven’t made it to spec yet. It’s a minor downside of using them, but no more than that.

So, using these techniques is interesting, because they suddenly make a lot of things that used to be fairly problematic or complex to implement, as simple and straightforward as setting a background image. If you’ve ever attempted to create a box with rounded corners that is fluid both horizontally and vertically in pure valid CSS, and then examined the border-radius property, you know exactly what I mean. They also tend to degrade gracefully (being completely ignored) on browsers that don’t support them. But on the other hand, using them will inevitably mean invalid CSS. The CSS spec doesn’t know about engine-specific properties and values (nor should it), so neither does a validator.

Now there are of course all kinds of nasty hacks so one can use these techniques, and still have the site as a whole validate, simply by hiding the non-standard stuff from validators. For instance, on this website, a small CSS file that applies border radius to some elements, among other things, is loaded through JavaScript, so a CSS validator will never see it. But of course, in the end, you’re only fooling yourself when resorting to such tricks.

That’s why I have been thinking about this for the new design for this site that I’m working on. I’ve decided that perfectly valid code is no longer a requirement for my future designs, nor will I claim to use valid code in them (no more “valid XHTML” and “valid CSS” links in the footer). The reason is simple, validation is a means, not a purpose in and of itself. In my reconsidered opinion, there’s nothing wrong with invalid code, as long as you know why it’s invalid, that there’s no practical way to achieve the same while maintaining 100% validity, and your code remains semantically correct.

Conclusion: In my upcoming designs, I’ll have no hesitation to use such engine-specific properties, or simply properties that haven’t made it to official spec yet (i.e. text-shadow). I will still run my stuff through a validator, but I will no longer care about errors or warnings merely caused by using these techniques. I know that they’re invalid, I just chose to use them anyway, secured with the knowledge that any browser will simply ignore whatever it doesn’t understand.

P.S. This also means that when using a browser that doesn’t support a certain technique used for a minor aspect of the whole, you’ll be plain out of luck. As long as everything remains functional and only some visual niceties are lost, I won’t care. That’s something I decided a while ago, and is already visible in the current design of this web site. The rounded corners on the yellow notices, for instance, are accomplished using CSS, so IE and Opera will simply display them as plain rectangles. Firefox, Safari, Chrome or anything else Gecko or WebKit-based, though, will display a box with nicely rounded corners with a radius of 5 pixels.

I’m curious as to the opinion of other web developers on this topic. If you are one, please comment.

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.

If you see this post, that means that your DNS is up to date and you got this page from the new server.

Right now, this site sits quite comfortably on a shared hosting account. However, shared hosting has its limits, and with a virtual machine (a so-called Virtual Private Server), I have root access so I can do with it whatever I want. And it comes with its own IP address, so I can finally set up secure (HTTPS) access to my web site with the certificate I already own.

I’ll be spending the next few weeks setting everything up to replace my existing hosting account. Apache, PHP and MySQL are all running but still need to be configured properly. Then, I will also need a mail and DNS server, neither of which I have experience with. So I’ll have to look into that as well.

My current hosting account won’t expire before April 2009, so I’m confident that I have everything set up by then. Somewhere between now and then, this web site will move to the new server.

The specs of the VM are more than enough to even run Windows XP smoothly. For a server however, that doesn’t seem like a very good idea to me. So just like my home server, it runs Debian Etch.

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.

Second design

Screenshots of all past designs can be found here.