layout archives

Visual Tombstones—
Don’t Let Them Bury Your Meaning!

I was checking out a site referred to me by a friend at work: Safe Mothers, Safe Babies (SAFE). She said they needed some design help, so I thought I’d take a look. (You can contact them if you’re interested in helping out—looks like a great cause, helping mothers and babies in Uganda.)

As I browsed the site, there were clearly a lot of opportunities to spiff things up, but not that many that truly hindered understanding or use of the site. At least until I came to their multimedia gallery:

Interesting photos, but I am not sure what they are about. There are no labels on each photo to help me out, so I start looking for clues. At that point a new problem emerges. See it?

Seven nav links aligned pretty closely with seven columns of images. Without a closer examination, some folks might think that the nav links are related somehow to the content aligned beneath them—that they are column headings. Human beings are are meaning-makers, so we stretch and strain to figure out the relationship, to define a connection that isn’t really there. Confusion or at least a loss of time is the likely result. In worse cases, it might actually lead you to assume something that isn’t so—that the last column shows actual photos of the group’s headquarters or something, for example.

It struck me that this is a type of visual “tombstoning”—an unintentional (and often humorous) alignment of headings in newspaper or magazine layouts. Here’s an example from an About.com article on tombstoning:

Really? Dead Bugs Drink Wine? Were they dead before or after they drank it? Either way, that’s pretty interesting… but not what the authors or editors intended!

There’s obviously a lot more to say about The Principle of Proximity, but it’s good to keep in mind that:

It is not enough to group things that should be grouped.

You must also avoid grouping things that should not be grouped.

And if you’re interested in helping SAFE dig up and replace those visual tombstones, drop them a line—I’m sure they’d appreciate it!

posted by ted 16 hours ago

Love this page layout in the latest JCrew catalogue, as featured on Coudal.com and FieldNotesBrand.com.

And I can say too that the Field Notes we got at An Event Apart have held up to the wear and tear of my back pocket better than expected.

posted by jason on Thursday, Feb 04, 2010

In a bizarre flood of memories this morning, I recalled one of the very first websites which pointed me in the direction of using CSS for layout. Whoever you are, BlueRobot, thanks.

http://www.bluerobot.com/web/layouts/.

posted by sam on Monday, Aug 17, 2009

Another great article on CSS layout techniques (fixed, fluid, and elastic) with viable pros and cons for each.

posted by rick on Friday, Feb 29, 2008

I know tables are out of style in our web design 2.0 world but I love how this page’s layout over at Little Bookroom. I can’t wait to get a couple of these books next time we’re in NYC.

posted by gilbert on Saturday, Dec 22, 2007