Rewriting Slashdot with Web Standards
A List Apart has issued an article about rewriting Slashdot with XHTML and CSS standards. It is pretty interesting because it is very much a case study about how to convert an existing web site into a validating site.
Thus, menus were converted everywhere, tables for layout have been replaced by divs, a CSS style sheet has been applied and the result is pretty stunning:
- Savings per page without caching the CSS file: ~2KB per request
- Savings per page with caching the CSS file: ~9KB per request
Though a few KB doesn’t sound like a lot of bandwidth, let’s add it up. Slashdot states
that they serve 50 million pages in a month. When you break down the
figures, that’s ~1,612,900 pages per day or ~18 pages per second.
Bandwidth savings are as follows:
- Savings per day without caching the CSS files: ~3.15 GB bandwidth
- Savings per day with caching the CSS files: ~14 GB bandwidth
The result can be seen here, as well as this page with the same XHTML code with a brand new CSS style sheet – uugh, ugly titles, though.
Pretty interesting because it shows the process for rewriting pages to convert them:
- Clean the code by removing the useless tags as well as deprecated ones;
- List’em all: “Essentially, anything that there was more than two of was put it into a list, for example: login, sections, help, stories, about, services, etc.”
- Give structure to the document by using headers (<hn>);
- Organise the layout thanks to boxes (<div>) by
a) grouping semantically the contents and
b) positioning them; - Add the final designing bits, such as pictures, fonts, colours, etc. ¶
