The CSS 3 multi-column layout model analysed

Andy Clarke spent Christmas reading W3C’s latest working draft of the CSS3 module: Multi-column layout, and comments on the good, the bad, and the missing features of multi-column layout in CSS3 Multi-Column Thriller.

Multi-column layout caused a bit of a debate in September 2005, and I posted my thoughts in the badly named post CSS3 Multi-column layout considered harmful. I still see a lot of potential problems with CSS3 multi-column layout, most of them related to usability and readability. Andy mentions some of these in his article, and adds some that are more related to design. He also suggests a few ways of improving the multi-column specification to better meet the needs of designers.

Don’t get me wrong - I can definitely see uses for CSS3 multi-column layout, but you’ll have to try really hard if you want to convince me that splitting an article into columns works on the web. Like all powerful tools, Multi-column layout can be dangerous in the wrong hands.

Posted on January 15, 2006 in CSS, Quicklinks

Comments

  1. Having worked both in the Journalism field (print) and online publications - it’s interesting to look at both of the design perspectives go into two totally different design mediums. Web and print are just not the same thing so it’s tough to justify having a multi-column article on the web when it doesn’t make sense design-wise. Like you said Roger, I think usability is really key here and you have to wonder what the benefit really is.

    And although I have no real proof in saying how it’s not usable, it just feels like a mistake.

  2. January 16, 2006 by Gary Turner

    I foresee wonderfully awful web pages coming from flowed columns. I also see wonderfully elegant horizontal menus, with all the advantages of inline and float list items and none of the disadvantages.

    My simple-minded tests have produced beautifully spaced menus with no-hoo-hoo dropdowns. Absolutely amazing.

    Unfortunately, the print trained designers will use it in a manner that will make blink and marquee seem like good ideas.

    cheers,

    gary

  3. With increasing screen resolutions becoming more common, there is a need to break up lines to a more readable length. However, at the moment, there are a lot of print trained designers out there, and the differences between web and print seem to be presenting a huge barrier to adoption of web appropriate layouts.

    Technologies such as floating background images behind the text as you move a pointer down the page, increasing the text size of the current paragraph (again, following mouse focus) or just making use of the extra space for navigation, pictures or additional information make columns much less important on the web than in print.

    Still, it could be useful for some things…

  4. I would love to have this functionality for things like lists of items, so that you don’t end up wasting tons of space or hacking in multiple lists to achieve the same effect.

    I don’t think I’d ever want to use it for longer text where you run the risk of the user having to scroll up and down when they move from one column to the next.

  5. January 18, 2006 by Roger Johansson (Author comment)

    Jennifer: That is definitely one of the better uses for multi-column layout I can think of.

  6. Using 3 Column layout may be bad when reading from the screen - but it can be used with ‘media=”print”’. 3 Column layout is much better on paper than it is on screen.

  7. I second that. I’m building a site right now, and the client (who believes that the web exists to be printed and read offline) is forcing me to destroy my semantic code in order to get a set of alphabetical definition lists to display in two columns when printed. Having this built into CSS is necessary, and like anything else, will be abused. But it would sure save my code on the project I’m currently working on.

    “It prints in one column because it’s marked up correctly as a set of definition lists. CSS doesn’t allow printing in multiple columns yet.”

    “Just put it in a table. Then it will print in two columns.”

    “But it’s not tabular data. What about that list has a row/column relationship?”

    “Argh. [The other guy at the table] knows what I’m talking about, right?”

    Other guy at the table: “Sure. We’ll do it.”

    Me: Groan.

  8. January 27, 2006 by Daniel Schierbeck

    CSS isn’t meant to be used solely on the web - Ideally it could be used on actual newspapers. Therefore I see no problem with it.

    Will it be abused? Without doubt. Will it be useful? Of course.

  9. i Like all powerful tools too - IT IS RIGHT

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.