Blog Design: Watch Your Width

For a moment, I am going to dip into web design to illus­trate why Deep Green Crystals is an exam­ple of extra­or­di­nar­i­ly bad blog design. More accu­rate­ly, I am not dip­ping into web design; I am illu­mi­nat­ing basic facts about read­abil­i­ty, for the web or anywhere.

In doing some research about tags and ser­vices like Technorati and Del​.icio​.us that index blog con­tent via tags, I ran across Deep Green Crystals, Martin Tobias Musings.

I will reit­er­ate: Deep Green Crystals is an exam­ple of very bad blog design.

Why is it so bad? Visit it (or view the screen­shot). Roughly half of you will have to scroll hor­i­zon­tal­ly to read each line. All of you will be forced to scan your eyes hor­i­zon­tal­ly far beyond their com­fort levels.

Deep Green Crystals blog presents text that is far too wide for com­fort­able reading.

Human eyes have an aver­age lim­it of lat­er­al gaze around 160 degrees. As gaze does not include periph­er­al vision, which is not direct­ly involved in read­ing, that means our eyes can track a max­i­mum of 160 degrees hor­i­zon­tal­ly before rota­tion of the head is nec­es­sary. Regardless of the max­i­mum range of lat­er­al gaze, our com­fort lev­el rests around 35 degrees; if we have to move our eyes from side-to-side more than 35 degrees, the effort begins to strain the mus­cles of the eye–both mus­cles involved in move­ment and in focusing.

I’ll spare you the anato­my and logis­tics lessons and jump from A‑Z with­out bor­ing you with the points between.

Given the aver­age human’s lat­er­al gaze range and the dis­tance from eye to sub­ject of inter­est (in this case, the com­put­er screen), Deep Green Crystals is not a com­fort­able read. At a typ­i­cal dis­tance from eye to sub­ject of inter­est of 12–18″, Deep Green Crystals’ 900px wide con­tent col­umn forces the eye to scan over 90 degrees–far beyond the com­fort lev­el for most peo­ple’s eyes.

At the risk of stat­ing the obvi­ous, when read­ing forces the eye to move beyond its com­fort range, eye strain devel­ops. The longer one reads out­side the com­fort­able range, the more strain that devel­ops, with symp­toms includ­ing sore­ness of the occu­lar mus­cles (both motion and focus), slug­gish focus response on objects of vary­ing dis­tance, dry­ness of the eyes, headaches, and a gen­er­al eye soreness.

Bluntly, Deep Green Crystals is too wide for comfort.

Look at a news­pa­per or mag­a­zine. That isn’t rhetor­i­cal, please go grab a news­pa­per or mag­a­zine. Notice the lay­out is set in mul­ti­ple columns? Columns are not a device to present more infor­ma­tion on a page. Quite the oppo­site, actu­al­ly; the habit of peri­od­i­cals (news­pa­pers espe­cial­ly) to present mul­ti­ple arti­cles on a sin­gle page came about as a ben­e­fi­cial con­se­quence of the need for nar­row columns of text.

Periodicals are designed to be read. That is their entire rea­son for being (bird cage lin­ing is a byprod­uct). They set their con­tent in nar­row columns because, hun­dreds of years ago, con­tent providers learned that humans can only com­fort­ably read for any length of time nar­row width lines.

Blogs are made to be read as well (usu­al­ly). So why would a blog like Deep Green Crystals design its site to be uncom­fort­able to read?

Whether it be in print or online, columns of text should be lim­it­ed to no more than 8–10 words wide; “words,” for mea­sure­ment pur­pos­es, are five let­ters. Thus your text should nev­er be writ­ten with more than 40–50 char­ac­ters in a hor­i­zon­tal line.

If your text is set at 10pt–which, on screen, equals rough­ly 10 pixels–then your columns should nev­er exceed 500 pix­els wide. In real­i­ty, you want a nar­row­er col­umn to account for the fact that most fonts are vari­able width (e.g. an I takes up less hor­i­zon­tal space than an M). A good rule of thumb is to make your col­umn no more than the max­i­mum com­fort­able width less 10%. So, for 10pt type the max­i­mum col­umn width should be 450 pix­els (10px type X 50 char­ac­ters per line = 500px; 500px – 10% = 450px).

Narrower is fine–within rea­son. This web­site uses 10pt type inside a main con­tent col­umn width of 350px, enabling com­fort­able read­ing for extend­ed peri­ods of time. QuarkVSInDesign​.com is also set on a main con­tent col­umn width of 350px but uses 9pt type. The Design Weblog uses 430px, but the type is slight­ly larg­er than either of the pre­vi­ous exam­ples, thus work­ing out to rough­ly the same aver­age words per line.

Rules of thumb aside, you want columns that are 8–10 words wide–however the ratio of font size to col­umn width works out.

If your blog resem­bles Deep Green Crystals, change it. Be kind to your read­ers’ eyes. Your read­ers will reward you by spend­ing more time on your site (high­er pages-per-visit), a greater will­ing­ness to com­ment, and by refer­ring others.