Periodic table usage

In a recent comment, the otherwise likeable Photomatt gave me grief for having a single table in my HTML for Weblogs, Inc. layouts:

I would love to see the designs stop using table layouts from the late 90s. 😉

The sites actually use a great fluid CSS+XHTML rounded corners layout and were table-free until a few months back.

The trouble is (when you run a real-world CMS at a company that needs to work as a business) there are still some browsers that suck at using CSS for layout.

Just because a site shows seven sample CSS column layouts that work with 50 words of Lorem Ipsum dummy text doesn’t mean that they won’t break in spectacular ways when bloggers jam 600px wide images into a 400px column or when someone types the letter “g” 700 times in a row without a break in a comments form. Both situations blow apart CSS “columns” and neither one does the same damage to a layout that has a wrapper table. Browser support for min-width is probably 10% (meaning everyone but IE) and I’d love to have a table-slamming, standards-championing site here and say that IE isn’t the best browser for viewing our sites, but that’s not practical.

If you save this page and remove the wrapper table, there’s a great structural design at work. But I finally gave in and put a table around the columns when I saw the following happen in IE:

  1. At a certain width (or with certain content), the content column would drop down below the floated right-hand navigation column and readers would have to page down three times to see content. (That means they’re leaving the site since they think it’s empty.)
  2. Shrinking (not expanding!) the window, the content would miraculously find the room it needed to come back up and sit next to the navigation column.
  3. Shrinking the window a little more, the content would no longer have enough room to fit next to the navigation.

How is a designer supposed to code for that?

My readers are more important than the year I’ll spend in purgatory for using a single table in an otherwise modern layout.

I’ve already decided that if/when we redesign, I’ll be using the same compromise/cop-out that every other marvel of standards design uses these days: a fixed-width layout.

Published by Brian Alvey

I build software that makes creative people more powerful.

%d bloggers like this: