It’s all in the presentation

OK, so we’re way off-topic here but I thought I’d just mention a little exercise I did the other day to make a document I found on the web much more readable.

Basically, we’re talking about the use of Cascading Stylesheets (CSS) to style a document and make a site visitor’s experience easier on the eye. As an aside, CSS also happens to handle everything you see on this website.

The document in question came from someone’s website – I came across it in UX magazine, just a simple link to the story but I have no idea who the actual owner of the site is.

What I found was a short story from Isaac Asimov that I had never come across before but a truly nasty looking webpage that was almost impossible to read.

Now, what makes a document hard to read? Often it’s a combination of factors that include line length, line height, the font used, the size of the font, colour and so on. What I found here suffered from all these issues, so I thought I’d have a go at producing a version that I found more to my taste.

First, I tidied up the code – the original page may be basic but the code was still in a poor state. I could get technical but basically it needed an overhaul, easy in itself but it still took quite a while to go through the whole document and bring it up to date.

Once I had the document structured correctly with a heading, an author’s quotation and the story nicely set out I started to sprinkle in some CSS. I decided the biggest issue was the line length so I restricted the document text column to just 450 pixels and set the base font to around 12 pixels high. This isn’t perfect since the column width doesn’t scale if a user re-sizes the text but it’s a big improvement.

Next, I chose a font that was better suited for reading on-screen (in this case Verdana), changed it to dark grey (which is more comfortable on the eyes) and set the line-height to 1.6. I also chose a different font and colour for the heading, this time using Arial.

After that, I put a highlight box around the Asimov quotation and a bit of padding to move the document text away from the edge of the screen. By now I was making progress but for the finishing touch I added a background image to define the column a bit more.

Overall, I’m pretty pleased with the effect but why not take a look for yourself?

• Here’s the original version of “The Last Question”
• And here’s my tweaked version of “The Last Question”

Oh, and the best bit is, the story is great!

Happy reading