CSS 3: Multi-column Layout vs. Advanced Layout

Brian Dillard, Tuesday, September 11, 2007 @ 5:30 am

My colleague Sholom Sandalow's post about multi-column layout in CSS 3 drew a lot of comments and remains one of our most popular articles two months after publication. Folks are obviously hungry for discussion about the future of CSS. Yet there's still a lot of fuzzy logic out there about where we're headed.

Viewport dimensions still matter

Lots of pixels have been burned in the discussion of changing viewport specs. But most of the people talking about the advent of very large viewports are probably designers with Mac Cinema displays - NOT average users. As market penetration for super-wide resolutions grows, so will market penetration for portable devices with resolutions at or below the old-school 640x480. (And I'm sorry, iPhone designers, but reading a full-width web page on a tiny screen isn't actually all that easy on my eyes. I'd much rather see media-appropriate layouts than tons of pan-and-zoom.) My point being: Assumptions about your audience's screen resolution have always been at odds with the idea of the Open Web. They still will as user-agents proliferate and diversify. As CSS evolves, it must continue to offer us tools to make content attractive and readable on a variety of resolutions and devices.

Multi-column text isn't a panacea

I also just don't get the excitement over multi-column text in the browser. Again, this goes back to assumptions about the viewport. One commenter uses this page as an example of good multi-column type that mimics the eventual CSS 3 spec. Yet on Firefox/Mac and IE6/PC, it's ugly, unreadable or both when you resize your browser to less than 500px tall or 1250px wide. How is this good design?

The main disadvantage of single-column text - that it's hard to read when the columns are too wide - can easily be solved by strong design skills and smart use of existing CSS capabilities. And the main advantage of multi-column text - that it makes more efficient use of space - ignores the fact that a browser is not a piece of newsprint. Ultimately, print-style columns work in some situations and don't work in others. They are neither a universal solution nor an antidote to bad web design. They are simply an additional tool in our CSS arsenal - one useful mostly in print stylesheets. It's nice that this basic layout feature is finally coming to CSS, but it's hardly the most exciting part of the CSS 3 roadmap.

Advanced layout: Finally, something to get excited about

No, my favorite CSS 3 spec is the Advanced Layout Module. (Thanks to my buddy Zack for alerting me to its existence.) This "concept album" exploring advanced layout strategies recently received its first refresh since 2005 (discussion here). For anybody who's ever struggled with CSS layout, there's a lot to love in this proposed templating system. Basically, the spec calls for a new type of display that combines the best aspects of table-based and float-based layout but provides far more flexibility than either. Of course, implementation is a far-off dream, and many aspects of the proposal haven't yet matured. But the Advanced Layout Module proves that the standards bodies are attempting to tackle the big picture of CSS layout rather than the little details.

In the meantime, several frameworks and techniques have emerged to tackle the problem of cross-browser, grid-based layout. Notable examples include the following:

• YUI Grids
• YAML (Yest Another Multicolumn Layout)
• Blueprint CSS
• Switchy McLayout: An Adaptive Layout Technique

I'd be interested to know who's using these tools, how userful they are, and whether they provide the same advantages as JavaScript/Ajax frameworks - that is, less time spent reinventing the wheel and more time creating great websites and webapps. As always, weigh in on the comments.

agile ajax

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Here is another CSS framework, Elements http://elements.projectdesigns.org

   Comment by Ben Henschel, Tuesday, September 11, 2007 @ 3:59 pm

2. 

   So someone gave you an example and you didn’t like it. Here’s another one:

   http://www.refdag.nl/artikel/1315361/Zware+aardbevingen+teisteren+Indonesi%26euml%3B.html

   That is actually the online version of a Dutch newspaper. Because newspapers always use multi column layouts, they have made their websites use a multi column layout. I think it works really well, they use javascript to break up the text and distribute it. If you don’t like the layout, you can use the tools on the bottom to change the columns.

   Comment by Mike, Wednesday, September 12, 2007 @ 2:24 pm

Leave a comment