MS: announcing Metro style theme for jQuery Mobile. | Hacker News Reader

MS: announcing Metro style theme for jQuery Mobile.

blogs.msdn.com

109 pointsshinvee36 comments

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?

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.

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

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...

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.

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 :(

Try using a WP device. Seriously. The Metro theme is anything but ugly. Minimalist, perhaps- and maybe that isn't your style- but it isn't ugly. I would choose it over Apple's "making your address book look like a leather-bound book" approach any day.

Metro is much more than a theme. It's a design philosophy and a couple of screenshots cannot capture it.

You really need to use it to understand it.

Here's some indepth material on it:

http://www.riagenic.com/archives/493

http://www.riagenic.com/archives/487

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.

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.

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.

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.

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?

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

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

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.

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.

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.

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).

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.

IE10 has much better CSS support. It's just not released yet. I don't know why people keep complaining about this, though.

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

Doesn't look like that either. There is a Cordova check in JS at the bottom ("// allows to use the page in NON cordova environment") but the files it includes for Cordova appear to be trivial. Theme interaction and switchers and the like.

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

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.

embrace extend extinguish

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.

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.

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

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

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.

Not to mention, when will those trickle down to the Windows Phone version of IE?

In Windows Phone 8 - the idea is that both Phone and Desktop will be released somewhat simultaneously.

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

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...

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

Reply on news.ycombinator.com