> With a hosted web app, there is no restriction on the shape. I can publish
> whatever shape I want - I'm not bound by any app store or guidelines.
No, you're not bound. But for developers that *want* to, we should give them
that option.
> Seems very few devs actually care on Android about consistency in the icons -
> yet still works fine.
No, not all do. But some do, and that's what matters.
> If we are going to be too restrictive about icons, then that might put
> developers off
Nothing about my proposal is mandatory, and it's in no way
backwards-incompatible. This simply gives the developer to provide
platform-specific icons. The following object would be perfectly acceptable:
{
"64": "64.png",
"128": "128.png",
"128-android": "android-128.png",
"128-android-4.2": "android-4_2-128.png"
}
It's purely optional. As we increase our partner base and transition
traditionally desktop and native apps to HTML5, more partners are going to look
for features like this.
> they can use UA sniffing to target a platform.
This is a bad practice and also is impossible for packaged apps.
> Again, *you let the user agent do it for you*.
Can the user agent adjust the direction of the lighting? Can it adjust the
perspective of the image? Can it isolate the shape and turn it white for Metro?
Absolutely not. Beyond rounding the corners or adding a glare, the user agent
can't do a whole lot. This is not an alternative.
Windows (classic and metro), OS X (flat and not flat), and Linux (...) are
first-class citizens in the long term goals of the app ecosystem and we should
not be ignoring the ability for developers to provide dedicated assets for
these platforms.
----- Original Message -----
From: "Marcos Caceres" <[email protected]>
To: "Matt Basta" <[email protected]>
Cc: "dev-webapps" <[email protected]>
Sent: Tuesday, May 14, 2013 12:39:46 PM
Subject: Re: platform-specific icons
On Tuesday, May 14, 2013 at 7:15 PM, Matt Basta wrote:
> The differences are no subtle to non-existent.
>
> - The general shape is different: Firefox OS icons are circular. iOS icons
> are rounded chiclets.
On iOS, the "rounded chiclets" shape is done by the platform.
For FxOs, only things in the store are circular. With a hosted web app, there
is no restriction on the shape. I can publish whatever shape I want - I'm not
bound by any app store or guidelines.
> - Android icons are generally flat and don't have a glare. iOS icons have a
> more plasticy look
This is not so, they have all sorts of shapes - ranging, for instance, from
square (Stark), chiclet (Vector Full), circular (FL Studio Mobile), to unbound
(Punch Quest). See all the shapes here in the top selling list:
https://play.google.com/store/apps/collection/topselling_new_paid
Seems very few devs actually care on Android about consistency in the icons -
yet still works fine.
If we are going to be too restrictive about icons, then that might put
developers off (as it means spending more time and money creating a specific
icon just for FxOS). Look at the cross platform games on the Play Store page -
they have the same icon on iOS and Android (e..g, Fieldrunners, House of the
Dead, Cut the Rope: Time Travel, Carmageddon, etc) - the only exception is
Punch Quest (on iOS it has a background and a border).
> Of course companies have the same logo across platforms,
It's not just companies. It's apps.
> 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.
No, you just throw it back at them and say: "here is my icon - make it look
awesome" (iOS works like this - details below - so Apple, at least, doesn't say
"follow our guidelines" because that would be impossible to enforce on the
Web). Or, "I have an awesome icon, just show it" (Android).
And if some small number of people want total control, they can use UA sniffing
to target a platform.
> 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.
>
Again, *you let the user agent do it for you*. You just provide an image - the
user agent handles the rest. The same way iOS does it.
Look at: http://iphone.appleinsider.com, it contains:
<link rel="apple-touch-icon"
href="http://images.appleinsider.com/apple-touch-icon.png"; />
Which is just a normal image (no gloss, no rounded corners):
http://images.appleinsider.com/apple-touch-icon.png
Which ends up looking like this when added to the home screen (give the icon a
few secs to load - tinypic is a bit slow):
http://i42.tinypic.com/1q3nk2.png
Perfectly integrated chiclet magic. The user agent/platform could to exactly
the same on Android (no gloss, standard rounded corner based on platform
version). The developer just needs to provide an image - the UA handles the
rest. And we could work out a standard display for FxOS so icons always
integrate without the developer having to do anything (i.e., make is a circle
if you want, with a standard drop shadow that fits the FxOS platform).
--
Marcos Caceres
_______________________________________________
dev-webapps mailing list
[email protected]
https://lists.mozilla.org/listinfo/dev-webapps
![http://images.appleinsider.com/apple-touch-icon.png"](http://images.appleinsider.com/apple-touch-icon.png"){kind=link}
