Personal Experiment: Web Standards Conversion - Siemens.com

The Result

The result of the rebuilding shows some big differences, not only in the way the site is built but also in terms of file size, compatibility and cost saving. For the compatibility I tested the new site and the old site with the following browsers: IE 6 PC, Netscape 6 PC, Firefox PC, Safari Mac, IE 5 Mac, Camino from Mozilla for Mac, Firefox Mac, Netscape 7 Mac. The table below shows some facts after rebuilding.

The new site is displayed correctly in the browser and operating system I mentioned above. Compared to the new site, there was an incompatibility when I opened the site with Safari on Mac OS X and IE 5 for Mac. The new site has no formatting tags on the spot, because it is really separated from the structure. The recent site has 105 styles formatting with CSS written directly on each content that need to be formatted. It is just like when you use the HTML FONT tag to format the font. This could happen because the content author formatted the text with the content management system that has editor toolbars as we used to see in application like Microsoft word. It is easy to change the color, size and style using that editor but it produced really bad code. The second assumption is that the web developer creates the content in HTML editor like dreamweaver or frontpage, since the content management system used for that site doesn’t allow any kind of change within block, so you cannot put or linked a CSS file. Because of that, you have no choice but to write the style formatting script directly around the content. That is what I did for the CIO Americas intranet, since the headquarter Web Master did not want to know about any kind of linking possibility to a CSS file whatsoever. For some reason, I could not use the editor toolbars when I had to change something on the CIO AM site, so I what I did is, I first copied the code, and then edited it with dreamweaver, before I pasted it again into the content management system editor window to save it. Yes, I had to write all the style codes directly on the content. Yes, it was really a pain, but I did that because I knew that someday they will change the way they create those sites, so somebody will just have to take out the style code and save it in a separate CSS file. Since I didn’t use any tables, it can save some time, if they convert it so that it complies with the Web Standards someday.

The bandwidth difference can turn everybody’s head. The huge savings on the new site is only possible with a consistent separation of structure and presentation. The number of pageviews I used was not the number I got from siemens.com web master so it is just an example. The file size is only the HTML size, I excluded the image file calculation.

Further consideration should be placed on making this concept work for the other sites under siemens.com. Throughout the entire site, most of the differences are found in the content area. It takes place in background color of the boxes header, or the key visual on the top of the content area. This can be solved by breaking down the CSS file in a kind of CSS for global purpose and for local purpose. Global purpose means that it handles all kind of formatting used in all sites. The local CSS file is dependent on the needs of each specific site.

For a company like Siemens, implementation of the Web Standards means a basic change on its content management infrastructure. I would start with a conversion of the site structure into Web Standards compliant structure, and that means a tableless site layout. This step provides the room for all content defined by the corporate web guidelines: room for the header where you put the language selector, key visual on the top left, logo, generic navigation, navigation, left area for sub navigation, main area in the middle, etc. The editor tool in the content management system should support the separation of content and presentation. An editor toolbar is really nice to have, but it should produce Web Standards compliant code. Maybe this editor should only produce plain text, since the place where that text comes in already formatted by the CSS.

I’m sure that the technical implementation of this concept is feasible, well unfortunately sometimes more feasible than the task of persuading the company to make the change.

Pages: 1 2