Muddymoles mountain biking in the Surrey Hills and Mole Valley

It’s all in the presentation

Posted by Matt | February 16, 2007 | Leave a comment

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?

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

Happy reading


About the author

Matt is one of the founding Molefathers of the Muddymoles, and is the designer and main administrator of the website.

Having ridden a 2007 Orange Five for many years then a 2016 YT Industries Jeffsy 29er, he now rocks a Bird Aether 9 and a Pace RC-627.

An early On-One Inbred still lurks in the back of the stable as a reminder of how things have moved on. You can even find him on road bikes - currently a 2019 Cannondale Topstone 105 SE, a much-used 2011 Specialized Secteur and very niche belt drive Trek District 1.

If you've ever wondered how we got into mountain biking and how the MuddyMoles started, well wonder no more.

Be the first to comment on ‘It’s all in the presentation’

We love to get comments from our readers.

Leave a comment…

Have your say – we'd love to hear what you think.

If you have something to add, just complete this comment form (we will not publish your email address).

*Required information.

This site uses Akismet to reduce spam. Learn how your comment data is processed.