Why I can’t get my head around tableless CSS
…and why Web 2.0 design really irritates me.
I’ve been trying for the better part of the past two months to get my head wrapped around this whole tableless CSS Web 2.0-design craze. I’m a left-brained kinda guy. I want structure. I’m good at structure. I am the “table god” as I am known to some (no, seriously, that’s what a few people call me). The idea of flat-coding blocks to be stacked all around the page doesn’t work for me. Especially when you can’t really stack them as there is little to no vertical positioning! Sure, you can left, top, right, and bottom, but that is absolute positioning. Whoever thinks that’s a bright idea needs to speak to me. Absolute positioning within a fixed relative space (not the entire page), is okay sometimes. But that’s it. Absolute positioning, widths, and heights aren’t scalable. And the scalability (or complete lack thereof) is what really bothers me.
If you’re a user in a public library stuck at 800×600 trying to browse several of the Web 2.0 sites, you’re not only going to have to scroll vertically, but horizontally. So, it can take several passes both vertically and horizontally to absorb all the information. From a little bit of surfing, it seems like 1024×768 is the golden resolution to run at. Anything higher and you don’t get any improvements. But, seriously, a lot of us left 1024×768 a few years back. Now, I’m running at 1680×1050, 16:9 widescreen aspect ratio. Now, all these Web 2.0 sites are starting to look anorexic with their fixed widths that don’t scale. Sure, you can set a div width to 100%, but I’ve found that it doesn’t always work as you would hope in ANY browser. So, designers just design for one resolution and only use that resolution. It’s almost as bad as simply testing with one browser.
I’ve browsed around and collected some screenshots to illustrate my grief. I sampled 12 sites. A few local companies and some big-shot sites. Of the twelve, there are six that can be viewed in 800×600. The rest can be viewed at 1024×768 or larger. Once you start getting above that, it’s a lot of wasted screen space. Wasn’t that stuff valuable at one point in time? One argument is that it makes things look less cluttered. To me, it’s a way of stacking the clutter vertically and not spacing it out horizontally. There is only one site of my samplings that actually makes use of tableless CSS and scales from 800×600 all the way up to 1680×1050 (and beyond).
Now, on to my screenshots.
Sites that are tableless and 800×600-only:
Sites that are not tableless and 800×600-only (and that’s just sad):
Sites that are tableless and scale between 800×600 and 1024×768:
Sites that are tableless and 1024×768-only:
Sites that are not tableless and 1024×768-only (another sad case):
Finally, a site that is tableless AND scales to all resolutions from 640×480 to 1680×1050:
For some sites without enough content to fill a thimble, this is all fine. But, for sites that actually have content, compressing all the clutter into one near-painful mass of colors just hurts. Our monitors have two dimenions, why not use both of them?
Hopefully, someone will come along and save the day by removing us from our little fixed-width boxes and break the trend of almost all of these sites looking the exact same (okay…the colors are different). The only two sites that stand out to me are Slashdot.org and Digg.com. Digg only barely stands out because it doesn’t have a definitive border around its box, but there’s still an invisible box there. So all you crazy web designers and original thinkers out there, come up with something new for the rest of us before we all get bored to death by your terribly colorful and creative pieces of something that looks like everything else.
