A visual metaphor for offline enabled webapps to communicate their state with the user.

[ryanramage]

It would be nice to have a consistent way across apps to visually represent the state of offline/online, etc. I did a pretty poor prototype here: http://garden20.github.io/sync-status-icon/

Some definitions of states:

• disabled: The user has not enabled offline support yet. The site/app acts like a traditional app.
• online: The user has enabled offline support, and the backing store is available
• offline: The user has enabled offline support, and the backing store is unavailable
• syncing: The user has enabled offline support, the backing store is available, and data is replicating back and forth.

[gr2m]

it would be cool if we could somehow use the favicon for it, what you think? :)

That won't help for mobile as they usually don't show it, but if the icon becomes convention, why not use it on the favicon on bigger screens? I'd love to give that a try, I think modern browsers even support anymated gifs / pngs these days

[gr2m]

oh nice, check http://lab.ejci.net/favico.js/, works in Chrome & Firefox :)

[jancborchardt]

@ryanramage it seems strange that the rotated offline icon looks like a »log out« or »shut down« symbol. The offline icon as a whole also looks a bit cryptic.

Additionally, in the state changes, we should pay attention so it also works when you are color blind. That is, ideally both color and form change.

Maybe instead we just work with a colored circle, white icons in it:

• disabled: grey, with white double arrows in it
• syncing: blue, with white double arrows in it, smoothly and slowly spinning (spinning too fast will distract)
• online: green, with white checkmark in it
• error: red, with white x in it
• offline: grey, with white cut circle in it (or alternative »offline« symbol – grey because being offline is not an error so it should not be red)

Something like this:

What do you think?

[tara-gibbs]

Maybe the syncing icon could be animated so that it's clear that something is happening in the background?

[gr2m]

somewhat related: https://github.com/hubspot/offline – a little script + themable UI for online/offline indication

[gr2m]

related: http://branch.com/b/redesigning-the-save-symbol-let-s-do-this