Microsoft.com Modern UI design goes live

Microsoft legend says that in 1993, www.microsoft.com was one computer that sat under the desk of the site’s first admin, Mark Ingalls. This is only half true. While there was a server under his desk, it was a staging server for the site, which was eventually rehomed as Ingalls kept turning the wrong machine off by mistake.

That may be 19 years ago now, but in “internet time” generations have passed. Microsoft.com has been through many a redesign, but the most significant comes now with the go live of its Metro Modern UI look. This follows successful previews in June and the rebranding of Hotmail/Live to Outlook.com.

The site wasn’t terrible before, but with the introduction of Windows Phone 7 and 8, Windows 8 and the Xbox Dashboard, Microsoft are putting all their eggs in one basket with the user interface for each being based on the Modern UI.

Now, here’s the rub. Visiting the site in different browsers has given a different design.


IE9

IE9 and Firefox present a static design, simple and clean with one huge live tile-like banner and three smaller ones promoting IE, Windows Phone and the Windows Store. The ‘For Home’ and ‘For Work’ buttons have remained from the preview, but been relocated to the right of the large tile.


Firefox

Chrome and IE10 gives the same design that we reported on in June. The site dynamically resizes as you resize the window. The interface is cleaner and the live tile is a live banner. Branding is the same across all browsers. It is how the site is supposed to be seen.


Chrome. IE10 displays this way too

So why are there differences in the design across the browsers? Location? Browser incapability? We’ve checked with the big three, Chrome, Firefox and IE (9 and 10) to mixed results. What is clear though, the shot you see at top of this article is the finished (and almost live) article.

We'd like to stress that while we have checked the site in multiple browsers, with different users across different locations, this is not a controlled test; you may see things as Microsoft intended. Or you might not.

Source: Microsoft

Report a problem with article
Previous Story

Downloadable Text Suggestions coming with Windows Phone 8

Next Story

Apple CEO apologizes for iOS 6 Maps, recommends Bing, MapQuest or Waze

39 Comments

Commenting is disabled on this article.

MsftGaurav said,
It should be made widescreen in all browsers if monitor is widescreen. Too much wasted space.

It is widescreen for me in Firefox, haven't tried others yet.

Nice. They motivated ALL CAPS in Visual Studio by saying that it was "Metro," and other sites had it too, such as azure.com. And still, their new homepage doesn't have all caps in the menu (which is good tho). Consistency FTW.

"Modern" is just a relabeling "Metro." A misfire, especially since it is trying to be used on two totally distinct platforms with totally different needs and requirements.

I have the new site and it's absolutely gorgeous!!! Very light and clean and useful! I also love how it's responsive to fit all device sizes.

I get the new look in Chrome, but to me the middle shots with IE9 and Firefox look more "Modern" than the one I see. Doesn't really matter to me.

I'm getting the new design on Chrome (beta) but the old version in IE9.

I'm not sure if I like it. It's not bad, but I just don't know about it yet.

eiffel_g said,
Looks bad. Very retro design remembering AOL first days, but with too much black.

I don't see much black. Where are you seeing "too much black"?

watchthisspace said,

Where is this "too much black"?


I think he is misunderstanding the OLD design as the NEW one. It has a lot of black.

watchthisspace said,

Where is this "too much black"?


http://www.microsoft.com/en-us/default.aspx

Just the first page. Cannot post a print here, but go there. There is a big black Tile with Bing vs Google, in the center -,2 dark gray tiles in right, one black bar in top, one big banner with Bing down the page... Looks like someone is dead at Microsoft.

watchthisspace said,

I don't see much black. Where are you seeing "too much black"?


watchthisspace said,

Where is this "too much black"?


http://www.microsoft.com/en-us/default.aspx

Just the first page. Cannot post a print here, but go there. There is a big black Tile with Bing vs Google, in the center -,2 dark gray tiles in right, one black bar in top, one big banner with Bing down the page... Looks like someone is dead at Microsoft.

eiffel_g said,

Just the first page. Cannot post a print here, but go there. There is a big black Tile with Bing vs Google, in the center -,2 dark gray tiles in right, one black bar in top, one big banner with Bing down the page... Looks like someone is dead at Microsoft.

You are indeed looking at the old design. The new one doesn't have a black bar on top.

Well its def more future trend based. Lots of whitespace, huge fonts, responsive... everyone gonna hate the next nw update

wayn1ak said,
If you clear your cookies, the new site will actually show up. I'm using the latest version of Chrome.

Not true for me, IE10 and latest chrome with cookies cleared shows old site. UK.

duddit2 said,

Not true for me, IE10 and latest chrome with cookies cleared shows old site. UK.

that's weird cause I had the old site and then I went to settings>content settings>all cookies and site data>remove all and I managed to get the new site

GP007 said,
I think it's just a slow rollout, everyone will get the new UI in time and on every browser.

Must be, I'm using Chrome and have the design that's in the IE9 screenie.

GP007 said,
I think it's just a slow rollout, everyone will get the new UI in time and on every browser.

This.

I'm using IE10 and the latest Chrome beta and it's showing the old site in the UK.