Microsoft.com Redesign: The Final Frontier

Posted on June 28, 2004  |  

Posted in Design

4 comments

In this installment of our redesign project we'll finish up the design part itself and assess how well we met our goals and objectives. Just as a reminder, last time we positioned most of our home page "building blocks" and left it all in dust.

As a matter of fact, we're 70% done at this point! We only need to the navigation sidebar, local navigation and the footer.

A huge misconception that you have to use JavaScript tricks for menu rollover effects still lingers. You don't. You can achieve much better results with zero JavaScript. Take a look at Listamatic, a fabulous resource on how to employ lists for navigation. Recall that our navigation sidebar is nothing but a series of lists:

<div id="navsidebar">

 <div class="navgroup">
 <div class="grouptitle">Product Families</div>

 <ul>
   <li><a href="..." title="...">Windows</a></li>
   <li><a href="...">Office</a></li>
   <li><a href="...">Mobile Devices</a></li>
   <li><a href="...">Business Solutions</a></li>
   <li><a href="...">Servers</a></li>
   <li><a href="..." title="...">Developer Tools</a></li>
   <li><a href="...">Games and Xbox</a></li>
   <li><a href="...">MSN Services</a></li>
   <li><a href="..." title="...">All Products</a></li>
 </ul>

 </div>
...

We need to get rid of bullets, position list items one below the other and give them a nice border on mouse hover.

#navsidebar {
    width: 175px;
    w\idth: 180px;
    float: left;
}

#navsidebar ul {
    margin: 0px;
    padding: 0px;
}

#navsidebar li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#navsidebar a {
    width: 166px;
    w\idth: 160px;
    display: block;
}

#navsidebar a:link,
#navsidebar a:visited,
#navsidebar a:active {
    border: 1px solid #f1f1f1;
    text-decoration: none;
    padding: 2px;
    color: #000;
}

#navsidebar a:hover {
    border: 1px solid #999;
    color: #000;
    background: #ccc;
    padding: 2px;
}

The main trick here is list-style: none; to remove bullets and display: block; to stack list, or menu, items vertically. The rest of navigation follows the same idea.

A word about nested menus. The original page had a couple of nested menus. I gave up on them. Two reasons:

  1. The simplicity of navigation doesn't beg for more than one level of menus. Besides, the fact that they fall apart in every browser but IE 6.0 & 5.5 tells me they aren't that critical after all.
  2. I hate dropdown and popup menus. They are a major pain to navigate on a laptop with no mouse attached. Using only a touch pad with those menus is always a challenge. I can score a dozen frags in Unreal Tournament faster than navigate dropdown menus with a touch pad.

The biggest problem with this page was the "highlights banner" image. The one that says "See what programs are in Microsoft Office." What looked perfect in Firefox and Opera was completely screwed up in Internet Explorer. For some reason, IE wanted it floated left which also demanded left-floating of the highlights area. Go figure. As much as I wanted to stay away from CSS hacks, I had to use one to grease IE:

* html #highlightwrap { margin-left: 5px; }

IE was going crazy and pushing highlights too far to the right (I have no clue why). The hack gives it a smaller margin to make it happy. This is one of those hair-pulling moments.

On another occasion a simplified box model hack was needed to help pre-IE 6.0 get the Box Model right. You see it here:

#navsidebar {
    width: 175px;
    w\idth: 180px;
    float: left;
}

IE 6.0 will make the navigation sidebar 180px long, while IE 5.0 will miss it by 5px.

The last bit of implementation I'm going to talk about is the background of the navigation sidebar. Look at the work-in-progress page from the previous installment. You see how far the said sidebar stretches? No, there's no mistake here. All three columns are floated so we don't worry about the footer. But! We need the background to go all the way no matter which column is longer. Dan Cederholm documented an approach he called Faux Columns. This technique is in wide use. Basically, you use an image as a background. That simple.

Assessment

Enough of implementation talk. I encourage you to study the source code to quench your curiosity thirst! Also, all files of this project are available for download. Let's look at the final page and assess how well we've managed to meet our goals and objectives. The reason we started this whole exercise was to demonstrate some tangible benefits of a redesign with web standards.

Web standards are not an end-goal per se. They are a means to an end. They are a vehicle that gets us from messy design to a clean one. Designing with web standards for the sake of standards is kidding yourself.

Size

The original page is 48,677 bytes. The new one is 15,649 bytes delivered raw, or 4,855 bytes compressed. This is 67% and 90% reduction of file size respectively. Given roughly 157 million unique visitors per month it equates to 5 terabytes of bandwidth savings per month! If delivered compressed it's 6.6 terabytes.

Now, if you compare the original and redesigned pages you'll see a chunk of JavaScript missing. The script facilitates tracking link clicks. I see absolutely no reason why this much JavaScript has to travel with the page. If you really want to keep it move it into an external .js file and link it with one line of code.

Also, lots of links had onclick="trackInfo(this);" wired to them for the same reason. Again, you can utilize DOM for these purposes and lighten the page considerably. Therefore my decision to keep JavaScript out stays.

Benefit: immense bandwidth savings; faster rendering (thanks to a no-tables approach); faster downloads.

Browsers

Not only does the page work properly in Internet Explorer 5.0, 5.5 and 6.0 for Windows, I also tested it in Firefox 0.8 and Opera 7.50. Actually, I was developing with Firefox and then tweaked the rest to work in IE. I tested it in the latest Konqueror in my Suse KDE. It looks about 80% right in Konqueror, and I really can't dedicate any more time to tweaking the page further. Anyone up to this task?

How about Lynx, a text-only browser? Compare what it looked like before and what it looks like now. Much cleaner. The clutter is gone. This is what a search engine sees. I'm no Seer And Revelator, but it should come close to how a search engine parses the page.

What about much older, 4.0 browsers? The @import 'styles.css' directive hides the stylesheet from them. We shouldn't rule out users with 4.0 browsers, but they will get unstyled, yet perfectly usable page. My position on antiquated browsers is, "Let them die in peace." See To Hell With Bad Browsers for a fun read on this subject.

Benefit: easily digestible by search engines therefore better search engine positioning; friendlier to users with impairments; a much wider audience reach.

Compatibility

This can as well go with the browsers above, but I wanted to emphasize one thing. XML has been around for a long time and it definitely stays. It's disputable whether XML will save the world and serve as a panacea to cross-platform problems. Banking on XHTML design is banking on forward-compatibility (the term coined by Jeffrey Zeldman, I think), i.e. developing for devices that are yet to come. This is a great investment because emerging user agents will have to support XML or otherwise perish.

How Do You Sell It?

To initiate a transition to web standards you have to sell it to your superiors. Most likely, your boss won't know the difference between HTML and XHTML, and—quite frankly—won't give much crap. Do some math, show expected gains, translate it into bandwidth savings, better search engine positioning, compliancy with Section 508, wider user reach, etc.

Conclusion

I hope the Microsoft.com Home Page Redesign series proved helpful to you. This was merely an exercise, yet a real-world one. There were a number of things we could do better. We could've warned the user he/she had a very old browser. We could've done user testing. We could've crunched images and made them much smaller. We could've... The rest is your homework. ;)

4 comments

Kiliman
on June 29, 2004

Nice redesign.

However, I'm using IE6 and I noticed that the horizontal scrollbar appears no matter how much I widen the window.

I assuming this is a problem with IE's box model.


Milan
on June 29, 2004

You're right. I removed the masthead border and left padding on the footer. Since both have a width of 100% any border or padding stretches them even further which is why you see a horizontal scrollbar. I padded individual footer elements instead.


John Nunemaker
on June 29, 2004

Nice. Very nice. You have definitely 'demonstrated some tangible benefits of a redesign with web standards.' I am looking forward to playing around with the source code. Thanks for the great articles,


Dave Child
on July 1, 2004

A great read, and nicely chosen target. Sadly, Microsoft are not ones to stay ahead of the game. Once they're abysmal lack of standards support in their products and on their sites starts to hit their bottom line, they might start to care. At that point, I hope they read this article and take plenty of notes.

This project is a glittering advert for writing standards-complaint sites - the amount of bandwidth saved alone should be enough to convince fence-sitters of the benefits of ditching tables!