¶ Following on from Doug Bowman’s recent article on potential bandwidth savings for Microsoft, in which he recounts using CSS to rebuild Microsoft’s home page, I’d like to restate here the points I made in my Ten Questions interview with the Web Standards Group. I talked about the real life benefits and savings we made at Multimap having switched from a table infested layout to CSS:
WSG: I have heard rumours that you have just launched a new-look Multimap. The obvious question – is it built using web standards?
RR: Yes it is, but to be fair it used Web standards beforehand in as much as it validated. We’d got as far as removing all the font tags but the site was still chock full of nested tables and the usual non-semantic mark-up that you would expect to be inherited from a few years ago. We rebuilt the site using meaningful mark-up for two big reasons: ease of maintenance and bandwidth reduction.
The templates used throughout Multimap.com are constructed from heaps of server-side includes. Making changes to the site was a tricky business as any given include might contain one table inside part of another table. Now all the includes are really simple: most just have a div with a proper heading and a list. We’re already noticing the increase in speed with which we can make changes. The move to meaningful mark-up has eased this surprisingly stressful part of the job.
As for bandwidth, roughly speaking Multimap.com serves 4 million pages a day. On average, the HTML of the old site weighed in at 65kb per page. The new site pages are half that at 35Kb. That’s a saving of 40,000 Gb of bandwidth per year! I’ll leave you to translate that into money, but I can tell you the move to Web standards paid for itself within a month.
My final statement regarding the bandwidth (and hence money) savings did not quite pan out as expected. Bandwidth consumption has certainly decreased with the declining page weight but not by the proportion we were expecting. What actually happened was that people starting using the site more. It seems the faster pages (both in terms of bandwidth and rendering) resulted in more page views as people panned, zoomed and searched significantly more than they did before. So not only did the switch to CSS layout save Multimap money, it made Multimap money (page views = banner ad impressions) and quantitatively improved people’s experience (more page views per visit).
Comments
1
I have often found that a standards-based redesign does not reduce bandwidth usage very much for another reason:- When redesigning with standards in mind, developers often add extra markup to comply with accessibility needs, and other markup to give extra semantic meaning. Exchanging FONT tags for accessbility is just fine with me.
2
Before I say anything, with all due respect to the design of this page, but the form fields only have a background color specified and no front (text) color. I’m now typing in light gray on almost white, and it’s very hard for me to read what I’m saying. Think you could perhaps add a color: #000; to the CSS? :)
Anyway, to reply to Simon Jessey: as much as people may add more markup for accessibility purposes (proper alt and title attributes, etc.) – on the whole, when switching from a table-, font- and image-filled (X)HTML page to a clean and well-formed (X)HTML page, there is nearly always a reduction in total page size. Especially the removal of nested tables and fonttags has an effect, no matter how much “additional” markup for accessibility you add. Usually the markup you add actually replaces old markup, so it’s not really adding at all:
<font size=”7”>Some big header</font>
<h1>Some big header</h1>
More markup? I think not. And it IS more meaningful and accessible.
3
I’m definitely going to refer to all those interviews of you, Bowman and the likes to convince my clients that Web Standards really are important, and in the end saving you lots of money. And making it too, as you showed.
4
Impressive statistics! And the reality is that multimap is much better than it was :-)
5
For Simon Jessey:
Additional HTML for accessibility in a standards compliant site is fine. Off set that against all that the nonsense removed in a table-based layout, and it is fine to have this extra (important) code. The savings can still be massive.
6
This was a fantastic article that really helped in my research on web standards – this is something my clients are going to be hearing more about.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.