My there! My name is Steve Kwan. User experience design is my passion.

<div> vs. <table> (Part 2/2)

(August 31st, 2006 - 2:28AM)

This article is a continuation of <div> vs. <table> (Part 1/2).

I know it's been a while since I resumed this train of thought, but I've been pre-occupied with several important tasks such as beating Titan Quest. That's done now, so we can get back to the issue at hand.

First, it's a shame that I feel the need to join in on the debate between <div> and <table>, because it's already been argued ad nauseum. But unfortunately, it seems the battle isn't over yet. If you want proof, just view the source of any major website. Even Amazon and Dell use table-based design. So we've got a long way to go.

The problems with div-based design

It isn't surprising that the vast majority of Web developers have been slow to adopt div-based design, for the following reasons.

1. It's less intuitive than table-based design.

   The nice thing about table-based design is that it lends itself well to the way we think about creating documents. Essentially you break a document up into a grid of different regions, make one your header, make another your footer, etc. If you want a column to be a certain width, you just click and drag that column in Dreamweaver until it's the right size. Just like Microsoft Word. Simple.

   Using div-based design, and for that matter using CSS (Cascading Style Sheets), is much more difficult. In proper div-based design, there's little to no formatting information embedded in your XHTML document. All that formatting information is put into your CSS. While this is one of the greatest strengths of div-based design, it's also the single greatest barrier to entry for Web designers.

   You really have to think about page architecture when using divs. In many ways, this makes div-based design more like programming than Web design, and that's probably one of the major reasons for its slow adoption.

2. Browser inconsistencies.

   There's been a lot of talk about Web standards recently, and div-based design goes hand in hand with Web standards. Unfortunately, for something that's "standardized," div-based design behaves in an awfully nonstandard way.

   When you're designing with divs, all your presentation rules should be in a CSS file. (Technically speaking they don't have to be, but you get little benefit from div-based design unless they are.) But different Web browsers behave inconsistently when rendering CSS. In particular, assigning proper dimensions to div columns has proven quite difficult.

   Say what you will about table-based design, but it's a far more mature model than div-based design. People have been designing with tables for years, and almost all Web browsers will render these designs properly. Only newer browsers can handle CSS-styled divs properly, and even among those there are inconsistencies and incomplete implementations.

   It's not uncommon to design a page perfectly using divs, then to find that it only works in the browser you tested it with. In fact, the trick to mastering div-based design is learning all of the browser quirks, not learning about divs and CSS. This is an extremely unappealing way to think about design.

3. Some things are extremely difficult to accomplish with divs.

   stevekwan.com is a div-based site. It currently has three columns: a menu column on the left, a content column in the middle, and a messages column on the right. (Note: This could change soon.) Setting the site up in this way was hard. CSS is good at a lot of things, but multi-column layouts are not one of them. It's much easier to create such a layout in tables.

   Also, for all the talk about separation of presentation and content, there are some aspects of presentation that are awfully hard to separate using CSS and div-based design. For example, try setting up a page so flexible that you can easily move the navigation pane to either the top, left or right using only CSS. It's not easy to do it well. Unfortunately, div-based design is limited by the order in which your divs appear in your source. Often you can navigate around this, but sometimes it just can't be done.

4. The benefits are not immediately obvious.

   Most of the time, div-based design feels like a lot of work for little reward. You don't fully appreciate its value until months after your website is finished. When you begin maintenance, you'll quickly notice how much easier it is to shuffle around elements on your page when it's div-based.

But fear not! There are major benefits to div-based design, and they often offset these downsides.

The benefits of div-based design

1. Easy to update.

   When your boss asks you to shuffle around the elements on the company website, you'll be very glad you can do it in one place with div-based design. In many cases, you can completely rearrange a div-based website using only CSS; you don't have to change the actual HTML at all! For examples, see some alternate styles of stevekwan.com: skylight, egomaniac, or good old original.

2. Increased accessibility, and therefore, increased exposure.

   Speech readers have a lot of difficulty interpreting table-based design, because the document structure is often quite messy. This means that any blind users relying on speech readers will find table-based sites extremely hard, if not impossible, to navigate. By turning these users away, you are turning away a portion of potential business.

   This leads into the issue of human rights. Don't we all deserve access to information? Don't we all deserve equality on the Internet? Can we really say the Internet is an equal medium if it discriminates against the blind?

3. Increased search engine visibility.

   Making your site accessible to the blind has the pleasant side effect of making it easier for search engines to understand. As Vincent Flanders of Web Pages That Suck said, "the most powerful Internet force known to God and man visits your web pages like blind people and folks who use Lynx -- Google."

   These days, companies are concerned about search engine optimization (SEO). One of the quickest and easiest ways to optimize your site for search engines is to use div-based design in valid XHTML!

4. Printable webpages.

   People always complain about how webpages look great on the screen, but turn into garbage when printed. With div-based design, it's possible to make your pages look half decent when they're sent to the printer. Don't believe me? Try printing this page. Notice how it comes out looking like a basic Word document.

   With div-based design, it's easy to set up one set of presentation rules for screen display, and one set for the printer. You can even hide non-relevant parts of the page when you print. For example, if you print this page you'll notice how the menu and comments don't appear. I deliberately removed these because I decided that anyone printing these pages would likely be interested in only the content. In case you're curious, you hide elements of your page by adding display: none; to their CSS rules.

5. Support for multiple devices.

   This is an extension of the previous point. In addition to making a different presentation for printers, you can make different presentations for hand-held devices and speech readers.

6. Cleaner, more compact source.

   Ever looked at the source HTML of a table-based page? It's awful. The tables are usually nested so deep that it takes hours to untangle them. div-based pages don't have this problem. And because you have fewer nested tables, you have more compact HTML, which means it can be downloaded faster.

When to use div-based design

1. When the target audience is the World Wide Web.

   If your pages are going on display to everybody, you'd better make sure that everybody can see them. However, if you're designing an internal corporate website, you may have a better idea of how your audience will be using the site. In this case, div-based design may not be needed.

2. When the layout is not extremely complex.

   Although div-based design is extremely flexible, more complex designs get very difficult. For example, three-column layouts are hard to set up using divs. It may not be cost-effective to use div-based design when tables are so much easier.

3. When accessibility matters.

   You should use div-based design if your users may be blind or have visual impairments. If your target audience tends to be senior citizens, be sure to adhere to div-based design if possible.

4. When pages are likely to be reorganized in the future.

   One of the biggest benefits of div-based design is ease of restructuring. If your page is something that's likely to be frequently updated, such as a company website, div-based design is a good idea. However, if you're developing a one-shot HTML document that will likely never change (at least not in terms of look and feel), div-based design may not be a priority.

5. When the document may act as source material for something else.

   This one doesn't occur to most people. If at some point you'd like to convert the content of your page into another format, or import it into a content management system, the process for doing so is more obvious with div-based pages. Because div-based pages are simpler, it can be somewhat easier to extract their content. If you're lucky, you might even have a system that can directly import the content out of the page.

   Also, if you ensure that your pages are XHTML valid, you can manipulate the content through an XML DOM or SAX parser. For software engineers, this can be of tremendous benefit.

How you can test the quality of your div-based design

This is the easy part. There are three simple steps.

1. Disable styles in your Web browser.

   Many Web browsers such as Firefox have this feature built-in. To disable styles in Firefox, select View > Page Style > No Style.

   If you've got a good div-based design with formatting information in CSS, your page should just be black text on a white background.

2. Shrink your browser window until it's long and narrow.

   To be more specific, stretch your window so it's about 400 pixels wide and 400 tall.

3. Attempt to read your pages and navigate through the site.

   In the tiny window you're using, the page should look and read like a newspaper column. If you're having difficulty navigating the site, reading the text, or viewing everything on one screen, then you may have a problem with your design.

Conclusion

To reiterate what I said at the beginning, it's really a shame that I'm writing this article. There's nothing here that hasn't been said better elsewhere. By this point, every serious Web developer should have adopted the technique of div-based design, but unfortunately that hasn't happened yet. At the very least, I hope this has been helpful and has motivated you to adopt cleaner page designs in the future.