Redesigned for Readability

A few months ago I realized that I disliked the design of my blog enough that I’d usually run my own articles through Readability before trying to read them. Despite being a design insensitive coder, even I realized that I had a case of really horrendous usability on my hands.

Here are a few features of the new design:

  • Google Web Fonts: I use the Google Web Fonts API to provide a consistent font experience across most platforms. The best part about Google Web Fonts though is that they look great on Linux browsers that would otherwise annoyingly render Linux Font ™.
  • Text width: articles should be approximately 100 characters wide for near optimum readability, but will shrink to fit smaller windows where necessary.
  • Text-shadow: a CSS3 trick that makes text more readable, especially against a distracting background like the one you see here.
  • White space: I thought that I was doing a pretty good job of using white space before, but was probably mistaken. I like it so much that from now on, I might just use it more often.

Although not quite as visible, I’ve moved away from Nanoc to a new backend:

  • Ruby on Rails: Mutelight now runs a custom built Rails-powered backend. Overall I find that the flexibility of having the full power of Rails available far outweighs the cost of writing a backend from scratch (working with Rails, writing a backend for a site like this really doesn’t take very long). Moving away from a static compiler may come with performance concerns, but in the end Rails’ full page caching comes out just as fast. I’ll talk about this more in a future article. (it still doesn’t run on a static generator, but it’s no longer powered by Rails)
  • Client-side syntax highlighter: due to concerns with the speed of an EC2 micro instance, I’ve moved away from Pygments to jQuery Syntax Highlighter. It does just as good of a job, and produces pristine markup as a bonus. After investigating available options extensively, I now feel that client-side syntax highlighters are the way forward these days.
  • Tiny URLs: short links now look like /a/redesign instead of /a/22, providing more useful context.
  • Formats for free: all pages will now respond to JSON requests as well as the default HTML. Try accessing http://mutelight.org/articles/redesigned-for-readability.json for example. (a subsequent redesign has disabled this feature; I no longer consider it to have much merit)

Another step that I’ve taken is to remove Disqus commenting (for now at least). I was hoping that these might be effective for correcting mistakes that I’ve made in articles, but in practice this doesn’t seem to happen very often. If you discover a mistake, e-mail me at brandur@mutelight.org or send a pull request for a correction on Github, and I’ll get around to correcting myself as soon as possible.

That said, I’m hugely thankful to the people who took the time to leave a comment on the old blog. I do hope you’ll continue to provide feedback through other channels.

Lastly, I’ll probably be making tweaks over the next few weeks. Enjoy!

Posted on April 28, 2011 from Calgary

About

My name is Brandur. I'm a polyglot software engineer and part-time designer working at Heroku in San Francisco, California. I'm a Canadian expat. My name is Icelandic. Drop me a line at brandur@mutelight.org.

Aside from technology, I'm interested in energy and how it relates to our society, travel, longboarding, muay thai, symphonic metal, and the guitar.

If you liked this article, consider finding me on Twitter.