Microsoft.com Redesign

Oh, well, count me in into the critics’ crowd. Microsoft.com had redesigned its home page. As Douglas Bowman at Stopdesign notes, this is a step in the right direction. It looks like a lot of work has been done in “de-cluttering” the page and organizing links in clusters — I smell a card-sort or two. As the page layout got simpler, the usability has improved as well — gone are the drop-downs, the concept of audience silos is much better articulated, the home page is full of links, yet the design keeps it “breathy“ and legible. The page loads quickly and conveys a nice tactile feel, inviting further site exploration. Good job on that — it takes a lot of effort to make something as complex as Microsoft Web presence seem so simple and straightforward.

Things are less sunny under the hood. While Douglas praises the improvement (and I join him on that), I’d like to keep the developers focused on things that still need to be fixed (in no particular order and probably incomplete):

  • Please eliminate obvious markup errors, such as lack of DOCTYPE declaration, nesting block elements inside inline elements, atavisms such as WBR, etc. Strive to make the page at least XHTML 1.0 Transitional compliant. It’s not that hard.
  • Consider removing tables altogether. This is not a very complex layout, you don’t really need them.
  • Move your inline style declarations into a separate stylesheet. Having some styles inline and some in the stylesheet is a maintenance nightmare.
  • Speaking of CSS styles, clean that up, too: there are some obvious errors, such as unitless padding and margin declarations, and even just plain misspelled elements (xheight).
  • Consider organizing ALL of your lists of links into… er, lists, using ul and li elements. Perfect candidate —  your bottom navigation bar: semantically, vertical bars that separate links have no meaning. Therefore, they shouldn’t be in your markup.
  • Subsections in main content area — “Popular Downloads“, “Popular Destinations“, etc. look pretty as graphics, but do they really need to be? I would suggest replacing them with list items as well. If you’d like to retain the “prettiness“, use one of the image replacement techniques.
  • Finally, let’s remove CSS filters (gradients up at the top) on the home page of your site. Why? Because there’s really no reason for it. Your page has a fixed-width layout and replacing the IE-only gradient with a background image will go a long way in making your site look the same on all browsers.

Your Web site’s home page is your company’s face. In your case, the importance of keeping that face well-shaven is critical. If your company made toasters or lightbulbs, I would probably not care as much about the quality of HTML/CSS code. However, given that Microsoft produces world-dominant browser and world-class Web development tools, and how much flak Microsoft takes on a daily basis in regards to Web standards support, a squeaky clean markup of the home page is a foundational practice that has as much marketing and evangelist power as a dozen of boisterous dudes in MSDN t-shirts — at a fraction of the cost.

Leave a Reply

%d bloggers like this: