Bing gets Metro treatment, includes HTML5 live tiles

By Tom Warren, on 21st Jul 11 7:50 am with 36 Comments

Microsoft is testing live tiles across its Bing search engine homepage.

The software giant first announced its HTML5 version of Bing at the original beta launch of Internet Explorer 9 in September. Bing’s HTML5 version will include smooth animations to allow users to jump backwards in their search history. Bing will also introduce small, hovering windows as you scroll down the screen to keep navigation tabs in view and enable animated pictures and automatically generated slideshows so users can visually explore a search query.

Bing will also introduce an “instant” search similar to rival Google. The instant search will allow page elements to automatically transition as the user types their search query into the bing box. Microsoft was expected to make HTML5 Bing available as a beta preview version around the same time as Internet Explorer 9 was made available. Microsoft has so far remained silent on its HTML5 Bing plans after demonstrating the product several times over the past year. Rafael Rivera has spotted Microsoft’s latest test of Live Tiles on the Bing homepage, bringing a Metro look and feel to Bing. The live tiles work on a users location and provide weather, local news, mapping, targeted advertising and trends.

Microsoft’s Metro choice for Bing follows a number of a high profile company sites being overhauled. Microsoft has previously updated its online store look and feel to match the Metro look and feel and its download site and MSDN site. Microsoft’s Metro design language is an internal code name for a typography-based design languages created and used by the company. Microsoft originally started using Metro in Media Center and showcased a full version in the company’s Zune products. Microsoft’s latest mobile operating system, Windows Phone 7, also features the Metro look and feel throughout. Microsoft is planning Metro style user interfaces across Windows 8, Xbox 360 and Office 15. The software giant uses the tile and text user interface for its existing Windows Phone devices and will sync all of its user interfaces into one unified vision for its next range of products due in 2012.

Microsoft appears to be testing the new interface internally. Microsoft workers began tweeting about HTML5 Bing earlier this week (see here and here). The broader testing appears to indicate that Microsoft may be ready to push the updates public in production or test form. Let us know in the comments if you pick up the new interface on your travels.

Bing HTML5 Live Tiles

Image Credit: Rafael Rivera (withinwindows.com)

  • Anonymous

    Nice! but when are they gonna get this out?! cant wait

  • Anonymous

    Nice! but when are they gonna get this out?! cant wait

    • http://twitter.com/mattweihl Matthew Weihl

      It seems like it’s going to be available soon.

    • http://twitter.com/mattweihl Matthew Weihl

      It seems like it’s going to be available soon.

    • Anonymous

      really hope so. unfortuanally google new look looks nice, although i dont use it.

  • http://123kinect.com/ Clemens

    Wonderful :D.. this strategy of Microsoft is brilliant. Everything is coming together now :)

    • CandidCalum

      Although both MSDN and Bing still have some elements that don’t conform to the Metro design language.

    • http://www.hdflvplayer.net/ Html5 Video Player

      Yup……… Great going Microsoft!

  • GP007

    I haven’t seen this on Bing fo rme yet. 

  • http://twitter.com/teusje teusje

    I see the new background but not the html5 and html5 live tiles.

    but looks great!

  • http://twitter.com/teusje teusje

    I see the new background but not the html5 and html5 live tiles.

    but looks great!

  • Wintastic

    Hey guys.
    I just started my blog and wrote an entry on WP7. I’d be glad if you dropped by and provided feedback :)
    http://wintastic.wordpress.com/2011/07/21/recipe-to-truly-disrupt-the-smartphone-market/

  • Andy

    It looks cluttered :(

    • Guest

      Your right, like some kind of banner ads.  

    • Clouse

      Kinda defeats the purpose of Metro UI

    • Anonymous

      LOL! Get some glasses. It doesn’t look cluttered at all. In fact, it looks clean.

    • Skysinof

      The Metro UI is cool, but defies many design principles. In the Windows 8 example, you get a screen of uneven-sized, multi-colored, animated tiles. Does it look nice? Sure it does. But just how efficient is it for daily use? 

      In my opinion, the Metro UI is an example of information overload and color pollution, which can distract users. And the animated live tiles does more harm than good, as it becomes yet another facet of distraction. 

      Personally, when I use my computer, I don’t stare at the screen, thinking how nice my desktop/dock/theme/wallpaper is; I use my computer to work. I absolutely love “window snap”, which is an amazing productivity feature; on the other hand, I don’t see the point of “Flip 3D” (the previews are tiled and overlapped, so you don’t get a full preview of the tab until you actually scroll/tab to it. Nor can you use the arrow keys to navigate). And right now, I just can’t see the appeal for live tiles, though I reserve the right to change my mind in the future.

    • Mark

      Why don’t you just sign your comment as Andy and we’ll assume the predictable negative comment to come? It’ll save you and us a lot of time.

    • Mark

      Why don’t you just sign your comment as Andy and we’ll assume the predictable negative comment to come? It’ll save you and us a lot of time.

    • Guest

      Andy

    • Mark

      Why don’t you just sign your comment as Andy and we’ll assume the predictable negative comment to come? It’ll save you and us a lot of time.

  • sausage_party

    I love it, it’s just like Bing’s iPad app. :D

  • CandidCalum

    Hm. The links at the top aren’t Metro, and neither is the search button :/ Hopefully these will be changed to conform to the Metro concept. People may get annoyed with me complaining, but I value consistency greatly.

    • http://pulse.yahoo.com/_HNJWS4OICMQP2W76DBMZ4WCYUM Oliver B

      haha.

    • Anonymous

      well actually the top links are metro if you imagine a pivot nav spread across the top. which is what i think they were going for (with the exception of the area to the right of the sign in link). maybe just need to make it a bit bigger and make sure that the segoe ui font. if you wanna see what i mean look at the new xbox interface

    • CandidCalum

      The main reason I believe they’re not very Metro is because of the font and font size used. If they used the same font and font size as the links across the top of the new Xbox Dashboard, I’d certainly deem it Metro enough :) Right now, there is a lot of inconsistency.

    • Anonymous

      yea that true, its a work in progree so maybe in time. id like to see the segoe ui font too

    • CandidCalum

      The main reason I believe they’re not very Metro is because of the font and font size used. If they used the same font and font size as the links across the top of the new Xbox Dashboard, I’d certainly deem it Metro enough :) Right now, there is a lot of inconsistency.

  • http://profiles.yahoo.com/u/6G3ZZJCHOLYP3S5CRCIHQ7WDSE MVIM

    Wow! It looks like Rafael has 2179 credits on Bing Rewards!

  • Renzo

    Love them or hate them (I do both) the artistic value of the some of the Metro designs appearing around the web are amazing. Now lets start skinning some Live tiles with a little street-art and then I’ll be incredibly happy ;-)
    Whether people will adopt Microsoft’s new “image” is yet to be seen, however.

  • http://www.facebook.com/quesoloco Justin Long

    http://www.withinwindows.com/2011/07/20/picture-microsoft-rolls-out-new-bing-with-live-tiles/
    As found on Rafael’s site, you can change the cookie to

    Name: MUID Value: A24150920EE544CDAE91D7D2D9D3E3E2
    which, (just paste this into your browser window at bing.com
    javascript:void(document.cookie = “MUID=A24150920EE544CDAE91D7D2D9D3E3E2″);
    And then refresh!

  • Anonymous

    This reminds me of the Bing app for iPad — which I think is one of the best ipad apps available.

  • Anonymous

    It looks like it’s hot in Phoenix…

  • http://www.facebook.com/people/Jesse-Garcia/100000361221634 Jesse Garcia

    Loving bing more and more. Its still hard not to type “Google” everytime i search. Its like a bad song stuck in your head!

  • http://www.facebook.com/people/Jesse-Garcia/100000361221634 Jesse Garcia

    Loving bing more and more. Its still hard not to type “Google” everytime i search. Its like a bad song stuck in your head!

  • jaycee

    Hi Tom, now testing Bing Metro on Google Chrome browser http://youtu.be/bsXuLBw3PPA