steve kwan user experience designer

Things currently pissing me off right now

(August 31st, 2006 - 10:04PM)

1. Trying to extract money from people who don't want to pay up, or don't think they should have to.
2. Getting up in the morning.
3. People who post photos of their friends on hotornot.com without their permission, then brag about it on their blogs because they think they're cool, when in fact they're only revealing their social incompetence.
4. Long commutes, and my inability to drive my car alone.
5. The principle of uncertainly of quantum physics.

<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.

The real enemy is the War on Terror

(August 28th, 2006 - 10:07AM)

Here's a lecture you absolutely must hear.

U.S. Foreign Policy and the War on Terrorism
Ian Lustick, Professor of Political Science, University of Pennsylvania

This lecture is from a UC Berkeley course, IAS 180: US Foreign Policy After 9/11. This particular series of lectures is from the spring 2006 semester.

The first part of the lecture is a bit of course-related information that you can skip.

Something Ricky Bobby and I both have in common

(August 27th, 2006 - 10:53PM)

We both drive Monte Carlos.

The Official Stephen Colbert Green Screen Challenge

(August 24th, 2006 - 10:17PM)

Hilarious.

Review: Snakes on a Plane

(August 23rd, 2006 - 12:28AM)

(4.5 / 5 stars)

One sentence summary: The definitive cult movie of my generation.

There's nothing I can say about Snakes on a Plane that hasn't already been said. Go see it.

Reason #49 why you should see Snakes on a Plane

(August 20th, 2006 - 12:37AM)

The music video. OH, I'm ready for it.

This kid needs an exp run

(August 19th, 2006 - 10:41PM)

Beatin' 'round the Bush

(August 18th, 2006 - 9:44AM)

I don't quite know why, but I find this hilarious.

A great online physics podcast!

(August 18th, 2006 - 9:32AM)

Physics 10: Descriptive Introduction to Physics at UC Berkeley

Richard A. Muller, Professor of Physics at UC Berkeley, has put his physics lectures online as a podcast. If you have even a passing interest in physics, I highly recommend subscribing, as Richard is a fantastic speaker.

And just to alleviate your concerns, this isn't a podcast about formulae. This is a podcast about real-life, useful physics that anyone can understand.

The move is done

(August 16th, 2006 - 2:07PM)

The move is finally over, thankfully. I've been unpacking boxes, and most of my stuff is in place in the new house. My roommates still have their stuff in boxes, so the house is still a mess.

One of my roommates has informed me that he'll be moving out. How nice of him to tell me the day after I moved all of his stuff.

stevekwan.com should be back online after a three-day downtime. It may take a while for the DNS changes to take effect in full, but hopefully you didn't miss me too much.

I hate hate hate hate moving.

(August 12th, 2006 - 3:10PM)

There are few things in this world that I hate as much as moving.

First, you have to pack up all your belongings, which is a huge undertaking. Then you have to dispose of all the stuff you don't want to bring with you. There's something very disturbing about throwing out half of your belongings. Then you're faced with an empty home, and psychologically, that's a horrible thing. Then you leave. And then you wind up in a new, strange place where it'll take you months to settle in.

We've packed most of our things up and we've disposed of what we don't want. Tomorrow is moving day, so the stevekwan.com will go down. Hopefully it will be back up again shortly.

I'm moving

(August 12th, 2006 - 12:27AM)

I'm moving this weekend, and the stevekwan.com server will be displaced. The DNS change and the move will result in about a day of downtime. To tide you over while I'm away, here's some YouTube goodness: a bearded white guy singing a song by a scrawny black guy.

"In the beginning God created the heaven and the earth."

(August 10th, 2006 - 7:22PM)

Ricky Gervais reads the Bible.

First, destroy the archives

(August 8th, 2006 - 8:45PM)

Regarding "First, Destroy the Archives" by Gale Courey Toensing:

My old boss used to say that when one country invades another, the first thing they do is destroy the archives. I thought this was a marketing ploy to make our archivist prospects feel important. But it turns out it's true.

Never underestimate the power of human history. It's one of those things that seems unimportant until you find yourself without it. Believe it or not, you could survive without the Internet. You might go through withdrawl for a weekend (I know that's happened to me when Shaw makes an oopsie), but life will go on. You can even make do without television, without telephones, and maybe even without electricity. But you can't make do without human history.

What would you do if every record of your existence completely disappeared? Can you even imagine? And what would happen if everyone's records disappeared? That's what's happened in Nablus.

All of our recent inventions are nice, and they greatly enhance the quality of our lives, but they are just building blocks laid on top of the foundation we call human knowledge. This is a foundation that's been constructed piece by piece, human by human, for millennia. That's why when you want to cripple a society, you start by destroying that foundation: the archives.

Awwwwwwwwwwwwwwww

(August 5th, 2006 - 9:38PM)

Crazy Interspecies Animal Friends!

Quick movie reviews

(August 5th, 2006 - 1:53PM)

The Devil Wears Prada

(4 / 5 stars)

One sentence summary: A surprisingly funny movie.

A Scanner Darkly

(3 / 5 stars)

One sentence summary: Excellent art direction and some great dialogue, but unfortunately it falls apart at the end.

Pirates of the Caribbean: Dead Man's Chest

(2.5 / 5 stars)

One sentence summary: Great special effects and action are the only things preventing this self-serving movie from being awful.

Clerks 2

(1 / 5 stars)

One sentence summary: Kevin Smith's usual incompetence.

The attacks on Lebanon are wrong

(August 4th, 2006 - 11:04AM)

Israel is wrong. Don't bother arguing; there's no point.

Thoughts on Wikiality and knowledge management

(August 3rd, 2006 - 1:00AM)

View Stephen Colbert's Wikiality segment

On July 31st, Stephen Colbert coined a new term: Wikiality. I think he's making a point of coining new terms every now and then to keep himself relevant. But that aside, Wikiality basically means a reality where the truth is determined by group consensus, not actual facts. This, of course, is making reference to Wikipedia, the newly famous online encyclopedia.

Wikipedia is a very "Web 2.0" encyclopedia; in other words, it isn't dictated by an ivory tower full of researchers like Encyclopedia Britannica. It's dictated by the people. Anyone can go into Wikipedia and add or edit an entry. The security precaution Wikipedia uses is essentially the wisdom of the crowd: if someone posts something incorrect, it's up to the other users to correct it. On the plus side, this means that Wikipedia grows and updates at a rate far faster than a traditional encyclopedia could. The downside is that there is absolutely no guarantee that what you find on Wikipedia is accurate or research worthy.

Stephen openly challenged his viewers to vandalize the Wikipedia page for elephants to prove how unreliable the encyclopedia can be. And he succeeded; the page has been extensively vandalized. Colbert's made his point.

Gotta agree with Stephen on this one. The Web 2.0 community concept has proven extensively powerful when it comes to sharing your photos, distributing your videos, and bookmarking sites. However, there are some situations where mob rule isn't a good thing, and one of those is knowledge management.

I work with archivists responsible for recording our history, and I know the painstaking labour that goes into the process. The average Wikipedia user simply does not have the training, and quite frankly the level of trust, to perform such a task.

Wikipedians would argue that they exercise the same level of discipline as professional researchers at professional knowledge institutions. That may be true, but that still leaves the issues of training and trust. Let me outline the differences between the historian's and the Wikipedian's documentation processes.

How a historian writes an article

1. The historian sees the need for clarification or answers to a particular question.
2. The historian compiles data from hundreds of archives and other sources.
3. The historian summarizes the data in a concise, professionally written article.
4. The historian submits the article to his peers for review.
5. The article is thoroughly checked for factual correctness.
6. The article is published in a well-respected and trusted magazine or website.

How a Wikipedian writes an article

1. The Wikipedian sees the need for clarification or answers to a particular question.
2. The Wikipedian either compiles data from hundreds of archives and other sources, or cobbles together data from memory and questionable websites.
3. The Wikipedian summarizes the data in a concise, professionally written article.
4. The Wikipedian submits the article to his peers for review.
5. The article is thoroughly checked for factual correctness, most likely by reading other articles on Wikipedia.
6. An army of other Wikipedians pore over the article and change it until everyone agrees on a finished version.
7. The article is published on Wikipedia.
8. A teenager edits the article, replacing each proper noun with the name of a professional wrestler.

To summarize, there are times when group wisdom doesn't always prevail. One such time is when authority is just as important as content, and Wikipedia is a prime example of questionable authority.