Your Blog Is Blinding Me

Rods And Cones in Rebellion

Just last night I saw a message from Jon Galloway about a neat article on Model Binding and I was really interested, so I followed the link to a blog that, content-wise, was a really nice discovery.

It’s written by Daniel Chambers and has some great content in it about ASP.NET MVC. Better yet, he wrote the blog himself which I highly-support as a way to keep your skills sharp, and gives you an application that you care about in which to try new things.

What’s With the Visual Hate?

I was really looking forward to reading this article, but when I got there my eyes, literally, glazed over and I got dizzy…

Is This Cruel of Me?

Possibly – I know there will be some who think I’m picking on Daniel – after all he wrote the engine himself and if you know my background, well let’s just say that I’m no designer and perhaps I shouldn’t be so snotty.

BUT – well I’m just thankful that someone pointed out my blog was unreadable - even though he was talking less about aesthetics, more about style. But after I got done getting bludgeoned for being weird, I got bludgeoned for horrific readability .

Love Your Readers

So let’s turn this positive. If you have a blog, and you’re not writing for Codebetter, you can adjust your CSS so you don’t blind your audience.

Let’s take Justin Etheredge’s blog as a prime example of “most blog’s CSS”. I see the same formatting everywhere – small fonts, line-heights that are jammed together so the words become a wall of text… paragraphs that can be sliced up just a bit more.

His blog is extremely well-written, and also very complete (read: it’s long usually) and I desperately want to read each word, but after I get about half-way through I find myself scanning things just to get to the end.

*Note: Yes, I have glasses and they work great. I also have a big monitor and yes I know where the zoom is. These things don’t address legibility and readability – which is the point of my post.

Readability To The Rescue

I use to call this thing the “Codebetter Script” as I use it whenever I read posts there (the Codebetter stylesheet is all kinds of wrong for readability). Basically – Readability.com will hijack a site’s CSS and reformat it so you can easily read it.

You simply select the settings you like and drag their bookmark to your bookmark bar (which is a bunch of javascript). It doesn’t use frames or redirect you – it simply rewrites the page in your browser to be… well more readable.

Using this on Justin’s blog is just bliss – I can read his thoughts so much more clearly, and it just feels like it’s a whole different article. I know this might sound snobby to some people – nothing I can do about that. It’s CSS – it’s something we should know and understand how it effects users of our sites.

Using Readability on Codebetter, Justin’s blog, and Daniel’s blog works great for me, but doesn’t do much for them – and they probably care very much if their readers are having a hard time reading their posts.

Typography Basics

If you have control over your blog’s CSS then you can do some very simple formatting resets to get your stuff to look swell. The first is to take a look at the blogs of people who know a lot about CSS and care about aesthetics.

A favorite of mine is Geoffrey Grosenbach’s Peepcode Blog. It’s usually a stunning example of someone who really cares about the visual aspect of what they write (although his last post almost blew my optical nerve). His use of fonts is great – and I have no problem letting people know that his blog is what inspired me to create what you’re reading now (more on that later).

If you find yourself at a loss when working with CSS, don’t be afraid to use a “canned” CSS solution. One of my favorites is the Blueprint CSS framework. It’s what I use on my blog here, and I love it.

Be warned: some people LOVE this thing, others think that using a CSS framework is akin to the ObjectDataSource and drag/drop web programming. My thought is that if you have a choice between bad CSS and a framework, well choose a framework – than sharpen your skills to get away from the framework.

One of the sheets that comes with Blueprint is a typography set – they setup the fonts/line-heights/graduated header sizing for you, so you can literally copy and paste their stuff and drop it on your blog.

The Mininum You Should Know

If the only thing you take away from this post is the basic setup to the right – that’s a great start. If you’re wondering what makes these settings so special… well read on!

It’s All Phi Magic

There’s math behind all of these settings, and that math pivots on one of the great secrets of the physical universe – Phi: “The Golden Ratio”

In mathematics and the arts, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to (=) the ratio of the larger quantity to the smaller one. The golden ratio is an irrational mathematical constant, approximately 1.6180339887

Long story made shorter – the symmetry of phi is what we, as animals, think of as “beautiful”. The symmetry of a model’s face, the symmetry of tree branches full of leaves, the ratio of petals on a flower in relation to its stem.

if you pay attention to Phi in your application, you’ll have a more aesthetically pleasing UI, and a user who subconsciously perceives your site as beautiful.

If people think your site is beautiful, well it spirals from there. It’s not all that hard – it’s just a bit of math really – and the good news is that the guys at Blueprint already figured these ratios out for you (for the most part).