CSS in, Tables out!
An important day for me at AOL Brasil: the home page was being updated to use only CSS for design purposes. At that time, March 2004, the term ‘tableless’ was not coined yet – nether the term ‘AJAX’.
My work was far away from validating in any doctype you could try… but it changed forever my way of making sites. Despites of all the ugly things I certainly did in this html and css, I need to highlight the use of an incredible technique – at that time with no name at all – today called ‘CSS Sprites’.
Below, what I thought when I launched this homes:
There are several reasons to separate content from its presentation. Until now, making a good looking website was impossible without using lots of table tricks, lots of sliced images and so far… all those things represented “noise” in your code, redundant Kbytes the user downloaded each time he accessed the site. But Internet changes fast. Once more we are facing an important change on how serious developers make websites: CSS became very powerful and our markup can be really conceptual despites of its presentation demands. Also, having the “layout” in a separated CSS file, for example, allows faster page download, once the layout can be already cached – while the real content, which changes all the time, uses far away less code.
Of course, new paradigm brings not only advantages: it represents challenge also. Making a complex website design, such as in a web portal’s homepage, using only CSS is not easy. That’s why I am proud to show these two pages here: they were rebuilt from their original “table” layout, going “no-table” using only modern CSS techniques.
By the way, this very page you are reading also doesn’t use tables for layout purpose – it’s all CSS. Take a look at the source and search for “table”.
Important: design concept on these two pages is not mine. My work is the CSS research, HTML & CSS coding as well as methods for reducing the amount of image hits used to construct the look.
Tags: CSS Sprites
