Increased usability
Usability - what is it, and why does it matter? According to Wikipedia, usability is:
a term used to denote the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal.
From a website perspective, usability refers to the ease in which people are able to navigate, interact, and browse a website. Without strong usability, a website is destined to fail. Although there are a number of reasons why usability is better with CSS than with tables, we are just going to mention a few for the sake of time.
Printer-friendly style sheets
CSS enables the web designer to serve different style sheets for different media types - one media type in particular is a print style sheet (media="print"). On table-based layouts, oftentimes the user will be forced to click the "Printer Friendly Version" on each article that they wish to print. This can become cumbersome, especially if a user prints a lot of material on a website.
CSS skips the "Printer Friendly Version" step all together and will serve up a printer-friendly version of an article or web page simply by instructing the browser to print via the File menu. No more searching the website for "Printer Friendly Version" buttons. No more having to be online to print article. As a matter of fact, once the print style sheet is downloaded, it is stored within the browser's cache (stored locally on the user's computer) and the printer-friendly version can be printed offline, using the parameters contained within the cached print style sheet to format the document to be printed accordingly.
Faster page downloading with CSS
As we explained earlier, table-based layouts take longer to download. Because the information on each page is independent from all of the other pages within a website, table-based layouts must be downloaded over, and over, and over again. CSS-based layouts, on the other hand, cache the style sheet information the first time a web page is loaded; therefore, it is only the unique content that is loaded on each page, which makes CSS-based web pages load much quicker than table-based web pages.
Here are a few other reasons why page loading is slower with table-based layouts than with CSS-based layouts:
- Browsers read through tables twice before properly displaying their contents - once to determine the structure, and once to determine the content
- Tables only appear on the screen when the entire table has been downloaded and rendered
- Tables are choked full of spacer.gifs (see No spacer gifs) which further bloat a web page
Users hate waiting for web pages to load. If they have to wait too long, then they may decide to leave your website and find a quicker website with similar content. From a usability perspective, CSS-based designs are much more usable than table-based designs simply because users generally don't have to wait as long for a page to be loaded.
Plain and simple: a faster download speed leads to increased usability, which, according to a study by Jakob Nielsen from useit.com, can increase your web site's sale/conversion rate by 100%. Need we say more? As a matter of fact, yes, we do - Just say "NO" to table-based designs!