CSS vs Table layout: code size comparison
On June 12, 2002 I became aware of the Yahoo beta front page through the Daypop Top 40. Upon seeing the site, I immediately thought, "why, the design of this layout suggests that this could have been made using style sheets!" A quick glance at View Source revealed to my disappointment a mess of tables.
Just a few days before, a css-discuss subscriber had asked about how to 'evangelize' for CSS, and Eric Meyer had suggested doing a size comparison test, to see whether designing in CSS allows you to write graphically equivalent but smaller code. Eric also mentioned that he had done this once and obtained positive results, which he then shared with the list.
This inspired me to do a redesign of the recently unveiled Yahoo beta page. IMPORTANT: THIS ONLY WORKS IN THE MOZILLA BROWSER. It was designed and tested in Mozilla 1.1a, probably the most up-to-date standards-compliant browser.
| HTML | ||
| tables | 43,177 bytes | 100% |
| css | 21.664 bytes | 50.2% |
| HTML + linked CSS | ||||||
| tables | 43,177 + 0 | 43,177 bytes | 100% | |||
| css | 21,664 + 4,568 | 26,232 bytes | 60.8% | |||
(it's tabular data!)
Links:
For comparison:
It's not pixel-for-pixel perfect, but it's close enough. On a semi-related note, obsessive web designers who treat their own idea of what the website should look like are in for a disappointment with CSS. Remember: the user has final control anyways.
I found myself using the two pseudoclasses :before and :after to insert commas, dashes and ellipses into the lists to emulate Yahoo's seperators.
While making this page, I relied heavily on lists for structuring my data. After all, what is a directory but a giant list of items? In consulting the HTML 4.01 Specification I learned about definition lists, a cool piece of HTML that I had never heard of.
<dl> <dt>micah</dt> <dd>that would be me</dd> <dt>aaron</dt> <dd>my brother</dd> <dt>annie</dt> <dt>ani</dt> <dd>my sister</dd> <dt>laurel</dt> <dd>my second sister</dd> <dd>a tree with fragrant leaves</dd> </dl>
yields:
Definition lists can handle multiple terms and multiple definitions!
I made the page validate in HTML 4.0 Transitional because Yahoo! chooses not to quote many of their attributes. If you can write a script to do it (or have a lot of time to hunt and peck) you are more than welcome to.
ta-dah! by Micah Sittig in html and css, last updated 2002.06.16