Version 3.0 of mono was inspired by the cover of Sarah Vaughan's self-titled album Sarah Vaughan, released in 1954 on EmArcy, and also known as Sarah Vaughan with Clifford Brown. It is a fantastic jazz recording, yet a fairly recent acquaintance.

I have always liked black and white photographs with a slight blue or bluegreen tint, which also seems to be a rather common theme in jazz (and the odd soul record, such as Aretha Franklin's Spirit in the Dark).

And I really love the color scheme of Sarah Vaughan.

Verve did a particularly good job of matching the original cover art for their reissue (all newer reissue covers on Verve place the original cover on a more or less matching background - sometimes it works, sometimes it doesn't).

However, the colors in the image shown here are different from those of the actual cover, which looks a lot better. The logo and main title, in particular, are considerably less aqua than they appear here. Also, for some reason there is a different cover on the Verve website.

Version History

The 3.0 redesign is best summarized as evolutionary and unstructured, and followed upon an intense period of minor tweaking that had taken the design from version 2.0 to 2.5 in a mere two weeks, as seen in the screenshots below.

Changes from version 2.0 to 2.5 also included markup and stylesheet tweaks that aren't visible on the second screenshot.

• Version 2.0 - April 29, 2004

  

• Version 2.5 - May 14, 2004

  

• Version 3.0 - May 30, 2004

  

Design Goals

The design goals for version 3.0 focused on:

• Standards - ensure that the new design complies with web standards.
• Evolution - analyze existing design in terms of keep/change/add.
• Efficiency - minimize changes of markup and style.
• Aesthetics - aim for a softer, more colorful minimalism.
• Presentation - strengthen the presentation of posts, if possible.
• Typography - consolidate font and text properties.
• Whitespace - balance the use of whitespace.

The next sections willl look at the design goals in more detail.

Standards

Previous versions of mono had already been designed, developed, and published with web standards in mind, specifically XHTML 1.1, CSS 2, and the latest build of WordPress (currently version 1.2, which just happens to be named after Charles Mingus).

Special care had been taken to make sure that the markup was semantic and reasonably accessible, and the color scheme had been tested as being safe for color blind readers, using the Colorblind Web Page Filter.

The absence of image replacement techniques and a sensible choice of foreground/background colors had ensured that there was no loss of textual information with CSS on/images off.

The design also worked well across major browsers, handled window and text resizing adequately, and was continously tested in the latest versions of Firefox and Opera on Windows. A separate cascade was fed to Internet Explorer through a conditional statement in the

section of the document, ensuring acceptable rendering in IE6/Win (IE5.x was not catered for, on any platform).

With this in mind, the first design goal was easy:

If it’s fixed, don't break it.

Evolution

The redesign started with an analysis of the existing design, to decide what worked and what didn't. Such an analysis serves to make the redesign goals simple, at least in theory: keep what works, change what doesn't, and add what's missing.

I wanted to keep the two-column layout with the sidebar on the right, as it is a proven, working concept for weblogs. Granted, there are other layouts that work, but I saw no need to change something just because it was possible.

My changes focused on the visual aspects of the site, in essence colors and typography.

I didn't see the need to add anything to the front page at this time. I have a to-do list, but it mainly concerns non-weblog content, such as a colophon, and a contact form that isn't part of my personal website.

Efficiency

Being short on time, I wanted to reuse as much of the existing stylesheet as possible, and preferably not touch the markup at all.

I decided to set a specific deadline for going live with the design, so as not to risk a prolonged and time-consuming tweaking process.

Although this wasn't a commercial project, I found that working against a deadline was both challenging and helpful. It forced me to make swift decisions on issues that would otherwise have remained unresolved, simply because I would have felt that there was "no harm" in waiting.

There are also synergetic effects to be had, as one decision usually leads to another.

Aesthetics

I wanted to preserve a minimalistic look, but use more colors and different graphics than before.

More colors in this case meant both a wider range of colors, and a (somewhat) larger number of colors.

For lack of a better term, I refer to this as "colorful minimalism".

Other than this, I only had a vague notion of wanting something that "looked better". Although not too helpful, this was in fact the most important criteria.

Presentation

I was reasonably happy with how the main content (posts) was presented, and so decided to leave most presentational aspects, including the layout, as they were.

As a result, all major structural elements of the page (date, title, content, search box, navigation) remain in the same place as before.

However, to fulfill my "more colors" objective, I had to apply a background color to the sidebar, which had previously been the same white background color as the main content.

I was curious as to how this would affect the presentation.

There seems to be a fine line between unobtrusive sidebars that help draw attention to the main content and visually disturbing ones that scream "look at me, I'm important!", which, of course, they are not.

Although there are as many variables when working with sidebars as with main content, the most important ones seem to be color, particularly background color, font size, and to a lesser extent width (for an example of a weblog with a wide sidebar that works really well, see Richard Rutter's Clagnut).

It is too early to tell how the current design parameters work in this regard. I must have tried forty or fifty different color combinations, and I am far from happy. This is where the deadline came in handy, or I would still be tweaking the night away.

Typography

I probably spent too much time on typography. I kept going back and forth between serif and sans-serif fonts, not being able to decide which font worked best, at what size, and where.

There was also a complex interplay between the main content and the sidebar, and between numbers and letters.

Georgia remains my favorite font for Arabic numerals, and I decided to keep it for the post date and comment numbers, while changing all other heading fonts to Arial.

Typography geeks may question this decision. So do I.

The header font proved to be an easier task. It is set in 36pt Futura, a font suggested by Joel Biroco back in February. Thanks Joel.

Whitespace

I tried to pay particular attention to the use of whitespace — the open space between design elements — which I think is one of the most misused design techniques on the web.

Good use of whitespace acts as a visual guide for the eye, and helps separate, structure, and present content; too much whitespace abandons the content in a sea of emptiness and creates an overall sense of unbalance, particularly for regular visitors, while too little distracts, confuses and causes uneasiness.

Whitespace can also end up being too white, when in fact it doesn't have to be white at all. Finding that delicate balance between whitespace and the structural elements of a page is a challenge.

In the end, I don't think the redesign had any particular effect, neither positive nor negative, on whitespace.

The one exception is the date of the latest post, which is now surrounded by considerably more whitespace than before. I like it, and I think it puts a clearer focus on an important piece of information.

Diversions

As the original design idea evolved, I tried to take the Sarah Vaughan color palette, with its hints of steel, concrete, and artifically contained water, a step further.

My goal was to have the overall design evoke a late 1950s, early 1960s feeling, and, to a certain extent, I think it does. I am not too sure about this white background though.

For a while, I even toyed with the idea of going for a "genuine" 1960s style design, as if this was a weblog that had actually been designed and published in that time period. Just for fun.

I don’t think I have seen it done, at least not on a weblog.

In the end, there wasn't enough time (or indeed artistic and PhotoShop skills) to pursue the concept any further.

I still find it an interesting idea though.

Limitations

Image Replacement

Previous mono designs used plain text to render the main heading. With this version, I decided to replace the header text with a graphic, basically for the reasons Cameron Adams outlined in Balanced branding.

I first opted for the Phark Revised image replacement technique, which relies on text-indent to move text away from the viewport. This method is accessible for screen readers and looks good with unstyled content as only the heading is visible. It also uses very simple CSS, requires no additional markup, and works for linked images.

The disadvantage is that it does not work with CSS on and images off, a common scenario when on a dial-up, and one that directly affects me, as I do most of my non-work related browsing with a 56k modem.

Even so, I felt that the potential loss of information was acceptable because of the redundancy provided by the page title.

I would not recommend using this technique to replace lower level headings, or other important textual information.

The alternative to Phark is the Gilder/Levin method, which works fine with CSS on and images off, but adds an empty element.

Since I don’t see the empty element as a problem for a single instance of replacement, I ended up implementing a somewhat modified, somewhat simplified version of the Gilder/Levin method, because of the slight advantage of having a readable header with CSS on and images off.

These are the modifications I did:

• use instead of
• move empty element to make it work for a linked image

Using instead of is just a matter of taste, and does not affect how the method works. I chose simply because it is shorter. Both elements are semantically meaningless, which is what matters.

The Gilder/Levin method will not work as is for linked images, hence the second modification.

Here is the markup and style in use now (some attributes and styles have been removed for clarity):

mono

h1 a {
        position:relative; /* absolute works too */
        width:120px;    /* width of image */
        height:60px;    /* height of image */
        cursor:pointer; /* for ie */
}
h1 a i {
        position:absolute;
        top:0;  /* not always needed */
        height:100%;
        width:100%;
        background:url(mono.png) no-repeat;
}

As shown above, the empty element needs to be put inside the anchor for the technique to work with linked images. Also note that, for some reason, Internet Explorer needs an explicit cursor declaration.

Tested in Firefox 0.8, Opera 7.5, and Internet Explorer 6, on Windows.

Fixed Width

The second limitation of this design was the introduction of a fixed 750 pixel width. Previous versions used a variable width, set as 75% of the viewport, with minimum and maximum widths of 600 and 850 pixels respectively.

I switched to a fixed width at the start, in anticipation of a design that would rely more closely on a precise horizontal alignment of elements.

As it turned out, I think I could have made the variable width work, but it just didn't seem worth the effort to recalculate and revert the styles back again.

And I guess there is always the comfort of being in good company.

Summary

The redesign stretched out over two days, and took about five hours effectively, despite my intentions to do a quick, evolutionary redesign. On a sidenote, those five hours would probably have been too long had it been a commercial job.

It would have been interesting, and probably more time-consuming, to start from scratch, Bowman-style.

This was actually my original intention, but sometimes inspiration gets in the way. Maybe next time.

The design is still a bit rough around the edges: the color scheme needs further tweaking, as do a few other minor details (antialiasing, border widths, font sizes, hover states, the usual stuff…)

And I still haven't given up on that 1960s style weblog.