Most people who work with or around websites or web applications are aware of the mantra “Tables shouldn’t be used in design,” but I don’t think all of them understand why. To explain, I’d point you to a practical example: http://www.csszengarden.com/

The css Zen Garden is a great way to look at the power of separating content from design. Every page in the collection uses the same simple HTML page but achieves very different organization and style using simple CSS.

This wouldn’t be possible if you didn’t separate your design from your content. Using tables for layout exactly breaks this rule. A giant table that wraps your content to achieve three columns commits your page to a life of three columns with no hope of changing. (It should go without saying that tables have their place and their use…for building tables.)

Definitions: Markup, Style and Layout

It’s important to have clear definitions about the three components of web design. Some others may vary slightly, but I like to think of them this way.

Markup groups and annotates your content. For example, if a phrase is a heading, it gets marked appropriately. If two or three paragraphs are all related, they get grouped. If you have notes sprinkled throughout, each of the notes gets annotated in a similar way.

Style breaths life into your content by adding color, typography, background gradients, etc.

Layout is what defines the organization of your page. For example, three columns or two? Where should the header go in relation to the content? What about the footer?

In Practice: HTML, CSS and …

For markup, HTML is your tool at hand. If you use markup wisely, your HTML can read really well (i.e. make sense to a human) and offer insight into what content is important or related.

CSS is the style tool. If you want your headings to be big, read, and bold, then this is where you do it.

Layout is where things get cloudy. We don’t have a layout language that is standard. This is where and why people disagree with the table mantra described earlier. Without a real layout language, designers are left to hack together their own solution with a combination of HTML and CSS.

The Answer: Layout

Some designers choose to go with tables for layout, but as pointed out earlier, this is a bad idea because it makes your page very inflexible. I prefer to go with floating DIVs, although I’ll gladly admit that side effects of this method include headaches, shortness of breath and nausea.

One solution that designers are turning to is CSS frameworks, which typically take the form of CSS grids. A few of the more popular ones are the 960 Grid System, Blueprint and the YUI Grids.

These grid systems aren’t the final answer, they’re really just clever designers doing the best they can with the tools they have available. (For example, to make design changes you still need to go searching through your markup to change classes.) But they do make layout easier in the absence of a real layout language.

I’m not huge fan of upfront design. I prefer to take an idea and start building and design through iteration of an actual product. Pencil can be great for that. Several of the features I’ve written have started out as quick sketches on paper with mini-addendum sketches as I go. And nothing beats going to a different room with your pencil and paper to solve difficult conceptual problems. Because I kept losing these awesome sketches, a few weeks ago I bound some Idea Works notebooks. They’re recycled from old stationary that we couldn’t use because of an outdated phone number. Good for the environment and good for the brain.

Check out Twitter’s Election 08 page for a live feed of election related tweets. For information how on voting experiences went go to search.twitter.com and search for #votereport.

Check out Digg’s Digg the Candidates for news stories related to the candidates voted on by the digg social network. Tends to be liberally biased, but as long as you stay away from the comments you’ll survive.

For an awesome mashup of the two check out CurrentTV’s Election Night Party. They will be displaying live feeds from both digg and twitter over their election coverage. (If CurrentTV is not available in your area you can normally watch it online, I’m not really sure if that’ll work tonight though.)

And last but not least:

CNN’s Electoral Vote Calculator which lets you chose the winners of states and plan your candidate’s path to victory! Well, not necessarily to victory but you do get a chance to play out different scenarios if you can’t wait until the polls close.

With all this who needs political analysts any more?

Stephen Shankland, in his post, makes a good point though, “the very reason the art spam is hard to screen out also makes it, well, somewhat impotent as a spam method. ” It gets the information in front of your eyes, but that’s about it.

(Image Credit: Stephen Shankland/CNET News)