Site Re-design, First Step

I did the first step of this site re-design last night. In practice, it doesn't look that much different but as usual the devil is in the details.

General layout

I didn't change the general layout much except that I made the main column wider because the column on the right wasn't using all the horizontal space it had.

Headers

I reorganised the headers. The original Blogger template used h3 headers for the date and h2 headers for the entry titles because the date was in a smaller font than the entry titles. However, entries are grouped by date, which meant that the page's HTML had header in an unexpected order, namely h1, h3, h2. So I swapped h2 and h3 to have sensible header levels. Headers on the right hand side column were all h6 headers. I changed them to h2, which is semantically what they are, but styled them differently from the main column h2 headers. I also added an h4 header for my own use in blog entries.

Colour scheme

The most obvious change is the colour scheme, although I did not do anything drastic. I started with the main column that I wanted in shades of blue. To help in this, I used my trusted Color Cube that I bought from ThinkGeek a few months ago. Then for the right hand column, I wanted shades of green, to complement the blue of the main column. That was easy, I just took the colours I had for the main column and swapped the blue and green values in each code. However, the result looked very cold. The answer came from the Firefox logo I had in that column: I needed shades of Firefox brown. Now, brown is a kind of dark orange, that is a colour between dark red and dark yellow. In RGB trichromy, which is how colour codes are specified in a web page, red is very easy: just have a value for red and nothing for green and blue; yellow is easy as well: have equal parts of red and green, no blue; but orange is more subtle because you need to have a non-zero green value but still less than the red value. Once again, the Color Cube came to the rescue. In fact, if you view the source of this page, you will notice that the colours are slightly more subtle than this because none of them is fully saturated, which makes them a bit softer. Then I re-used the same basic colours for the links.

Blogroll

The links in the right hand side column are managed by Blogrolling so that I can edit them easily. The default HTML produced by Blogrolling is just a series of links separated by line breaks. This did not suit me as it is a very bad way to emulate a list. So I wanted Blogrolling to give me li tags without the br one and without a div or table tag to enclose it. Unfortunately, this is impossible to do with the free version so I ended up subscribing and changing my roll to what I really wanted. Considering subscribing also gives me the ability to have up to 10 rolls rather than just one, I created one for books I've read or am reading. Subscribing also allows you to disable the link back to Blogrolling, which I did, not because I don't want to link back to them but because they don't give you any way to properly style it. So I will probably add it again later, in a different way.

Archive pages

I added an access key on the archive pages so that on any of those pages, you can press ALT-1 to come back to the home page. I'd have liked to add access keys for the previous and next archive pages but the Blogger templates are not flexible enough to allow me to do this.

Miscellaneous bits and pieces

At the code level, all pages now come with a DOCTYPE declaration and the main html tag has a lang attribute to help screen readers and other software that rely on knowing the language of the page.

There are a few more things I'd like to do. In particular, I have to go back through all the entries to make sure that whatever HTML code I use follows the standards I want to comply with. But for the time being, this will do.