Saturday

Tableless CSS Design

Have you ever tried to copy other websites html by selecting "Viewing Source" in your browser, and copy all the codes into your WYSIWYG editor (e.g. Macromedia Dreamweaver). Then you realize that, the presentation logic is not in the code. So where could it possibly be? Doko, doko?

It has been advocated many times that tables shouldn't be use in HTML for layout purposes. HTML is a structural language, and it should then only be used to format data into a table to relate columns with rows. Instead of HTML <table>. So why Tableless?

Speed and Cleanliness: The raison d'etre of CSS is to pull all that style and appearance junk out of the HTML and put it somewhere else, leaving behind squeaky clean, beautifully simple source code that loads fast and edits easy. Tables, it is argued, are like two-year-olds ... they're only going to get but so clean.

SEO:
Content can be first in the source, and is therefor spidered first. How much diff. this actually makes is still (and may always be) under debate. CSS-P also takes as it's default that the source code will be semantically a-okay, which is good for Google.

Updateablility:
Some major design revisions become a matter of minutes using CSS-P, while they can take much longer with tables since the table may have to be completely restructured.

Accessibility:
Since CSS-P allows for a lot of freedom in source code location of each element (but not total freedom), it allows you to structure your page content in a way that can be much more accessible to screen readers and unstyled browsers. The linearity of the source code is a major issue for how page content is presented to blind users through screen reader software. It's not impossible to linearize a table-based layout (I understand it's not even hard), but it does require some forethought while CSS-P is sort of natuarally linearized.

"Everyone" is Doing it:
There is something to be said for the fact that CSS-P is where many/most/some of the bigwigs in the industry have headed. Lots of the designers with "name recognition" are strong supporters of standards-based design, which, among other things, involves useing CSS to layout the page. The standards serve as a way to (try to) acheive uniformity across browsers and platforms, which I, for one, think is a GOOD THING.

Next topic, I will discuss about the tool to ease you in developing a tableless/css website, plus some references for you to learn tableless web-page design. Bye bye.

No comments: