I could definitely see that this is an issue on some platforms which has a much more different style, like Windows 8.
/ Jonas On Tue, May 14, 2013 at 11:15 AM, Matt Basta <[email protected]> wrote: > 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 _______________________________________________ dev-webapps mailing list [email protected] https://lists.mozilla.org/listinfo/dev-webapps
