The following is an example showing the different stages in converting a web page into a web standards based page. In this example we will utilize the Slashdot web site. This is not a 'stab' at Slashdot, nor are we stating that the way they make their page is 'bad'. Rather we are just utilizing a popular site among technology people to show the different stages in web standards, and how they can be applied.
In fact, we asked Rob "CmdrTaco" Malda, the guru behind Slashdot, for permission to post this information, and he stated in his reply email:
"Have fun. Feel free to submit patches back to us if you come up with anything useful. Slashdot's source code is open source and available at www.slashcode.com."
To do this excercise, the Slashdot index page was copied (including images) on Tuesday July 22, 2003. This way, the example can show a static version of the page 'frozen' in time.
There are multiple steps and files in this example, so to begin with you will need to download the slashdot.zip file. The best way to understand this example is to download the zip file and dig through the source code of each folder. In this file, you will find four folders:
The old Slashdot design is built without web standards in mind, utilizing HTML 3.2, tables for layout, and using no CSS. This is not bad, but this example is to show how web standards can be applied to a web site to give a greater benefit. So the changes that need to be completed to follow web standards are shown in their evolutionary steps in the remaining three folders.
The first step in any transition is to remove all of the non-standard HTML code (see the second folder). After the presentation code has been removed, then appropriate semantic XHTML tags are added (see folder three). Finally the CSS file is applied to reconstruct the web site using web standards. This is not meant to be a code walkthrough, so if you have questions regarding specifics of the code, please see the Web Standards reference links to begin your journey.
The page will render correctly in browsers, just as it did before. It will also 'fail gracefully' for non-standard browsers, so the content is still readable, but it just isn't as pretty (essentially applying no CSS). It is cleaner and much more predictable with screen readers. It also works correctly with PDA's and web phones by having the CSS fail, with no horizontal scroll bar! There is also a printer friendly version of Slashdot using CSS. The biggest benefit of this particular example is the bandwidth savings:
Though a few KB doesn't sound like a lot of bandwidth, let's add it up. Slashdot states on their web site that they serve 80 million pages in a month (http://slashdot.org/faq/slashmeta.shtml#sm300). So when you break down the figures, that's ~2,580,650 pages per day or ~31 pages per second. So when you use their figures to show bandwidth savings it breaks down as follows:
Remember: this calculation is based on the number of pages served as of 7/12/04. I believe that Slashdot's traffic will continue to grow.
Most Slashdot visitors would have the CSS file cached, so we could ballpark the daily savings at ~10 GB bandwidth. A high volume of bandwidth from an ISP could be anywhere from $1 - $5 cost per GB of transfer, but let's calculate it at $1 per GB for an entire year. For this example, the total savings for Slashdot would be: $3650! All of that for just a couple of KB.
The INDEX2.HTML example demonstrates the power of CSS and web standards. In this example, we didn't change any of the XHTML. All we did was apply a different CSS file, and we were able to swap the left and right columns, change the colors, and apply a background image to the page. The entire site has the benefit of a quick modification from a single CSS file. This make redesigning, or tweaking of a web site much more convenient and powerful.