The Who What Why

Ian Griffiths, a well respected developer, speaker and author who literally wrote the book on WPF amongst other his many other projects (he even helped write Artworks for the Acorn Archimedes early 90’s – the first Illustrator-like app I ever used!) and an all round good bloke.

His blog gets ~23,000 views a day, though only 3,500 or so are visits to his actual website, the rest being syndicated RSS. The website was ‘hastily thrown together nearly 5 years ago’.

We talked about it and I agreed to spend an hour tweaking it – with the caveat of adding no extra images or making layout changes to avoid upsetting the considerable number of archives.

With just a few changes of the CSS file it was easy to change from an obvious developers notes to a modern blog in a manner of minutes.

Colours are way important but also way hard

Navy and Aqua are easy to remember html colour names but they jar when stuck on top of each another, but getting harmonious themes are difficult to come up with. If you’re the type of person who puts aqua on navy, an easy way to pick colour schemes is to use someone else’s. kuler.adobe.com – a UGC flash tool for creating or browsing colour sets. I played around with the colour pickers and came up with a bunch of shades of blue to keep to the brand of the original site:

See the theme here http://kuler.adobe.com/#themeID/277159 (Flash App). Although you could just as easily picked a blue theme from the highest-rated section http://kuler.adobe.com/#themes/search?term=blue

Typography Rules

The fonts and default sizes are good, cross platform, work great on most displays and clean (only ever sans-serif – serifs fonts are for headers or printed text). The most heinous-yet-easy-to-fix type crime: line height/leading. So often overlooked it can make the most difference, it has been proved to improve reading speed significantly. I tend to go for about 140% leading as a rule for all body text.

.blogBody {line-height: 140%;}

Also removing underlines on links can reduce body clutter, as long as the links are in a strong enough colour to be differentiated from the copy – an underline on :hover can positively confirm link behaviour.

In Ian’s case, the date inline with the post titles detract from the heading, and italic emphasised text rarely looks good across browsers thanks to aliasing (or lack thereof). To give focus to the headline it’s easy to put the date on a separate line below (display: block) and to reduce its size and colour.

.blogDate {font-size: small; color: #808080; display: block; padding: 0.5em 0;}

Borders are cages

There’s nothing developers love than loads of tight black borders. We’ll reduce them down from black to grey and add an HR css rule to make them 1px high, change black to grey, thin to 1px.

The navigation also does not need a border the whole way round so we will reduce it to the left side, separating it from the content.

The first HR of the site is also redundant, we can hide it using the CSS2 http://www.w3.org/TR/CSS2/selector.html#first-child :first-child pseudo-class to hide only the first in the page.

.blogBody hr:first-child {display: none}

Padding and margins separate content from chrome

Like increasing line height, padding and margins do a huge amount to increase legibility. Increase the gap between your content and your chrome with 30px padding by amending your contents container.

.blogBody {line-height: 140%; padding: 20px 50px;}

Leave a good visual break between posts to separate them too so they don’t appear to run on simply by increasing the top margin of H1 or H2 tags that you use for titles, or by using an horizontal rule tag. Horizontal rules benefit from a larger vertical margin too, the following style helps maintain the same look across browsers

hr {height:1px; background: LightGrey; border: none; margin: 2em 0}

Another fix in Ian’s case is to increase the padding of the blog header – this will move the H1 away from the edges, fixing the unsightly white gap at the top whilst giving it room to breathe.

Navigation

It is hard to scan through dense text lists, so adding some padding and a very light background with a gap between separates individual entries out clearly. Right-aligning the entry count in this table makes full use of the column width and also forces the menu to lie flush with the google adword box above. Gridded layouts are the mark of a quality site and it helps you can scan lists and content blocks quickly.

Final touches

Footers need to be footers – separate from the body content so give them a smaller font size or a lighter colour, a large top margin and either a 1px top border or an <hr /> tag to clearly define them as meta data.

The pre/code sections also need to stand out from the main content so consider giving them a very pale background to enhance scanability – when you scroll down the page it makes it easier to look for blocks of code if that’s all the user is looking for.

Conclusions

By changing only the stylesheet, even just by a small amount, you can vastly impove your web presence. Here’s a checklist to measure your pages against:

• Colours whether subtle or vibrant, don’t over-saturate or under-contrast your page
• Typography sans-serif for body always. Make sure you increase the default line height
• Borders do you need them? If so, make them as faint as possible
• Padding and margins page elements need a good margin to help the eye separate content from chrome
• Navigation lists pad out your links to aid scanability
• Meta less important than content – so show it

Visit interact-sw.co.uk/iangblog