Personal Experiment: Web Standards Conversion - Siemens.com

I’ ve just finished rebuilding the home site of siemens.com using the Web Standards approach. In this case Web Standards signifies building a web site with a total separation of content and presentation, using XHTML to structuring the content and CSS to format the content. Web Standards also means the use of semantic structure in the web document, which can be done by surrounding the content with an appropriate mark up like H1, P, list instead of meaningless mark up like table-tr-td. It also means to lay out the site correctly, as one should already know that the table exists in order to structure the content tabularly- not to lay out the whole site. See the result page first (if you can’t open the link put this into address field (http://intra.sc.siemens.com/mis/wahyudi_lab/siemens3.htm) and see the source behind the page and then compare with the code of the live version at siemens.com.

The main aim of my experiment is to make a comparison between the outdated method and the Web Standards method, and then to see the general benefits and company specific advantages. It also provides a basis for a further feasibility study regarding the use of this technology for siemens.com and within the siemens intranet landscape, if anyone is interested in that topic.

This experiment went through the following preparation phase:

Removal of some HTML tags:

That kind of code is meta tags, code block within comment block, hidden form field and other form elements e.g. I removed almost all of the selection of the country selector on the right hand side.

Removal of the JavaScripts blocks:

I’m not really sure what some JavaScripts blocks really do, but I took out all the JavaScripts blocks, because I don’t use it in my experiment.

Count tags that are typically used in the old-school method:

I counted the code, which in my opinion were incorrectly used, like the table to layout the site, table for structuring the content, and also the elements that were incorrectly used like a transparent image to fill an empty space.

Browser compatibility:

I’ve tried to view the site through many different browsers and operating systems to see the differences between them.

File size measurement:

The final step is to measure the size of the file and examine the differences between the old and new site. I also calculated the bandwidth usage with a very basic method: pageview x file size. I try to be fair in this case. I took out the codes that I don’t use in my code, but I didn’t take out the codes that have the purpose of formatting the content despite the inappropriate use of some code e.g. I found a style block within the body and outside the head, this won’t work at all.

Pages: 1 2