More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile


Starting today, the Metro style theme for JQuery Mobile, the popular open source mobile user interface framework, is available for download on GitHub and can be used as a NuGet package in Visual Studio.

The theme enables HTML5 pages to adapt automatically to the Metro design style when rendered on Windows Phone 7.5. The Metro style theme is open source and available for download here. This new Metro style theme’s development was sponsored by Microsoft Open Technologies, Inc. working closely with Sergei Grebnov, an Apache Cordova committer and jQuery Mobile developer.

The theme looks just gorgeous, doesn’t it?

clip_image002 clip_image002 clip_image006image

The CSS and Javascript theme adapts to the current theme used in Windows Phone and applies the right styling to the jQuery Mobile controls.This allows mobile HTML5 web sites and hybrid applications to naturally integrate into the Windows Phone Metro style experience. This offers developers the choice of rapidly integrating the theme into their existing application but also to contribute to this open source project through GitHub.

You can see an extensive demo of the theme on this page and you can learn more on this site where we are publishing new articles, references and source code sample for developing with Apache Cordova and the Metro style theme for jQuery Mobile.

This is another milestone in our continuous engagement with the community. Our team has been working closely with the Windows Phone division to support the mobile HTML5 and JavaScript open source communities over the last year to bring popular open source projects to Windows Phone:

  • A few months ago, we sponsored the development of full Windows Phone support for PhoneGap (now Apache Cordova), the open source framework that lets applications be built for iOS, Android, Windows Phone and other mobile platforms using HTML5, CSS and JavaScript.
  • At the same time significant improvements were brought to jQuery Mobile (read more about this in our previous blog post): feedback from the community has been great and was partly responsible for our decision to expand our engagement with jQuery Mobile and sponsor this work.

We believe it is important for developers to have choices when targeting Windows Phone, and we also want them to be able to deliver a good experience to the users of their applications, especially when making the choice of using Web standards (HTML5, CSS and JavaScript) to target multiple mobile platforms by picking solutions such as Apache Cordova.

To do so, developers already enjoy a selection of Apache Cordova Plugins that give their application a Windows Phone touch such as Social Share, Bing Map launcher and Live Tile. Now developers can use the new open source Metro style theme for jQuery Mobile to give their mobile apps and websites the Metro style look and feel, and offer the final users an experience similar to the one they get with native applications.

As usual we are very interested in hearing from developers and gathering feedback about the experience of developing HTML5-based applications and websites on Windows Phone. Let us know what other features, tools and frameworks you’d like to see.

Abu Obeida Bakhach
Program Manager
Microsoft Open Technologies, Inc.
A subsidiary of Microsoft Corporation

Comments (25)

  1. Sutikshan says:

    I hope this metro style will look same in Android & iOS browser too. Soon going to try.

  2. Jorge says:

    This is such good news! Sounds like a weekend project is brewing 😉

  3. Abu.Obeida says:

    @Sutikshan, a reduced set of the theme works on Android and iOS. However I suspect users would want a native look and feel, and that is what this theme helps hyrbid app develops do on WP

    @Jorge, thanks for the note! would love to see what you are brewing :)

  4. rastapanda says:

    "Important. IE browser is required for the full metro experience."

    Gota love that MS "native HTML5"…

  5. jqm says:

    jqMetro (http://www.jqmetro.com) is where most of the core parts of this Project is coming from! No reference at all. what a shame.

  6. anamika says:

    gorgeous? yuck

  7. Kevin says:

    Will the new Metro Theme for jQuery Mobile support Pivots and Panoramas to provide a true "Metro" user experience or is it just a black background with white text and white lists like in the screenshots?

  8. Peter says:

    Actually, it isn't beautiful.

    Like the rest of Metro, it looks like a retarded kid got ahold of Paint and overwrote all your other designs.

    It's bad.

    It's simple and simple can be good yes, but in this case, it's just ugly.

    Try again.

  9. Jason says:

    "Important. IE browser is required for the full metro experience." Pure comedy gold.

  10. asd says:

    …… HAHAAHHAHAHAAHHAHA joke right? this is a joke? yeah… good one.

  11. blah says:

    Good god my eyes are bleeding.

  12. Tess says:

    This is great for jQM developers looking to provide a more native look for cross platform apps. Well done!

  13. Alex Nautilus says:

    Great.

  14. Francisc says:

    Clicking the images opens the JPG file in the same window as the page? Really MSDN?… Won't bother reading if you won't bother with reader experience.

  15. Les Stroud says:

    Not trying to bash, but on ios (and in the pictures) it's reminiscent of a curses ui.  Frankly, it seems to lack polish.  I think metro looks pretty good in general, but the font seems wrong and the controls seems….well, like curses.

    Maybe the font should be a lower weight and some subtle gradients would help.

  16. Abu.Obeida says:

    @rastapanda and @Jason

    The purpose of the Metro theme for jQuery Mobile is to help developers integrate their mobile websites and HTML5-based applications into the Windows Phone experience. The theme is available in 2 ways:

    * The first way is targeted at websites, and you can see that the demo web page renders on iPhone and Chrome.

    * The second way intends to bring an even deeper level of integration. Leveraging the Apache Cordova (PhoneGap) extension model, additional controls were developed as Apache Cordova Plugins that make use of the native platform. Therefore, applications developed using HTML5 and Javascript on top of Apache Cordova can make use of native Metro controls such as the date-time picker. In this case the dependency is more on the Windows Phone platform than on the browser itself as Cordova plugins are platform specific.

  17. Abu.Obeida says:

    @jqm and @kevin

    The Metro theme for jQuery Mobile and jqMetro projects are two distinct and separated efforts. No code from jqMetro  has been reused to develop the Metro style theme for jQuery Mobile. In addition, the jqMetro project concentrates on controls such as the Pivot one and does not specifically targets Windows Phone, while the Metro theme for jQuery Mobile aims at integrating mobile sites and HTML5-based application into the Windows Phone experience.

    Hope that clarifies things, and thanks for your interest

  18. Saif says:

    WTF? Take some inspiration from Android 4.0 Ice Cream Sandwich!

  19. Omega says:

    I have to admit, I really like the Metro look.

    Also, it would be cool to see full Apache Cordova integration and projects in upcoming versions of Visual Studio!

  20. Gabbsmo says:

    Is the Pivot Control on the roadmap?

  21. Tom says:

    It is not beautiful, just plain, simple and ugly.

  22. Aaron Smith says:

    But everything isn't capitalized, so this can't be Microsoft's doing…

  23. Adam says:

    iPhone – Just tried the demo on my iPhone 4s and, unfortunately, it's almost unusable – elements overlap other elements (text over other text, controls over text, etc).  It's a mess.

    To bad.  I'd really hoped it would degrade well enough to use on iPhone, Android and Windows – One theme to conquer all!

    Instead, it just adds more fragmentation.  Luckily iPhone and Android have enough market share that we can just ignore windows mobile again and use a theme that's generic enough to look OK on both.

    Besides, jquery mobile is pretty bad on mobile anyway.  Its should be called the "un-mobile app theme".  It's rediculous.  How long has it been and jquery mobile still hasn't addressed headers (persistent), those lame page transitions, performance?  One has to wonder if the jquery team has run their own demos on an iPhone or droid?  Can't they see it sucks?!?  Havent they tried any of the competitors demos (e.g. http://www.jqtouch.com/…/main or jqmobi.com/…/index.html or where-ever

  24. Lisa Nelson says:

    Wow I am surprised to reading this interesting concept, yes really now we all are well developed on technologies it no doubt because target is these types of multi mobile platform. So thank you very much for sharing this and I will definitely visit again this website when as soon as possible.

    http://www.spasentiments.com/

  25. wpdeveloper says:

    Good information, Your information is very helpful for me. Thank you very much….