jump to navigation


Do We Need Multi-Column Layout Web Page Designs? July 8, 2006

Listen to this article (Listen to article)

Given how long desktop publishing software has been around, and how powerful it is, have you ever wondered why (X)HTML and CSS have such a hard time producing multiple column web pages? Sure, you can create multiple columns with XHTML tables, but you cannot auto-flow text between columns. Sure, you could try replacing tables with CSS code, but try to properly align a layout with more than three columns with CSS, and you’ll be tearing your hair out. Well, UXD (links below), User eXperienced Design, has an exciting post about the new multi-column feature for CSS 3.0 - something I’ve referred to in the past.

If you do any sort of web design or even just a bit of blog theme tweaking, you want to know about the new CSS columns feature. Keep in mind though, that even after ten years, some browser companies just cannot seem to follow the standards. So who knows when the majority of browsers will support CSS 3.0 in it’s entirety. CSS 2.0 has been out for several years, and even the new Microsoft IE 7 is reputed to not support it fully.

Because of problems like this, I’ve given up on converting the two small sketchbooks full of blog theme designs. It’s been an utterly frustrating experience trying to convert my pencil sketches into multi-column themese using XHTML and CSS. I don’t want to use tables, but I don’t have the time to employ CSS hacks to my themes to ensure they work in all browsers. I’ve been waiting for CSS 3.0’s multi-column feature for a long time. (Probably since I was a search engine webmaster in 1996.)

But then I got to thinking: making it easy to have multi-column layouts with flowing text between columns might not be such a good thing. At least not if people start designing layouts where columns are longer than one screen. Consider: my laptop browsing experience is far different than that on my 19″ desktop monitor. In fact, one of the comments in the UXD article makes mention of this.

Still, if used properly, the CSS 3.0 column feature is going to be a boon to website and weblog page layouts, provided it is used to make short columns, where you can see the entire height in a fully-opened browser.

There’s no ETA for browsers supporting the CSS 3.0 standard, so your options are limited right now: tables or CSS. As mentioned above and in the article, for now, without tables, forget about designs with more than 3 columns.

If you want to see an example 4-column table-based layout, visit my hubsite’s old homepage. That was before I turned the site into a weblog. The old site was hand-coded and hand-managed, which meant I rarely added new content back then. If you like what you see, you’re more than welcome to copy my XHTML and tweak it for your use. Just make sure you replace my logos and Google Adsense and Chitika ad codes.

By the way, if you’re looking for a fast-prototyping tool to design custom Wordpress themes, you should check out Fresh Pursuit’s Canvas plugin. I’ve downloaded but haven’t had time to try it out.

However, it gives you their free Kiwi theme, or you can use one of the Wordpress basic themes. What happens is that once the Canvas plugin is activated, you can create a custom theme by dragging and dropping components from an Ajaxified list. You can even create Canvas “plugins”. (These are not Wordpress plugins in the standard sense, but plugins that are hooked into Canvas.)

I’ll try to cover Canvas in more depth some time in the future, once I’ve had a chance to play with it and maybe create a few plugins. In the meantime, check out Liz’s Frosted Mini-Wheats Design post at Successful Blog.

Sources: UXD [via TechMount], FreshPursuits - Canvas plugin.



Comments»

1. Liz Strauss - July 8, 2006

Hey There, Code Professor!
Thanks for the good word.
I tried really hard to be part of the BETA team on Canvas. I love Yas and the Canvas project seemed such a great wy for me to get involved. I was involved with too much stuff. :) I never could find time past the download, but it sure looked good from the start. I can’t wait to hear what you think of it.
Liz

2. rdash - July 8, 2006

Hi Liz. Isn’t it amazing how fast time just slips away? Too many designs, not enough time :)