Why Use CSS?

By Posted in - Web Design Tips on June 11th, 2009 0 Comments

When I first started web designing around 2001, I always designed my sites using tables. The reason for this is simple: at the time, browser support for Cascading Style Sheets (CSS) was limited, and as a novice designer, I found tables easy and quick to implement. In the past couple of years I have finally made the switch and now design entirely with CSS. (with maybe a table or two sprinkled throughout) For those who have used CSS for any amount of time, I am sure you are thinking “What took you so long?” For others,you may not be intimately familiar with the benefits of CSS. The reasons to use table-less design can be divided into three main categories: Flexibility, rendering and accessibility.

One thing I always hated about designing in tables is that if a client requested a small change, I would have to go in and change every page. For small sites, this was a minor irritation, but for huge sites, the small change became a time-consuming ordeal. When I finally learned I could make one change to my entire site through the use of one simple style sheet, I was in design ecstasy. If I need to make a color change on 50 pages, I can do that in 5 seconds flat with css. Obviously, designing in CSS offers flexibility that in the long run, saves time for you and money for the client.

Until I started designed in CSS I never realized that the traditional table-based layout is one of the primary causes of slow-loading pages. This happens because the browser, upon receiving the page from the server, must first examine and “understand” the complex array of nested tables. When you use CSS, the browser can immediately begin loading because there is very little markup in the page. Also when use an external style sheet, the first page of the site prompts the browser to cache the linked style sheet files that the page uses. This means that all the other pages in your site that uses the same style sheet will load even faster, since the browser has already cached the style sheet. When you begin to decrease the amount of code the client needs to download, the page loads faster and thus makes the visitor (especially someone using dial-up) a very happy camper. This also makes the search engines happier as less junk markup makes it easier for SEO spiders to decipher between code and content.
Accessibility is a popular buzz word that has been of major importance for government and educational institutions over the years. Assistive technology such as screen readers for the visually impaired, face an incredible challenge on how to read a table based layout on a web page. But with CSS, the only thing a screen reader encounters is actual content. The screen reader can navigate quickly and effectively through the document and not have to decide when encountering a deeply nested table whether it should read the content or not. If you want to check to see if your site has accessibility issues go to www.powermapper.com and checkout their free 30-day trial. Their tool will find and fix issues by making sure your site complies withWCAG1, WCAG2 and Section 508 accessibility guidelines as well as check against research based usability.gov guidelines.

Although tables have become passé, I am not a table hater. Tables are still great for displaying tabular data and some form layout. A CSS expert I am not , but I can’t help but have this strong desire to redesign my past clients’ “table-predominant” websites and introduce them to the happy world of table-less design. CSS is nothing short of a small miracle and if you haven’t already, you should consider changing your coding practices and make the switch. If you do, you’ll never look back.

Please leave a Comment