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"!

[remy]

@diekus At first, personally, I'd image this being used as badging on the pages (a hark back to the days of "Works best in IE"), but I believe, if it can be constrained/limited in it's visuals and there's backing from any browser (bit of a pie in the sky hope, but hope all the same), then there's potential for their own badging (perhaps dare I say even in search results?).

[nhoizey]

If "airplane mode" can be used as a metaphor for offline, there is prior work like this from Alex Patrascu: https://dribbble.com/shots/1258088-Offline-Pages-Icon

[voxpelli]

Are we talking logo or icon or even a logo that contains an icon, but where the icon can also work as an independent, tiny, logo representation?

Eg. the PWA logo is not an icon, but most suggestions here are icons rather than logos.

Also, big +1 on @gnclmorais, that this would preferably convey something positive, a feature, not something that helps when something else is broken 🙂

Did a quick stab at something that could maybe convey something positiv:ish, but still also convey the offline bit:

Edit: My thinking being: To convey the nature of lacking connectivity to a positive place where that usually happens, like the country side, the mountains or such. Also: Sun going down is also like the day is about to get "offline" as well. Yes, too much thinking, but 🤷

[TomasEkeli]

I wanted to keep it very simple and geometric. Went with a circle for the client, a square for the server. Could also possibly replace the circle with the logo for the client (chrome, firefox, edge - they all seem to have circular logos now). In a more peer2peer scenario the square could be replaced with a circle.

[gnclmorais]

@TomasEkeli, that is highly appealing for me sense of aesthetics! Visually speaking, I love it. However, I think it struggles to meet something @remy expressed quite well above:

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.

[nhoizey]

Playing on the "airplane mode" metaphor with a check sign (to convey something positive):

[voxpelli]

@nhoizey My thoughts on basing on airplane mode: I lean towards it not very future proof or accurate. Eg. in terms that you actually have internet on many airplanes today, offline isn't something that happens only in airplane mode and airplane mode itself deactivates more than just internet access, which might otherwise be available for an offline app (eg. Web Bluetooth).

[nhoizey]

@voxpelli you're right. I never had a plane travel with connection, but I know it is more common nowadays… 🤷‍♂️

[Daganev]

Random inspirations various "plane mode"

"WO - "Works offline" idea

Some "web ideas", with upside down "wifi" logo to represent "downloaded"

My kid insisted I add this as well.

[mnapthine]

Are we talking logo or icon or even a logo that contains an icon, but where the icon can also work as an independent, tiny, logo representation?

Eg. the PWA logo is not an icon, but most suggestions here are icons rather than logos.

Also, big +1 on @gnclmorais, that this would preferably convey something positive, a feature, not something that helps when something else is broken 🙂

Did a quick stab at something that could maybe convey something positiv:ish, but still also convey the offline bit:

Edit: My thinking being: To convey the nature of lacking connectivity to a positive place where that usually happens, like the country side, the mountains or such. Also: Sun going down is also like the day is about to get "offline" as well. Yes, too much thinking, but 🤷

I like the idea here almost somewhere between 'works anywhere' whilst 'reconnecting/reflecting with yourself/nature'... 'reflecting on what you have'. Agile stems from the 'reflective practitioner'... perhaps a 'reflection mode' or something circular, the circle of life, circular economy, circular connection... These are just words of course... :-)

[TomasEkeli]

How about this then (redone with slightly thicker lines on the globe)

[remy]

@Daganev love your kid's version. Though, I'm not sure if I'm tripping or if it actually looks like that! :)

[diekus-zz]

I really like the idea @voxpelli suggests, but I'm afraid trying to establish the concept of "country side" might be alienating for many users. As someone from a tropical country a the concept of "country side" looks very different from the traditional sense, and not necessarily a place where in my experience I wouldn't find connectivity (tropical rainforest ftw :P).

I think @TomasEkeli has a nice proposal, although I'm not sure there's a need to define several statuses? is it more or a brand/indicator that users will start recognizing from site to site? It's a nice icon and maybe with an arrow down in the small circle would convey the message.

In this vein, maybe trying to stylize the common indicators of online/offline users are used to? The down side is there's not much left to play with, since it's mostly a globe, the wifi/contactless type of "signal waves" (and I also think text should be present since it being a end-user/consumer thing we'd want this in every variable possible?)

I quickly put together some simple badges that try to convey the message that there's no connection and that its fine, but I am not entirely sure I understand the scope of this?

I'm trying to use color (which i need to check if it's the same meaning of 'available' in different cultures) to indicate that it 'works offline'. I'd love to explore more abstract scenarios but not sure if that plays against the idea since maybe it's fine to talk to end users in their terms?

[remy]

@diekus I'm not sure I have a full grasp of the scope myself. I've mentioned this before, but I'm not the first to suggest we (the web) take on this problem, we just ("just") have to make lots of noise until it becomes common knowledge.

[akessner]

What's the opposite of "the web" and the opposite of "online"? An isolated hut? An old safe? Analog folders/briefcases💼? Maybe some 90s computer iconography?

[loiccattani]

Here's a play on the old Macintosh application icon by Susan Kare (shown below), a download arrow icon, and a green color to convey ready state...

[voxpelli]

@diekus The earth is round and the sky has the sun, moon, stars and clouds wherever ;) So I think it's possible to make something that's not alienating anyone

@arko The download arrow icon gives me the feel that you are downloading something and that gives me the feel that one is downloading something standalone, like an app, and I think that @remy's intention is that this should apply to all sites with (Service Worker-based) offline functionality

---

Some things I think the logo/icon should ideally be capable of:

• Convey the function/purpose that the offline mode serves rather than the technical fact of it. The "why" rather than the "what".
  • As the function is independent of connection status, probably also not convey the connection status / offline readiness
  • Be targeted towards ends users rather than devs, which a function/purpose one would probably convey better
• Be technically independent. Not based on eg. wifi or "airplane mode" as there are plenty of other connectivity forms – ethernet, mobile etc. (Unless one intentionally wants to follow the example set by the classic floppy-disk save icon)
• Be mono-chrome and possible to use in whatever color palette a site wants it (but maybe have a standard color as well, like http://www.feedicons.com/)

---

Anyone else wants to extend and add to that list maybe?

[voxpelli]

A slight play on my first one, not final quality at all, just quick sketches:

[Zamralik]

Rather than showing something negative like "offline", maybe use a "low signal" symbol with a checkmark ? (meaning: work with barely any connection)

[akessner]

A slight play on my first one, not final quality at all, just quick sketches:

I wonder if there is a constellation that represents "work" or "working" which can be used here.

[TomasEkeli]

@zamralik isn't that what @tmaiadev suggests a bit up in this thread?

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

[maxichrome]

@TomasEkeli I like where you come from with that idea, but it sends mixed signals. We need to somehow signify something 'positive' (like 'hey, this works offline!') that doesn't also come with the negative connotation of 'NOT connected' - that's the hard bit 😕

[akessner]

• Convey the function/purpose that the offline mode serves rather than the technical fact of it. The "why" rather than the "what".

  • As the function is independent of connection status, probably also not convey the connection status / offline readiness

What is the function/purpose? Doesn't it depend on the site? Or is it just the fact that it "works" when other sites are unreachable?

[maxichrome]

I like the 'constellation' idea - just unsure how it functions at a smaller size. I'm not fully sure if it fully conveys the idea of 'working offline' but here's some of what I came up with playing around with the idea:

[Zamralik]

@TomasEkeli

I doesn't. It shows an offline symbol, not a low signal one.

[akessner]

Only constellations I found meaningful was. caelum- the chisel. Like engraving the site into your computer. And "bootes" the workman.

[akessner]

I like the 'constellation' idea - just unsure how it functions at a smaller size. I'm not fully sure if it fully conveys the idea of 'working offline' but here's some of what I came up with playing around with the idea:

The single star looks too much like a Pokemon ball for me.

[maxichrome]

@Zamralik Toyed with the low-signal idea a bit as well. Not super confident on the low-resolution implementations but if we run with it I think it has the best potential, especially for catering to a non-tech-savvy audience

Check it out in Figma if you'd like: https://www.figma.com/file/9ORRQ3yot3iETsb50HbDza/works-offline?node-id=1%3A122

[maxichrome]

Maybe we could ditch the star and run with a checkmark instead? It could communicate to a general audience better.

[akessner]

What about a floppy disk with the internet globe on it?

[remy]

What about a floppy disk with the internet globe on it?

As odd as that might sound (not sure how well the floppy has survived time!), during this round, I think all ideas are good ideas 👍

[denmch]

I think the idea to be conveyed is that an internet connection is optional for a working experience, and one way to convey that is with a common symbol for online communication, a cloud, in half solid and half dashed outline, with a check mark for success either way.

Here’s a quick pen and paper sketch.

[akessner]

[MarshallCB]

[remy]

Riffing on @MarshallCB's design (a bad copy/paste hacky job - sorry!)