Menu

Microsoft advances

Seen the Microsoft home page recently? Some remnants of the previous design are still visible, but a large portion of the design changed significantly. The most pleasing thing to see is actually what’s under the hood though.

Seen the Microsoft home page recently? Some remnants of the previous design are still visible, but a large portion of the design changed significantly. The most pleasing thing to see is actually what’s under the hood though.

A huge drop in the number of tables used to lay out the page (my count is seven tables — that’s down from 40 tables previously), not a spacer gif in sight, all the proprietary attributes and identifiers in the links are gone, most of the bulky JavaScript the previous home page used is stripped out, and the HTML now weighs in at a lean 11 KB.

I don’t see any browser sniffing going on, thus, we can assume Microsoft is now only serving one version of the home page, rather than the two separate versions maintained before. The team even used proper alt text for the large image map front and center.

Whoah! Can this really be Microsoft I’m writing about?

While this step represents a huge leap forward for Microsoft toward leaner, more efficient tableless layout that uses much more CSS for design details, it’s not all the way there yet. There are a few critical things Microsoft is still missing, even by HTML 4 standards. Small mistakes such as placing <p> tags inside link anchors, use of individual divs for bulleted list items rather than using unordered lists, overuse of classes and extraneous elements, and the obvious continued use of several remaining tables to lay out the page. There are a few rendering issues in various browsers that could be worked out, but at least only one version is served to everyone now.

The heartening thing for me about this whole design transformation is the potential of what Microsoft could achieve if they kept pushing forward. The current code isn’t that far off from a completely standards-compliant, accessible, semantically rich home page.

They still haven’t placed a doctype at the top of their HTML. But even forcing the page to validate as HTML 4.01 Strict, (at the time of this writing) the W3C validator only throws 64 errors! That’s nothing. Especially when you look through the errors and see most of them are redundant, like the paragraphs inside anchor tags, and repeated use of <nobr> and the non-standard <wbr> tag for allowing soft line-breaks. Fix all that stuff, and they’re looking at maybe 20-25 remaining errors. The CSS isn’t in that bad of shape either. A couple proprietary properties and a few syntax mistakes.

Whether someone at Microsoft was listening or not, these changes are outstanding to see. Hopefully, this is just a start of what’s to come. The home page team should certainly get recognition for the progress they’ve made so far.

Nice work Microsoft. Please… just don’t stop here.

Thanks to Beto for the tip!

Update: Several people have written in or commented on other sites that they think Microsoft is still serving different versions of its homepage to different browsers because of differences in header/footer styles, or hovers not working in the left-side navigation in non-IE browsers.

As far as I can tell, I still only see one version of both the HTML and CSS being served to all browsers. The header and footer use a proprietary gradient transformation to create the blue-to-white gradients that fails in non-IE browsers:

filter:progid:DXImageTransform.Microsoft.Gradient()

And each of the left-side navigation links are created by badly-nested HTML:

<a href="http://g.micro..."><p>Windows</p></a>

… which IE/Win doesn’t care about, so the hover properties work there. But all other browsers correctly recognize the illegal nesting, and seem to cancel out any hover or active link states.

So, still only one version being served. That’s good. It’s just that this one version is behaving differently in each browser. That’s not necessary. With some fixes, the page could render much more consistently in every modern browser (including IE5.0/Win).