CSS-based Microsoft.com

I believe that every last one of you reading this page have read Doug Bowman’s Throwing Tables Out the Window and wondered what exactly he did to make microsoft.com CSS-based. I know I did.

Doug did not want to release the makeover code without speaking to Microsoft first. I don’t quite dig that, since there were numerous make-overs done in the past, with open-hearted approach. I doubt that someone will spend a weekend re-doing anyone’s web site simply to rub-it-up-their-nose. That’s stupid thing to do.

I wanted to test my knowledge and skills and see how quickly I can do this. It might prove useful when price-quoting similar job in the future.

Without further a do, here is the final result.

I don’t intend to explain every part of this, I just want to emphasize some of the most interesting issues.

First things first: I simply did the recoding and barely touched the IA. Don’t look for changes in that area.

Code clean-up and organization

I did the save complete page in both Firefox and IE6, so I could have an offline version for reference. I saved the home page on Aug 16^th and build on that; IE6 version was 55kB in HTML, while Firefox version was 40.5kB.

It took me good few hours to clean up everything and add proper markup, which lead me down to 13kB. I have left out a great deal of IDs, which would probably need to be put back. They are either used for tracking purpose or inserted by .NET for server-side processing thus being integral part of the technology used. They could probably add additional kB or two. A hefty 60% saving.

When it comes to code organization, I’ve done the usual thing for me. I’ve left the top area where it is, followed by middle column, right column and the navigation and legalities at the end.

I also added several headings so page makes sense when viewed non-styled. The chosen heading text for each section tells the reason why I ordered the elements in the way I did. Highlights, then Be productive with, then today’s news (which are essentially not news), then rest of the right column.

I was wandering how to logically separate actual page content from navigation. I could add Navigate our site as h2, but that did not seem right. Then it hit me, the element I did not use for a very long time. The good choice here is hr – it divides things well enough.

Three columns

It looks like simple one, but I found it is not; this is a very tricky layout to do, if you want to do it properly. I built on the code above and added quite a bit of divs as design hooks. I started from this layout, which was close enough but was more suited for liquid layouts.

The process of making it right took me more time then I expected, mainly because all the columns had to have precise widths, and to touch each other. I could not make any assumption as to how long each column is, so I needed a safe approach. I modified the starting CSS quite a bit, and eventually managed to make it work everywhere but IE5/Mac. Here I had to resort to absolutely positioning the left column.

I did this over the course of several days (as free time allowed), but I estimate that it took me at least 6-8h to replicate the design.

For the flyout menus, I used csshover.htc from Peter Nederlof and moved the IE/Win-only code to conditional comments.

I welcome any code improvements (both markup and CSS). It is not perfect. In Safari, footer won’t go below the columns. In Opera 7.5, first list in the footer is strangely shrinked. But I don’t have time to try different things. If I used pos:absolute for the left column, each browser of importance will have identical design. But then it would depend on left column not being longest. I deliberatelly chose the hard way and almost got through.

Unlike all other works on this site, I’m releasing this code as public domain – use at your will. I would be happy to see people perfect it.