MS: announcing Metro style theme for jQuery Mobile.

http://blogs.msdn.com/b/interoperability/archive/2012/04/26/more-news-from-ms-open-tech-announcing-the-open-source-metro-style-theme.aspx

by shinvee • 14 years ago

109 36 14 years ago

blogs.msdn.com

nl• 14 years ago

I've been doing some JQuery Mobile stuff lately (inside PhoneGap) and I've been pretty happy.

I did notice that there is an Android Holo theme on Github (https://github.com/jjoe64/jquery-mobile-android-theme) but I have no idea how complete it is.

jeffehobbs• 14 years ago

Good for them. It's nice to see MS trying to integrate with existing projects and communities rather than squish them or pave them over.

troels• 14 years ago

embrace extend extinguish

knowtheory• 14 years ago

This is very cool, and the Metro guys are doing a lot of things right. The one thing that annoys me is this:

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

What experience are we missing? And why can't you deliver it to other browsers?

TazeTSchnitzel4• 14 years ago

It works in other browsers but IE, for instance, has Metro styling for form elements by default in Windows 8.

Plus I believe it's slightly better optimised for some things, and some Metro features use vendor-prefixed CSS only MS supports just now, I think.

chris_wot2• 14 years ago

Where can we see examples of this styling? I'd be interested in seeing how to get it working in Chrome/Firefox.

54mf6• 14 years ago

The demo is laggy on my iPhone 4. The "fixed" header and footer don't stay fixed when scrolling; they only jump back in to position after the scroll ends, feels like a pre-iOS 5 Javascript hack. None of the navigation seems to work.

Maybe the experience really is better in an IE browser (never thought I'd say those words), but I highly doubt it. I haven't known any browser - Windows Phone or Android - to handle HTML/CSS/JS better than iOS, so I'd be really surprised. I'm going to be attending a Windows Phone demo event thing this week, will test the demo on a Lumia 900 there and see how it runs.

I really like Metro, and want Windows Phone to succeed (more competition is always a good thing), but this feels like a miss to me. Cordova/PhoneGap support is a big deal, and a great pursuit on their part, but as far as I'm concerned jQuery Mobile should be taken out back behind the barn. It looks cheap and performs horribly, and it gives mobile sites and apps a bad reputation.

untog5• 14 years ago

They may have used MS-specific CSS prefixes- it seems like its designed for Windows Phones only. If anything it would be a favour to WP users- people are STILL only using WebKit prefixes these days.

54mf6• 14 years ago

I checked the theme CSS (http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-...) and it doesn't look like they are. I wish they had.

Interestingly enough, there are a ton of moz- and webkit- animations in the theme, but I don't see anything IE-specific. Left in from a theme template, presumably, but still kind of funny.

josephcooney2• 14 years ago

I just tried it on my Lumia 800, and it wasn't that great there either (especially the 'fixed' header and footer, which seems to behave just as you describe).

54mf6• 14 years ago

Ugh. I was afraid of that. Less time on JQM themes and more time on modern CSS support would be so, so much more beneficial in the long run, both for users and for developers.

josephcooney2• 14 years ago

maybe it only works properly in phonegap. Some of the widgets like the switch and slider didn't work for me either in IE.

jsdalton• 14 years ago

Sounds like it's jQuery Mobile that's the problem, and not Microsoft's particular implementation of the theme. I described almost the exact same behavior as you the last two times I demoed it:

http://news.ycombinator.com/item?id=3248469

http://news.ycombinator.com/item?id=2178318

untog5• 14 years ago

All they need now is for IE to support things like 3D tranforms- you can't fully replicate Metro without it.

54mf6• 14 years ago

Agreed. Like I mentioned in another comment, they should really spend more time on modern CSS support and less time on themes.

TazeTSchnitzel4• 14 years ago

IE10 already has modern CSS support, in fact I believe it has some newer features other browsers don't have yet. Unfortunately it's not yet released, although it's in the Win8 Consumer Preview.

TazeTSchnitzel4• 14 years ago

It already does, and it's used in the Metro interface. However, unfortunately, IE10 is not released yet.

jenius• 14 years ago

I can't tell if this is serious or not... I mean it's on msdn so I assume it is? It strikes me as very strange that the article goes "look how gorgeous the theme looks" and then shows screenshots below that clearly look terrible...

citricsquid• 14 years ago

indeed, it strikes me as odd. Maybe it's just that the visual style of Metro isn't suited to being presented as a screenshot, but to me it looks like a simple mockup, there's no "gorgeous" about it. Functional though.

chris_wot2• 14 years ago

It occurs to me that the Metro theme really is that ugly. When I saw the new Windows logo, I thought something similar to your reaction. This isn't looking good for Microsoft :(

ZeroGravitas• 14 years ago

You could give them the benefit of the doubt and assume it's just the fact that they're saved as gif images for no obvious reason that's making them look less clean. But that fact alone (and the URLs for the images) just underlines Microsoft not getting the web at an institutional scale.

(I don't think a 256 colour gif would actually be that bad since it's mostly monochrome, but they appear to have dithered the greys while at the same time having a rainbow of unused colours in the palette.)

edit: actually only the red one is a gif, but only the rightmost one is both a png and links to a larger image (like the .gif does) rather than the exact same image. I think the text looks better (the phone case certainly does) but it might just be because it's white on black instead of vice-versa.

huggyface• 14 years ago

I had an identical reaction -- if I didn't know better I would have thought the lead in "The theme looks just gorgeous, doesn’t it?" was sarcastic.

I honestly don't get Metro, or the love of it, though I know that taste for such things are entirely subjective. A ridiculous low data density, elements not conforming to usability / aesthetics relative to their container (the whole giant text covering multiple viewports thing), a mishmash of contrasting colour tiles. It really, really isn't my thing. I hear it sells to people like the Woz, but in my opinion it's just a terrible interface that is heralded purely because few have used it in any functional way.

untog5• 14 years ago

Have you used it in a functional way?

I have, and I genuinely think the interface is great, but that third party developers often get it wrong (resulting in the low data density you mention). There shouldn't be any mish-mash of contrasting colour- WP has one highlight color, along with the black and white. The giant text covering viewports is an indication that you can swipe left or right to see additional views- there isn't a parallel in iOS so if you haven't experienced it then it does look strange.

creamyhorror• 14 years ago

I went to a presentation on Metro design and I think it looks very nice indeed. The clean looks of the interface and the high emphasis on typography and positioning appeals to me more than the skeuomorphic designs of certain iOS apps. The presenter (a guy called Shane Morris) covered quite a few aspects of the ideas behind Metro and I have to say MS is being quite bold about the whole thing (whether they deliberately decided to reinvent the desktop or not).

Functionally, virtually no major apps have been converted to a Metro design, and we'll probably be working in traditional mode for most serious productivity tasks for some time. It remains to be seen if the Metro approach will fit more complicated programs with many, many functions. Nonetheless, I give MS props for taking a big leap with desktop design, whether it pans out for them or not.

dkersten• 14 years ago

I looked at the screenshots, then tried the demo and.. I'm wondering if they're trying to make the web look like it did in the 90's. Did anyone else have a reaction like that?

baddox• 14 years ago

It looks fine to me. "Gorgeous" is a bit of a stretch, but so is "terrible."

justncase80• 14 years ago

I'm assuming they mean it's beautiful in the sense that the css they crafted manages to make it look very close to the wp7 metro controls. Those screens aren't all that sexy I will agree. Here's possibly a better example of a metro app: http://www.youtube.com/watch?v=zd5BVkI3RzI

sad_panda• 14 years ago

Hooray, <h1>, <h2>, <h3> tags, now for your mobile phone!

mwsherman• 14 years ago

Unfortunately, this works poorly (using WinPhone on HTC Radar). It's not "buggy", it just has little of the usability/interaction of actual Metro. The styling is nice, though.

I think something pretty close to Metro should be achievable. Perhaps jQ Mobile can be updated to better accomodate the use cases.

aymeric• 14 years ago

I find the Metro style on mobile "unsexy", quite unfinished. The buttons for example are fairly ugly, but it is just a matter of taste...

MS: announcing Metro style theme for jQuery Mobile.

Related Stories