Microsoft.com Redesign: A Web Standards Showcase

You learn by doing. Learning, then doing. This maxim holds true in web development just as well as in all walks of life. We talk about web standards. We need to practice them. We need to try. Make mistakes and try again.

For quite some time now I wanted to undertake an ambitious project here, on this site, of redesigning some well known, extremely busy yet poorly designed site to clearly show the benefits of Web Standards (CSS, ECMAScript, XHTML, DOM). I wanted to do it for educational purposes.

My search for such a site didn't last long. I've made Firefox my default browser, and I use Opera on a daily basis. When I visited www.microsoft.com in Firefox and then Opera I realized right away something didn't sit right with the site. All of a sudden the fancy navigation on Microsoft's home page seized to work, product images disappeared and the whole page looked crippled. Out of curiosity I checked Microsoft's home page in Internet Explorer 5.0 and 5.5. IE 5.5 handled it ok, but in IE 5.0 the site fell flat on its face. I thought this was rather strange that one of the busiest web sites in the world would slack so bad and single out users of only two(!) browsers both being Internet Explorer, arguably the worst browser.

I thought this was my perfect candidate for the exercise.

Terminology

Before we move on let's define and agree on some terminology.

• Internet Explorer will mean Microsoft's web browser for Windows. Yep, there's an Internet Explorer for Mac and it was developed my Microsoft. I will refer to the Mac one as IE/Mac. Otherwise I'll be simply referring to it as IE, occasionally as IE/Win.
• Firefox shall mean Mozilla Firefox, ver 0.9 as of the time of this writing.
• Opera shall mean Opera Software's web browser, ver 7.50 as of the time of this writing.
• The page shall mean "the home page of Microsoft.com" which is what we'll redesign.

Software Prerequisites

To follow this exercise I recommend you download the latest Firefox or Opera, or both. Not a must, but you'll gain much more appreciation for this project. Unlike IE, you can uninstall Firefox and Opera at any time. Another good reason to view our progress in Firefox is that it colors HTML source code nicely.

Note: when installing Firefox or Opera don't let them take over file associations if you don't plan on keeping them around later.

Skill Prerequisites

I'm not a self-proclaimed web design guru. Or a CSS guru, for that matter. I'm still learning. I'm inviting everyone, regardless of experience, to join this quest. I run into trouble with CSS once in a while, so your can do your part by helping out.

Disclaimer

Employees of the Microsoft Business Prevention Department (aka lawyers) need not apply. Microsoft and Internet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries where it achieves market penetration by encouraging piracy of Windows. This redesign showcase is simply an educational exercise.

Game Plan

Anyway, this is going to be a "series" of posts spread out over a week or so. We'll take the redesign effort one step at a time. Please spread the word. The more participation we get the better.