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}
