A Fresh Coat of Paint

The Root of My Discontent

“the net effect was that the principle content became lost within its template”

The Aston template was too bland as far as I was concerned. It was both too plain and, although it sounds contradictory, too cluttered.

While the primary content area worked reasonably well, a long and complicated sidebar ran alongside it without any clear, visual separation. Both the content area and the sidebar were presented on white backgrounds.

Furthermore, the header area featured a set of randomly rotating images that were mostly situated on pastel-coloured backgrounds, which themselves faded to white.

The net effect was that the principle content became lost within its template. In those cases where the content was mostly textual, the pages looked busy and, somehow, unfinished.

The Changes

On to the actual changes then. Each major change is listed below along with the reasoning behind the change (where appropriate).

Header Image: The random images of Aston have been replaced with a single, bolder image. The new graphic is larger than its predecessors. It features lines of pseudo computer code that compliments the "mainframe" part of the website's name perfectly. It is because of this image that the new template is named "Kernel". The image is designed to tile horizontally, allowing me to continue to employ the liquid layout that has been a feature of the website from the outset.

Logo: I have always used plain text for the website logo. However, I used a graphical one for Kernel as the white, textual logo looked terrible on the dark background due to the complete lack of anti-aliasing support in XHTML.

Breadcrumb Trail: I moved this from its previous location (beneath the Urban Mainframe logo) to a dedicated container at the top of the page.

To be honest, I didn't know where to put this until very late in the redesign. In fact I almost removed it altogether at one point - as it frustrated all my attempts to find it a suitable home. In the end I decided to see if Nielsen had anything to say on the matter. Of course he did.

"Many websites are starting to supply a breadcrumb trail across the top of the page to situate the current page relative to its parent nodes and to allow users to jump up several levels in a single click." (see: When Bad Design Elements Become the Standard)

Indeed, the breadcrumb trail on Nielsen's website is also located at the very top of the page.

Sidebar: I believe that Aston's sidebar was its biggest single failing. I have completely reworked it for the Kernel template.

First of all I added a background colour to the sidebar, along with a solid border. The effect was immediately apparent - the principle content was now clearly distinguishable on the page. Suddenly the entire website seemed cleaner.

Unfortunately though, there was a slight problem - when the height of the sidebar was less than the height of the principle content area, the background colour simple stopped at the end of the sidebar content! Thankfully, I am not the first person to suffer in this way, so I'd like to thank Dan Cederholm for documenting a simple solution to this apparently common problem - Cederholm's Faux Columns technique solved the column cut-off issue.

With the background colour fixed, I then turned my attention to the content of the sidebar. Most of the time this was okay. However, within the weblog (one of the most visited sections of the website) the sidebar was full of extraneous content.

I removed the "Currently Reading", "Currently Hearing" and "Currently Wanting" panels straight away (these are still available on the "Who Am I?" page in the Colophon for anyone who's interested).

Then I removed the search input control from the sidebar. I relocated this to the top of the page (beneath the breadcrumb trail) and added a much needed submit button.

The registered user options were next to go. These were previously plain text links, which were almost invisible in Aston (due to their location). I moved these controls onto the header image, kept them inline with the sidebar and used CSS to style them as tabs. They're much more visible than they were previously - they look like part of the design now whereas they looked like an afterthought in Aston!

Plain English: The vast majority of my visitors arrive at my website via a search engine (usually Google). I think it's reasonable to assume then that most of these visitors are people who have never visited the Urban Mainframe before. They arrive not knowing anything about the Urban Mainframe and, with Aston, they got a sidebar panel entitled "This Page" that read something like this:

Section: Weblog

Modifed: ~5 days, 2 hours ago.
Feedback: 10 comments.

A print version is also available.
Looking at this now, I am horrified by it. Sure, it tells me everything I need to know about the page, you might be comfortable with it too. I think it's probably safe to say that this wouldn't be much use to my mother. Whilst being completely accurate and factual, it actually tells the average person almost nothing.

Further down the sidebar, Aston had another panel titled "Blogroll". Huh? My mother would probably think "WTF? What on earth is a 'blogroll'?" The guys over at the Plain English Campaign would stand me before the wall and pull the trigger!

I revised the "This Page" panel (renaming it "About this Page") to make it a little more informative:

This is the personal website of Jonathan M. Hollin (aka DarkBlue).

This page is located in the "Weblog" section of the website and was last updated around 5 days, 2 hours ago.

10 comments have been posted in response to this document.

A print version is also available.

Some of the content of this website is available for syndication. 

I renamed "Blogroll" to "Roll of Honour" and added the following text before the links themselves:

Some of my favourite websites are listed below.

The list is sorted by the date of last update (with the most recently updated first) and the list itself is updated hourly (the last update took place around 15 minutes ago).

A more extensive list is also available.

I removed the cryptic "add Urban Mainframe to your blo.gs list" from the sidebar, because it is completely meaningless to most visitors. I added the link to the "Syndication" page, under the assumption that readers of that page would be more likely to know what "blo.gs" is.

My mother would understand now!

For the final touch, I added the familiar, orange "XML" button to the "About this Page" panel (where feeds are available).

blog.urbanmainframe.com

My next stop was the default weblog page. I wanted to simplify this. Aston displayed summaries for the ten most recent weblog entries on the default page - this often resulted in a pages of ridiculous length. I wanted to try a new approach with Kernel.

I modified the template to produce a page with a full summary for the most recent item, followed by the titles of the ten newest entries prior to that one. Thus the page listed eleven entries instead of ten, yet had only a fraction of the page length of the former page.

In that incarnation the page looked unbalanced because the sidebar content was longer than the principle content. I then moved the linkblog from the sidebar and inserted it between the full summary of the most recent entry and the ten title summaries. I changed its CSS and, voilà, a whole new default page!

At this point I also added the long-missing "via" credits to the linkblog. These were always available via the link archives, but I didn't display them in the sidebar linkblog (in Aston) as they just added to the clutter.

Conditional Templating

During the redesign process, I became extremely frustrated at having to apply my markup changes to the multiple templates required for the website. It didn't take long to realise that what I needed was to be able to insert conditional elements in my templates that, when parsed by my CMS would be dynamically rendered, or not, in the final output, depending on whether or not the specified condition was met.

To illustrate what I mean, compare the sidebars of these two pages: example 1, example 2. Note that there are several differences between the two.

With Aston, these pages required separate templates in order to handle those differences. In all, eleven templates were required for the Aston version of the website. If I wanted to change something that remained constant on all the pages, then I had to make the change eleven times (in reality this isn't strictly true, my text editor is perfectly capable of performing find-and-replace operations across multiple pages in one pass), and upload eleven revised templates onto my server. There was obviously scope for error in that scenario.

So I took a break from hacking XHTML and CSS - and wrote a conditional command parser for my templating engine (that's a whole new weblog entry). At a stroke I was able to kill off ten templates and run the entire website with just one. This new CMS feature really assists with my template management.

Final Design Tweaks

To finish off, I made some final changes to the CSS:

1. Unified the link colouring throughout the site
2. Changed the typeface (and size) of page titles

I am happy at last. Kernel looks good, it's a classic, two-column design with a liquid layout. It is based on a table-free layout, it validates as "XHTML 1.0 Transitional" and it's mostly clean markup. The page renders almost exactly the same in Mozilla Superkangaroo as it does in Internet Explorer 6 - I have even managed to remove many of the IE hacks that I was previously using. Amazingly, the redesign took less than 48-hours to complete, mainly due to the fact that I started with a website that used valid, semantic markup and CSS for presentation.

IE Quirks

As I wrote above, the Kernel template is almost identical when rendered in IE to the reference rendering in Firefox. However, there are two annoying little quirks that I have been unable to fix:

Main Navigation: In order to explain this quirk, I need to explain how the main navigation works.

Each link has three states: normal, mouseover and active. In the normal state, the link has no decoration. In the mouseover state the link is decorated with a blue underline. In the active state, the link is decorated with a black underline.

The mouseover state can only be displayed when the cursor passes over the link and the link doesn't point to the currently displayed page.

The active state is displayed when the browser is currently displaying either the page that the link points to or (and this is important) any page hierarchically beneath that link.

Therefore, it is possible for a link which is in the active state to also be able to display the mouseover state - that is, the black underline can change to a blue underline on mouseover. This is displayed correctly by Firefox, but IE doesn't replace the black underline with the blue one - what actually occurs is that IE displays both decorations: the blue underline is displayed correctly beneath the link, but the black underline remains visible, dropping beneath the blue underline in the display.

Firefox	IE

User Tabs: IE adds spacing that breaks the tab effect:

Firefox	IE

Weird eh? I'd appreciate it if anyone could point me in the direction of a solution!

Update (24-Jan-2005): Screen capture of the "Kernel" template as described in this article.