When I look back at the code behind some of my earlier sites I am shocked by how bloated and downright ugly it is. I cringe at the nested tables, I wince at the liberal use of spacer gifs and am I embarrassed by my poor use of CSS.
Consequently, I have decided to go back and redo some of these sites to bring them up to a respectable level of web standards compliance, with the side benefit of making some presentational improvements as well.
An Old Client
My first project has been an old client, Concrete & More. I haven’t touched this site in ages, so it was a treat to go through the pages and rip out all the tables and replace them with some good old (largely) semantic code.
Concrete and More website before:
Concrete and More website after:
Minor Design Improvements
From a design standpoint, I didn’t change a great deal as you can see in these before and after shots of the home page:
The Benefits
The real benefits of redesigning with web standards, however, can be seen when you compare the page weights of each version. I ran each home page through the Web Page Analyzer.
Here’s what it showed me:
| Category | Old Page | New Page | Change |
|---|---|---|---|
| HTTP Requests | 17 | 6 | -65% |
| Page Size (bytes) | 50872 | 20551 | -60% |
| HTML (bytes) | 8648 | 4017 | -54% |
| Images (bytes) | 38274 | 15129 | -61% |
| Javascript (bytes) | 2370 | 1072 | -55% |
| CSS (bytes) | 1580 | 333 | -79% |
| Total Images | 13 | 3 | -77% |
| Download Time – 56k (seconds) | 10.34 | 4.30 | -58% |
I had expected that I would be optimizing the site to some degree by making these changes, but 50%+ improvements across the board – I didn’t anticipate these kinds of changes.
Hmm, perhaps there is something to this ‘web standards’ thing after all?
If I had the time (and the inclination) to move this site to an all-CSS design and to optimize the CSS some more, there would be even better gains.
Additional Benefits
Other benefits include increased accessibility for visitors using assistive technologies and also (I assume) for search engine spiders.
Hence, I expect the new site to achieve better search engine rankings. Of course, I can’t tell that at this point, but I will monitor for any improvements.
Overall, not a bad result for a few hours work.