Foreword
Around tuesday evening, April 11th, I was bored like all the time, surfing through my standard bookmarks. Since I had a download as well, it wasn’t that fast, site loading was very slow and so on. What really bugged me was the fact, that on about 30% of the sites I had to wait until they’re fully loaded to show me the whole content. If your guess is that these websites are still using table based layouts – then you’re right. Just out of curiosity, I started to check every website for their layout – and was quite surprised that spiegel.de, a very popular german news site, is still using them as well. So, my interest was definetely there.
The “victim”: spiegel.de
I guess your not familiar with the german language, otherwise you would be reading the german version. So here’s some information: Spiegel is a weekly newspaper in Germany, and a very popular one too. While others decreased in their popularity, Spiegel remained their standards – which is also true for the content of spiegel.de, updated almost every time I visit their site (which is about every 60 minutes), the layout is generally pleasing and kept throughout the whole site. I don’t have exact numbers, but I guess they must have 100.000 visitors at least every day.
Although I’ve worked on a german site, it’s no problem if you don’t understand a word. After all, it’s not about the content today!
The technique behind spiegel.de
I contacted the webmaster to give me some informations; unfortunately, he wasn’t able to write an answer, so I just have to do some guessing. As stated in the source code, spiegel.de is using Vignette StoryServer 5.0. A little googling gave me the information, that the product is not anymore developed and was abandoned somewhere around 2000 respectively merged into a new product line by Vignette. The only thing I could find out is that StoryServer is some sort of RDBMS, and I don’t know if it has a built-in webserver or parser.
The site
Well, StoryServer outputs oldschool table based layouts – and it’s not even good at it. For example, they have three different invisible pixel images, all for the same purpose, all loaded every time. The output is generally hard to digg through, so I didn’t even tried to.
In case you’re wondering, yes, the site is using stylesheets, but only for some very(!) basic formattings, mostly to get some space between elements or to format paragraphs, nothing very special here. Since there is no Doctype defined and there are tags which I haven’t seen before, I can only assume that is has to be something between HTML 3.2 and HTML 4.01. Below are the links to the W3 Validator. The errour count is based on a validation made on Thursday, 13th April, 5:38 PM.
- spiegel.de as HTML 4.01 Transitional (200 errors)
- spiegel.de as HTML 3.2 (418 errors)
I’m assuming that Vignette is using their own products for their web presence, so it’s still not capable of creating a layout with the help of CSS. Just out of curiosity, I checked their site as well; with HTML 4.0 Transitional as Doctype, it produced 60 errors…
Let’s get to work
Okay, enough of the babbling, let’s make the comparison, shall we? First, I took a snapshot from the front page of spiegel.de on Wednesday, 12th April, 7:26am.
- Screenshot of the snapshot (793 kb JPG)
- Source code of the snapshot
Actually, the source code is the one from my hard disk, so every media link was altered by Firefox to match the local structure. Others than that, it’s still the original document.
Then I created the whole page from scratch, using strict XHTML 1.1
- spiegel.de XHTML 1.1 (Validation result)
- spiegel.de XHTML 1.1 (MIME-Type is text/html) (Validation result)
The second version is for browsers who are not capable to render XML documents (*cough* can someone say Internet Explorer? *cough*). Others than that, they are completely the same.
I think the result speaks for itself. If you just had the rebuilt version, you wouldn’t know that there’s a difference. In fact, there are only some minor glitches, but they are hardly noticeable. I have to admit, I didn’t optimized the stylesheet, if you would use it in a productive way, you would change some bits here and there. For example, the middle column has some issues, the pictures are loaded before the headings for example. Turn the stylesheet off and you see what I mean. But others than that, it makes no use of hacks or other nasty stuff and it renders the same way in Internet Explorer, Firefox and Opera.
Also, I reused images whenever possible. The original website had three different versions of the black double arrow – and they all looked they same.
Calculations
The original website comes in at a whopping 466 kb, but keep in mind that there’s more to it than just the layout; JavaScripts – external as inline, two stylesheets and some more images, like the Samsung advertising around the website. Taking this into account and to make a fair comparison, the original website weighs about 330 – 370 kb (95kb of scripts and 20kb of images were subtracted, the result is an estimate).
- Original document: 123 kb
- Original media: ~230 kb
- Original site: ~350 kb
- New document: 40,5 kb
- New media: 138,3 kb
- New site: 179,3 kb
As you can see, the original website is about twice as fat! Does not make any difference you say? Well, take into account that the stylesheet needs to be loaded only once, whereas the table structure has to be defined in every document you want to serve. Also, have a look at how much traffic would be economized (with 100.000 visitors a day as a base)
- every day: 16,6 gigabyte
- every week: 113.9 gigabyte
- every month: 3.4 terabyte
- every year: 41 terabyte
And this is a result almost anyone will notice. Every megabyte produces costs, so it’s generally the best idea to serve the best content with the smallest size possible. Apart from the fact that the new version loads faster, is usable even when it’s still loaded and is easier to maintain, this is the most cognizable fact.
Conclusion
I guess all the writing above is a good example for using web standards. I mean, it’s easy to tell someone all the benefits he can have by using them, but it’s by far the best if the still-not-convinced one has a real life example, a comparison between an old school table layout based website and a fresh, XHTML compliant one.
Unfortunately, this example will remain a case study, as I doubt, that spiegel.de will change their layout in the future. Assuming that they’re using Vignette StoryServer for years, it would be difficult to impossible converting all articles to a new layout or switching to another, better CMS. Too bad.
I hope you enjoyed reading this article. It took me quite some time preparing it, so I would be glad if you leave a comment, even if it states that I’ve written total bullshit.
