Round 1: post your ideas / designs

[remy]

I believe the web needs a logo or image to show "this site works offline".

Yes, this should be something that a browser's UI surfaces, but it needs to come from us, the web, before it's codified.

Why?

Branding is an incredibly strong and can serve as motivation for products to evolve and improve. Simply hanging a name on an idea gives it incredible power.

This is seen most recently with PWA - a term that does not specifically point to a single technology, but many, many companies now want their sites and apps to be PWAs (regardless of what the reality of that is).

There's a slew of terms and logos that have benefited the web, two others that spring to mind: ajax and web 2.0.

Creating a visual cue to visitors that your site will work offline is powerful as it both shows that URLs can work offline, but also puts pressure on businesses to support offline (and PWA techniques) as their competitors adopt offline support.

What

The PWA logo project is an excellent example of adoption and creative innovation by the web community.

Once the "works offline" is graphically codified we'll see icons, images, banners, stickers, to show off capabilities.

To be clear: the target audience is not designers and developers. We already understand offline. The target audience is the web site visitor and by proxy, the business people making decisions about their web products.

Round 1

This has been approached before, but hasn't stuck. Maybe this won't, hopefully it will.

For round 1, it's open season on ideas - nothing is a bad idea.

This is a positive and safe environment to express ideas, and distasteful behaviour will be banned and blocked - please see the code of conduct if you're unsure.

Once round 1 is over (possibly when ideas settle down, or someone proposes a date), then we'll move to round 2 for some voting (or iteration) and hopefully settle on something we all like and can be proud of as the web community.

[PaulBarrett79]

Something based around the aeroplane mode icon - non-devs know it means offline-but-working. Tag brackets instead of wings?

[AdaRoseCannon]

[remy]

These are quick searches for "offline icon" that I think shows a negative aspect of offline - it seems to suggest offline is bad or broken (but that might just be me).

[benaadams]

Same with disconnected

Assume would want a positive icon

[gnclmorais]

Exactly, @remy. I’ve been thinking about this since I saw your original tweet and that is the challenge I see with the “regular” offline icons. Having a ✖️on it looks negative but we would probably want to convey positivity, as in, this is a good feature…

[RussellBishop]

Perhaps the thing to communicate is that this is 'local to your device'. It's almost even 'saved'?

[Boldewyn]

I like Russell’s idea. Basically even reduced to a floppy disk icon with check mark.

I tried to play with the idea of making it clear, that “unplugging” is a “safe operation” now.

[tmaiadev]

I've sketched something here. How about something like this:

[benaadams]

Broken infinity; endless but not connected?

Could have a connected version if also used as active state icon

[ollicle]

Could be useful for the symbol to include features that help communicate current offline state, some examples:

• This page is ready to work offline now
• Offline resources are in the process of loading
• This page has been loaded from offline resources
• This page’s offline resources are old/stale

Very likely that level of detail is likely too much to expect a graphic mark to communicate, but why not dream :)
A singular mark that signified accompanying text as offline capability related would be very welcome.

[Daganev]

Could be useful for the symbol to include features that help communicate current offline state, some examples:

• This page is ready to work offline now
• Offline resources are in the process of loading
• This page has been loaded from offline resources
• This page’s offline resources are old/stale

That seems doable with colours and flare.

[remy]

@ollicle though I agree, I think the biggest hurdle is the starting point of a single image. I'm far from the first that's suggested we need some offline branding.

[ollicle]

Absolutely agree @remy Must work standalone first. This is challenge enough!
I recall a similar effort in the CouchDB community too many years ago. Offline is easier now with service workers, the symbol design however, remains equally challenging.

[diekus-zz]

out of curiosity, where exactly do you see this being used? There are already some sort of badging in browsers like Samsung Internet, Edge, Firefox and Chrome geared towards end users to indicate they can add the site to homescreen. And while I get that that can be only a glorified link and doesn't necessarily imply 'works-offline', maybe a spin on those to indicate offline capabilities can work. I'm asking where do you intend to see this mostly used because that itself gives us nice constraints for the visuals. 🤷🏽‍♂️

[diekus-zz]

and I guess initially "Add to Homescreen" that morphed into an "Install" that might evolve into a "also works offline"!