Balance, dramatic tension & the empty column

Leaving a number of web page columns nearly empty and filling the rest with body text provides an easy way to create balance and tension in a web page. The placement of the empty columns can perhaps enhance the effect.

My first ever WordPress theme was built on a 3 column grid: The first column was left blank except for the post’s meta data, the second and third were filled with content. You can also see the concept in a more recent theme (and on this site).

Note: This is a reason for implementing a grid, or even experimenting with non–standard grids.

Although the original theme was poorly built, it did look good (and was popular), which shows that any beginner can achieve balance on a page. (I say that, but creating a balanced layout that also meets the demands of user and author is a different matter: Web pages don’t exist in splendid, formal isolation).

The simplest implementation of this idea weights content:space 2:1 (which will apparently imbue your page with divine significance), but your grid may allow for some other interesting combinations (for example, an 11 column grid offers a 7:4 split, which gives an original feel to a page).

Where to put the nearly empty column…

I’ve noticed that I tend to like the space placed on the left hand side of the page (a la my first theme). I’m not entirely sure why, but it’s something to do with balance. Or maybe it’s just me. For an example, take a look at 52 Weeks of UX:

Screenshot of the 52 Weeks of UX site layout

Screenshot of the 52 Weeks of UX site layout without any amendments

Pushing the content over to the right just adds some — what? — tension to the page. Look at the same page with an inverted layout (I appreciate it loses some balance because page elements no longer align along grid lines):

Screenshot of the 52 Weeks of UX website with the content placed on the left hand side of the page

Screenshot of the 52 Weeks of UX website with the content placed on the left hand side of the page

The inverted layout was achieved using the Stylish extension. 52 Weeks… uses some interesting HTML and CSS.

It’s fine: Still perfectly readable, attractive, uses the golden ratio etc. But to my eyes it lacks a little of the oomph of the original pages. Why is this? Perhaps it’s because we expect the text to begin on the left hand side of the page, but find we’re made to wait and do a little bit of work to begin reading (dramatic tension, perhaps?) Maybe the effect is reversed in right–to–left languages. Or maybe there’s not really any difference at all?