CSS3 Multi-column layout considered harmful

A recent A List Apart article, Introducing the CSS3 Multi-Column Module, explains how the CSS3 Multi-column layout module works, and provides a JavaScript workaround to cover up for browsers that do not support it.

"Wow, multiple columns in CSS!", you may think at first. Well yes, wow indeed, but please do think about it a little longer. Have you ever tried reading an article that is displayed in a multi-column layout on-screen? I have, and in my opinion it sucks. Especially if the article is longer than just a few paragraphs.

However, splitting an article into several columns may be fine, if:

  • there is no need to scroll up and down while moving your reading focus from one column to the next
  • there is no need for horizontal scrolling
  • there is no paging - I prefer having everything on a single page, and it makes printing much easier
  • it doesn't make lines too short to read comfortably
  • text is not justified

The CSS3 Multi-column layout module is not new; it's been around since 1999. As far as I know, the only browsers that support it are the very latest versions of Mozilla and Firefox. And just maybe we should hope that it stops there.

Will there be designers who misuse multi-column layouts by splitting long articles into several columns, ignoring that it will force readers to scroll up and down and fight against line lengths too short to be comfortable?

Or even worse, will some go completely overboard and implement something similar to the paging used at the International Herald Tribune?

The risk of that happening is obvious. Too many designers value "creativity" above readability, usability, and accessibility.

Using multiple columns in a print stylesheet may be useful, but on-screen, for longer articles? No. Face it, the web is not a printed magazine.

Update: Richard Rutter has similar thoughts on this: More on multi-column layouts.

Posted on September 28, 2005 in CSS, Accessibility, Usability