Of course I am an avid World of Warcraft player or I would not have run across the site for their new expansion. I had noticed before that several of the World of Warcraft sites ended in .xml and the I didn’t think to go digging until I saw the page at http://worldofwarcraft.com/wrath/features/dungeons/utgarde.xml. I decided to document my trip through the front-end and possible some back-end code that makes up this amazing site.
From this XML page we don’t know what back-end language is doing the XML / XSL transformations but lets dig a little deeper by taking a look at that style sheet listed at http://www.worldofwarcraft.com/wrath/layout/dungeons.xsl. The content is loaded around line 63 from http://worldofwarcraft.com/wrath/strings/en_us/strings.xml and http://worldofwarcraft.com/wrath/strings/en_us/features/utgarde.xml.
Getting deeper into the layout site of things this stylesheet defines a particular page layout for the Wrath of the Lich King website. This page is using repeating elements from outside sources so we don’t have any content in this document. Right at the top you see our next step to dig deeper into how this site is being prepared. The XSL is importing another document with general elements for the site that are used across all pages from http://www.worldofwarcraft.com/wrath/layout/global.xsl.
The global.xsl is defining several of the sites reusable elements. It is extremely well commented and arranged. One issue I have seen is the doc-type that is listed was not actually put into the output of the page as show from my Web Developer Toolbar for Firefox View Generated Source tool. The usage of inline style elements is disappointing considering how good the external CSS files are. The W3C validator complains about the lack of doc-type, Flash elements and missing alt tags.
World of Warcraft: Wrath of the Lich King
...
...
Moving on from the layout code to the CSS I am again impressed by the usage of language specific css files to define the background-image elements that have different text on them as shown in http://worldofwarcraft.com/wrath/css/en_us/language.css. The master CSS file http://worldofwarcraft.com/wrath/css/master.css shows a little usage of absolutely positioned elements and negative margins which in some cases is considered a crutch in layout but in all of the ones I check in this page it was needed. Again there is top notch commenting and arrangement of the styles that makes it all extremely friendly to read. The CSS validator lists a few errors that are obviously browser specific hacks but nothing out of line.
Performance of the site isn’t terrible but the initial page load comes in at a hefty 532.4K total size. The Flash files have been optimized well but most of this weight is in the images with a grand total of 419.6K. After this initial loading though subsequent pages have a very minimal impact with a primed cache.
I wasn’t able to discover though my digging just what the back-end XML/XSLT transforming platform was but it seems to be very good. I would recommend this and other World of Warcraft sites to new and seasoned developers as an example of excellent front and back-end development.