The differences are no subtle to non-existent. - The general shape is different: Firefox OS icons are circular. iOS icons are rounded chiclets. - Android icons are generally flat and don't have a glare. iOS icons have a more plasticy look
Of course companies have the same logo across platforms, it would be silly if they didn't. But if we're saying, "Hey, make your app follow our Firefox OS design guidelines" and then Microsoft says, "You should be following the Windows icon style guidelines" and Apple is saying, "Follow the iOS and OS X icon guidelines" and *all three of those are different*, then we're doing our developers a disservice by not letting them specify those icons. http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html http://msdn.microsoft.com/en-us/library/windows/desktop/aa511280.aspx http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/ https://developer.gnome.org/hig-book/3.8/hig-book.html#icons-style Please explain how a user is meant to tailor his app to look appropriate on each of the above five platforms by using the official style guidelines using a web app. ----- Original Message ----- From: "Marcos Caceres" <[email protected]> To: "dev-webapps" <[email protected]> Sent: Tuesday, May 14, 2013 1:30:03 AM Subject: Re: platform-specific icons It was requested we move this back to the mailing list from the bug (801816). tl;dr: the differences between icon on platforms range from subtle to non-existant (and only in some specific cases do they differ significantly, but not stylistically). See: https://bug801816.bugzilla.mozilla.org/attachment.cgi?id=749168 https://bugzilla.mozilla.org/attachment.cgi?id=748949 IMHO, introducing a new kind of vendor-platform-version-prefixing (proposed in 801816) would be harmful to the Web platform. (In reply to Matt Basta [:basta] from comment #9) > (In reply to Marcos Caceres [:marcosc] from comment #8) > > you assume that these platforms don't change their look and > > feel over time. > > > Then I propose adding optional versions to the icon strings as well, similar > to how Firefox add-ons can platform versions: > > "icons": { > "128": "/path/to/icon.png", > "128-darwin-10.8": "/path/to/darwin_icon.png", > "128-darwin": "/path/to/darwin_icon.png", > "128-windows": "/path/to/windows_icon.png", > "128-android-5": "/path/to/android_icon.png", > "128-android-4": "/path/to/android_icon.png", > "128-android": "/path/to/android_icon.png", > "128-firefoxos": "/path/to/firefoxos_icon.png" > } > > The platform should choose the most specific icon that accurately describes > itself. This looks a lot like CSS vendor prefixing (but with both platform + versions). So, what if developers only do this: "icons": { "128-darwin-10.8": "/path/to/darwin_icon.png, "128-android-5": "/path/to/android_icon.png" } Which is the UA to choose? I would go in the opposite direction and have a declarative means to allow the developer to disable platform styles for their icons. > > If hosted-apps take off, the UA can adapt the icon to fit the UI guidelines > > of the platform + version (as IOs does). That way, a designer can just > > provide the image and the system can adjust it to fit. > > > Size aside, you can't make the icon fit the visual styles of each platform, > period. It's not possible. And pretending that providing a scalable set of > icons is going to look great cross platform is only kidding yourself. Designers are clever (I speak as one). I'm sure they will work out a way to make communicative icons that work across platforms - they did ok with fav-icons across browsers and platforms (and UA's might be able to help them with that). Folks who really do want to target a platform can continue to use UA sniffing - but we certainly should not codify targeting specific platforms (specially in something we want to turn into a W3C recommendation). > > I understand where you are coming from, but I don't think anyone is saying > > that. I'm saying that there are better ways of dealing with this problem > > that scale better in a future and backwards compatible way. > > > Please, then, tell us what these "better ways" are. I proposed to allow the UA to hook into the platform styles (with the ability for the dev to disable them). The UA is in a much better position to handle this than the developer in most cases. > Because right now, no > matter what you do, your app will always stick out like a sore thumb as a > second class citizen. No other platform has FXOS-style icons, meaning if you > target FXOS, your icons will look out of place on other platforms. Now you see my point :) Don't target a platform. There are too many of them and they change all the time. Instead, designers should focus on making great icons (like the FireFox one, which looks great on every platform AFAIK). > > Targeting the "now" doesn't make sense on the Web because we can't > > purge apps that don't look right on a given platform. > > > That's not our place or goal. I'm tasked with writing the W3C specification for this - so, for better or for worst, it's my place and goal to be thinking about these things. > We're giving a tool and choice to developers > who want to control their app's look and feel. Sometimes, less can be more. Organisations/developers that really want to target specific platforms should use other means (e.g., UA sniffing on the server, which unfortunately, a lot of websites continue to do today). We know from years of experience that targeting specific platforms in any capacity is bad for the Web (i.e., made for IE6, best viewed at 800x600). > > We are defining a new class of application > > here: there is nothing wrong for a Web application to continue to feel like > > a Web application when it is "installed". > > > False. Apps are still apps, not new web applications. These aren't a new > class of application. Users expect that when they turn on their Android > phone and look at their home screen, it doesn't look like a hodge-podge of > icons that don't match their platform. > > Here's a short list of apps that have different icons on different platforms: False :) I only found 2.5 that differed significantly (and even then the differences where questionable if they were to do with platform integration). And of those, one of the Android ones used the iOS style! See: https://bugzilla.mozilla.org/attachment.cgi?id=748949 For everyone to compare: Android icons on the left, iOS icons on the right. iOS icons are more blurry because I had to resize them to do a side by side comparison. Please also note that iOS icons are square because they haven't been masked. > - Facebook https://itunes.apple.com/us/app/facebook/id284882215?mt=8 https://play.google.com/store/apps/details?id=com.facebook.katana&hl=en These are exactly the same. > - Foursquare https://itunes.apple.com/en/app/foursquare/id306934924?mt=8 https://play.google.com/store/apps/details?id=com.joelapenna.foursquared&hl=en iOS one contains some minor details in the background. Funny, the Android version uses iOS gloss effect. > - Yelp https://play.google.com/store/apps/details?id=com.yelp.android&hl=en https://itunes.apple.com/en/app/yelp/id284910350?mt=8 Yelp differs. > - Netflix https://itunes.apple.com/en/app/netflix/id363590051?mt=8 https://play.google.com/store/apps/details?id=com.netflix.mediaclient&hl=en It's exactly the same. > - Google Maps https://itunes.apple.com/en/app/google-maps/id585027354?mt=8 https://play.google.com/store/apps/details?id=com.google.android.apps.maps&hl=en Differs. > - Gmail https://itunes.apple.com/us/app/gmail-email-from-google/id422689480?mt=8 https://play.google.com/store/apps/details?id=com.google.android.gm&hl=en Differs, but not in style. > - iMDB https://itunes.apple.com/us/app/imdb-movies-tv/id342792525?mt=8 https://play.google.com/store/apps/details?id=com.imdb.mobile&hl=en Exactly the same, except the IOs auto-gloss is applied. > - Bank of America https://play.google.com/store/apps/details?id=com.infonow.bofa&hl=en https://itunes.apple.com/us/app/bank-america-mobile-banking/id284847138?mt=8 Exactly the same. Down to the underside gradient. > - Pinterest https://play.google.com/store/apps/details?id=com.pinterest&hl=en https://itunes.apple.com/us/app/pinterest/id429047995?mt=8 Differs - only in 3D effect and slight coloration difference. The list above shows that the differences are only subtle, and in most cases non-existent. Certainly nothing in order of "like a hodge-podge of icons that don't match their platform". I also checked some on Windows Phone, found much the same: some different (e.g., facebook), some not (bank of america, imdb). > All of those apps, from what I could come up with off the top of my head and > verify, have slightly different icons on different platforms. Right, some are *slightly* different. > This is a tool > that developers want. It's irrefutable. I respectfully think you showed that it was refutable by showing how subtle, or non-existant, the differences really are. You can see that very clearly here, which removes platform specific bevel and drop shadow (again, slight blur on icons due to resizing): https://bug801816.bugzilla.mozilla.org/attachment.cgi?id=749168 > This bug is to meet parity with > other platforms. IMHO, adding this complexity to the manifest format will only be a replay of vendor prefixing. I don't think this is needed or helpful to the platform in the long term. Kind regards, Marcos -- Marcos Caceres _______________________________________________ dev-webapps mailing list [email protected] https://lists.mozilla.org/listinfo/dev-webapps _______________________________________________ dev-webapps mailing list [email protected] https://lists.mozilla.org/listinfo/dev-webapps
