mono

Anne van Kesteren recently redesigned his aptly titled blog Weblog About Markup & Style.

I recently started reading Anne’s blog because I like the clear focus on XHTML and CSS, and the competence and thorughness with which he writes about these subjects.

However, the first thing I noticed about the old version was how good it looked. Anne designs according to web standards, and recommends that readers view his site with Mozilla. Considering the focus area of the blog, this is one restriction that I am sympathetic with. Incidentally, my default browser is Mozilla FireBird (the version used to view Anne’s blog has been 0.6.1 on W2k).

The layout of the old design was similar to the one used for this blog, which I like to refer to as the de facto blog layout. The background was a repeating pattern of mildly colored leaves on light blue, while the content featured large, easy-to-read black serif fonts on white. Contrast, readability and page structure were excellent.

The new design was created by Anne’s associate Arthur Steiner, but to some extent according to his own guidelines.

Anne describes how he deliberately opted for a simple, minimalistic design. There seems to be just as radical a change "under the hood", including a new blog engine, but this post will just deal with the visual aspects.

With its blend of orange, black, grey and white, the new design marks a dramatic visual change from the old look. It does, however, retain the same visual structure as the previous version, with content on the left and a navigation sidebar on the right. Together, the content and sidebar extend over the entire width of the window/viewport. The main content area has a black sans-serif font on white background, and the post titles clearly stand out from the rest of the content with their grey background. Unlike the previous version, the navigation now has expandable top level items.

In the new version, a number of key features have been left unchanged. This is good. I am glad that Anne decided to keep the navigation on the right side. I prefer this to lefthand side navigation because the shorter distance from the scrollbar means less mouse travel/hand movement. Anne’s blog also has one of the most ingenious treatments of preformatted code that I have seen: as soon as the width exceeds that of the content column, a scrollbar appears. Simple and effective. In fact I intend to implement (steal) this idea for this blog.

Among the new features, I really like the expandable menus.

Despite this, I have to say that I preferred the old look. It was cleaner, crisper, lighter, and overall more aesthetically pleasing. Anne admits that, "the [new] design could have been a lot more 'designed'", and I agree. The most serious issue I have is with the very dark grey sidebar; it is too wide and dominant, and contributes to an overall dull and dark feeling. Hyperlinks are underlined with a thin orange dotted line, and do not stand out enough from the rest of the text. The pink :hover color on the hyperlinks does not match the orange color used for the header. The body font that will display on most Windows machines is Lucida Sans Unicode, which does not look good at its default 90%/150% font size on my screen (1024×768 12.1" TFT on W2k Pro). In fact, I would argue that Lucida Sans Unicode only starts looking good at much larger sizes, which are usually not acceptable for normal paragraphs. Mac users get Lucida Grande instead, which is better, but not available on Windows by default. Verdana, Georgia, Arial or even Trebuchet MS would have been better choices for Bill’s platform.

To conclude, I find that the visual aspects of the new design have a clear potential for improvement, and I have to say that I preferred the old design.

But I will keep reading.