Example: Replacing Tables and Transparent Images with CSS
This is a simplified example of a navigation menu found on the website of an academic institution:
We've taken this example and produced an identical low bandwidth version:
The layout of the first example was achieved using a table and scaled transparent images to space out the text in the menu. The table and images make up a large bulk of the HTML:
<table width="580" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td bgcolor="#ebeadc"> <a href="#academics"><img src="spacer.gif" border=0 height=14 width=10>Academics</a> <a href="#admissions"><img src="spacer.gif" border=0 height=14 width=10>Admissions</a> <a href="#library"><img src="spacer.gif" border=0 height=14 width=10>Library</a> <a href="#directory"><img src="spacer.gif" border=0 height=14 width=10>Directory</a> <a href="#administration"><img src="spacer.gif" border=0 height=14 width=10>Administration</a> <a href="#alumni"><img src="spacer.gif" border=0 height=14 width=10>Alumni</a> <a href="#computing"><img src="spacer.gif" border=0 height=14 width=10>Computing</a> </td> </tr> </table>
The markup can be simplified by replacing the table with an unordered list as follows:
<ul class="navigation"> <li><a href="#academics">Academics</a> <li><a href="#admissions">Admissions</a> <li><a href="#library">Library</a> <li><a href="#directory">Directory</a> <li><a href="#administration">Administration</a> <li><a href="#alumni">Alumni</a> <li><a href="#computing">Computing</a> </ul>
and styled appropriately:
.navigation { background-color: #ebeadc; } ul.navigation { list-style-type:none; padding-left:0; width:684px; margin: 0 auto 0 auto; } .navigation li { display:inline; padding:0; } .navigation li a { padding: 0 0 0 10px; }
This reduces the size of the HTML from 724 to 305 bytes, a saving of more than 50%. The additional data in the style sheet is 238 bytes, but this can be cached and shared between pages, so the average cost is lower.
If you already had a style sheet in the page and you eliminated the use of transparent images entirely, you could save one HTTP request (and one round trip's delay) as well.