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

Share:

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.