5 ms·

MS: announcing Metro style theme for jQuery Mobile.

109 points by shinvee 14y ago

nl 14y 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 https://github.com/jjoe64/jquery-mobile-android-theme) but I have no idea how complete it is.
jeffehobbs 14y 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 14y ago
  embrace extend extinguish
knowtheory 14y 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?
- TazeTSchnitzel 14y 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_wot 14y ago
    Where can we see examples of this styling? I'd be interested in seeing how to get it working in Chrome/Firefox.
54mf 14y 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.
- untog 14y 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.
  - 54mf 14y ago
    I checked the theme CSS (http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/css/metro/jquery.mobile.metro.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.
- josephcooney 14y 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).
  - 54mf 14y ago
untog 14y ago
All they need now is for IE to support things like 3D tranforms- you can't fully replicate Metro without it.
- 54mf 14y ago
  Agreed. Like I mentioned in another comment, they should really spend more time on modern CSS support and less time on themes.
  - TazeTSchnitzel 14y 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.
    - 54mf 14y ago
      Not to mention, when will those trickle down to the Windows Phone version of IE?
      - untog 14y ago
        In Windows Phone 8 - the idea is that both Phone and Desktop will be released somewhat simultaneously.
- TazeTSchnitzel 14y ago
  It already does, and it's used in the Metro interface. However, unfortunately, IE10 is not released yet.
deleted 14y ago
[deleted]
jenius 14y 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 14y 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_wot 14y 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 :(
    - untog 14y ago
      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.
    - recoiledsnake 14y ago
      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/493 http://www.riagenic.com/archives/487 http://www.riagenic.com/archives/487
- ZeroGravitas 14y 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.
sad_panda 14y ago
Hooray, <h1>, <h2>, <h3> tags, now for your mobile phone!
mwsherman 14y 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 14y 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...

109 points by shinvee 14y ago

nl 14y 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 https://github.com/jjoe64/jquery-mobile-android-theme) but I have no idea how complete it is.

jeffehobbs 14y 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 14y ago
embrace extend extinguish

knowtheory 14y 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?

TazeTSchnitzel 14y 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_wot 14y ago
  Where can we see examples of this styling? I'd be interested in seeing how to get it working in Chrome/Firefox.

54mf 14y 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.

untog 14y 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.
- 54mf 14y ago
  I checked the theme CSS (http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/css/metro/jquery.mobile.metro.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.
josephcooney 14y 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).
- 54mf 14y ago

untog 14y ago

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

54mf 14y ago
Agreed. Like I mentioned in another comment, they should really spend more time on modern CSS support and less time on themes.
- TazeTSchnitzel 14y 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.
  - 54mf 14y ago
    Not to mention, when will those trickle down to the Windows Phone version of IE?
    - untog 14y ago
      In Windows Phone 8 - the idea is that both Phone and Desktop will be released somewhat simultaneously.
TazeTSchnitzel 14y ago
It already does, and it's used in the Metro interface. However, unfortunately, IE10 is not released yet.

deleted 14y ago

[deleted]

jenius 14y 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 14y 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_wot 14y 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 :(
  - untog 14y ago
    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.
  - recoiledsnake 14y ago
    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/493 http://www.riagenic.com/archives/487 http://www.riagenic.com/archives/487
ZeroGravitas 14y 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.

sad_panda 14y ago

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

mwsherman 14y 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 14y 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...