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

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).

Same with disconnected

Assume would want a positive icon

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…

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

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.

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

Broken infinity; endless but not connected?

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

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.

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.

@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.

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.

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. 🤷🏽‍♂️

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

@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?).

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

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 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.

@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.

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

@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).

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

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.

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... :-)

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

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

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?

@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.

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?

a quick concept that may need some refinements

Here is a quick idea

I like the idea of a positive spin on network signal iconography. Strong, simple shape, much like the shield of HTML/CSS.

Does a tick communicate "you're good to go" as far as network's concerned? Or does the down arrow say "this has been downloaded to your device" and/or "will work when network's down"?

A couple of quick mockups:

Edit: Outline version isn't as strong but might nod to no network?

Was playing around with some ideas. I'm not a designer but just had some inspiration and want to try it out. ^^

I liked the idea of the shrugging cloud, and the half dotted cloud with the checkmark so I put them together...

how about this, i think google doc show this to indicate doc is available to use offline also
https://material.io/resources/icons/?search=offlin&icon=offline_bolt&style=baseline

Having thought about it for a few days, how can we be direct? How can we use iconography that convey the idea in a clear and direct manner? What do we even want to tell, exactly? To whom?

1. What iconography do we have to tell that a thing works?
2. What iconography do we have to tell that a thing is offline, in a positive way?

We have seen quite a few good new proposals to tell (2), but other than reusing the classic "ready" meaning tick mark or a thumbs up for (1), what can we do?

And if we don't want to be technical, I don't think we can be direct. We must use some kind of metaphor.

What metaphor means "being cut off from the rest of the world" in a positive way? For me as an European, might not work for everybody: a lost island icon?

The other issue I see is that people have learned from experience that when they don't have network connectivity, their smart devices don't work well, at least the internety parts of it. And they know a few contexts in which this is generally the case (planes, tunnels, undergrounds). So they don't even try anymore, they fall back on music, podcasts, locally installed games, read a book, sleep, look out the window...

The goal for a "Works Offline" logo might be to communicate that this app will behave like those other things, it will be constantly available, even in absence of network connectivity.

For apps or websites that display this logo, regular behavior don't apply. People need to unlearn a lot of things, first of all is the witchcraft involved with entering a URL in the complete absence of internet connectivity and expect the thing to work at all!

It's relatively easy for technical people to get it, but how do we convey that concept to a larger demographic?

Great discussions ... the material icons came to mind for me too. The one with the lightening bolt is being used by AMP ... I’m going to try to turn that on it’s side for an abstract variation on the bird metaphor... pair the icon for us to see.

The design heuristic that I’m thinking about is:
Helping users to be able to recognize what an icon represents. Since this is a “new” experience, that is challenging so it’s important that once it’s discovered, it’s easily recognized. Recognition rather than recall.

Going to make another set of non-representational drafts.

Working in a tunnel idea: See if you can spot the internet cat.

I had an idea of somehow showing the web 'packaged' - i.e. standalone - attempting to give an idea of offline abilities. Not sure it really works as it's not at all obvious, but this icon is supposed to be the world inside a box/cube. Might be slightly better if the circle was a globe, although I'm not sure that would be clear at small sizes.

Some really good collaboration so far on this! I agree with others, it's going to be hard to use an already exiting icon and then try to turn it around into something that's it's not).

One of the things that I haven't seen so far is what benefits to the user are there for working offline? I see a lot of WI-FI plugs and clouds but connectivity is close to everywhere these days. Even on an airplane, you can get WI-FI. What about users who are plugged in? And most users don't even know why their Internet is broken, only that it's not working optimally.

What's also not talked about is spotty/slow connectivity, unreliable, etc. How do we turn those concepts around into features?

A few benefits to working locally / offline (or using an app that does):

• Fast / no need to wait for a server (lightning bolt / speedometer)
• Global / works anywhere / universal (globe / mountains, etc).
• Reliable (shield / check / etc.)

IMO this icon could almost be a badge almost like the old HTML5 shield icon. Not sure if that jogs any of the more artistic people in this thread but the right concept will slap you in the face (in a good way) once you see it. The "half cloud" has some merit, not sure if putting a lighting bolt next to it will busy it up or something but that could be interesting.

Keep rocking!

I think @RitterKnightCreative has some good points. A lot of the discussion here comes from a very technical-aware standpoint.The question is, how would the average user with no understand of inter protokolls and PWAs think about a website that is offline available.

Anything that riffs on stuff like "cache", "downloaded to your device", "no connection to the server neccessary", "no wifi required", "it's a PWA" etc. talks about the implementation detail of what and how it is happening. That't not the benefit to the average end user, that is the "how it came to be".

For most users, offline availability will just mean "I can use this website in a location where I usually wouldn't be able to load a website". This concept isn't new at all. It's in no way unique to websites and there are already plenty of apps out there that have a similar feature:

Apple Podcasts

Spotify

Google Apps

I feel like hooking into similar, already existing concepts would be the best way to go, to make laypersons actually understand what the icon is supposed to mean.

All implementation details of what is actually going on in the background are not only unnecessary, but actually distracting.

By that logic, something with an arrow pointing down is the best shot there is in my opinion. And yes the arrow means "downloaded" and actually is an implementation detail, but it's also a concept most users will already be familiar with.

edit: The symbol technical is there to make things available offline, not to signify that content is actually available offline. But I'd still say its the best direction to go, to stick with familiar stuff.

I would advise against the "down arrow" for two reasons.

1. Alone, it has negative connotations.
2. It would make people think that they need to click on it to download the webpage and make it work. When clicking does nothing they will think the page is broken.

The google checkmark on the ground is better of those options.

Quite a bit of good ideas here:
https://material.io/design/communication/offline-states.html#offline-functionality

Ok - I got a bit obsessed and did a quick audit of the browser icons, the PWA graphic in the description and targeted a set of icons that convey
connectivity offline in a few levels - including limited and not available offline.
here is a screenshot... I think I will record a screenshot walkthrough and drop the link here so everyone can understand the audit and what I was looking at. Feedback is welcome of course. I can add these to a Miro board with any others if we all want to be able to comment on many designs together etc.,..

Abstracted variations in inverse and reverse of existing icons including offline material icon, wifi and add this app. *As the level of connectivity is increased the "wings go up".

Here is another view of some with color and with the logo..
I ran out of time to do a screen recording...

There is a stroke version and a fill version here.

The last set of variations for today... I'll try to record a walkthrough tomorrow - feedback is welcome.
There is an existing pattern for a fill style icon for offline status... but I did a fill and an outline style. The fill style is preferred in one color with a red, orange, yellow color for communicating levels added. How many levels are there?

There's always the w3c offline and storage logo from https://www.w3.org/html/logo/ ... kinda fits the bill, but looks like an old hard drive so maybe not as catchy

@elliz thanks for sharing! I've never seen the offline representation for HTML5 or the Badge lockup. Very interesting

Edit: adding a screenshot of the Offline & Storage icon

Anything riffing on the wifi connectivity icon, or airplanes, focuses on what PWA's "are not", i.e. "are not network connected". But PWAs don't lack network connectivity features. They just don't require them for their base functionality.

What "are" PWAs? One of the biggest motivators for my use of the PWA metaphor is home-screen installation. I don't have an image editor installed on the machine I'm currently on, so I'll use some found images:

These are each kind of sloppy in their own ways, but ultimately the idea is there. "This site can live on its own".

Status Update:
I am fortunate to have the opportunity to work with some advocates and members of the Material Design team and have alerted them to the need for PWA iconography. I think we need to do a bit more research on where and when the visual indicators get surfaced to our end-users. The dialogue happening here helps. Please help us clarify and understand what is missing below:

There is a variety of information we need to visually communicate and actions people can take as far I can tell thus far.

Actions -

• Install App "Install this App" (You can add this to your home screen) Experience exists in Chrome
  Twitter.com for example

• Use App "To open this link choose an app" (When the app has already been downloaded & this is already on your home screen(?) Experience exists in Chrome Twitter for example

• Remove or deactivate App?

Information -

• This is a PWA

• This is a PWA with limited content available offline

• This is a PWA with a lot of content available offline

• Works offline

• Push notifications

• Mobile push notification?

• Refreshing?

1. We need some engineering input here to surface the full range of information we could potentially communicate to users.
2. We need to know where that gets displayed for desktop and mobile. + Bowsers and sites.... think icons and badges.....

Status Update:
I am fortunate to have the opportunity to work with some advocates and members of the Material Design team and have alerted them to the need for PWA iconography. I think we need to do a bit more research on where and when the visual indicators get surfaced to our end-users. The dialogue happening here helps. Please help us clarify and understand what is missing below:

There is a variety of information we need to visually communicate and actions people can take as far I can tell thus far.

Actions -

• Install App "Install this App" (You can add this to your home screen) Experience exists in Chrome
  Twitter.com for example
• Use App "To open this link choose an app" (When the app has already been downloaded & this is already on your home screen(?) Experience exists in Chrome Twitter for example
• Remove or deactivate App?

Information -

• This is a PWA
• This is a PWA with limited content available offline
• This is a PWA with a lot of content available offline
• Works offline
• Push notifications
• Mobile push notification?
• Refreshing?

1. We need some engineering input here to surface the full range of information we could potentially communicate to users.
2. We need to know where that gets displayed for desktop and mobile. + Bowsers and sites.... think icons and badges.....

Q: Are we focusing on PWA too much? Does the original "this site works offline" mean that the site is a PWA?

Q: Are we focusing on PWA too much? Does the original "this site works offline" mean that the site is a PWA?

I think if a branding has to come to life, it should focus to “Works offline” (hence this repository). As explained by @remy:

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.

When it comes to other features enabled by PWAs, I think it must be websites makers duty to properly onboard the users with settings in the UI (“Want push notifications? Tap here.”). Plus, these actions require user interactions while working offline is a feature available once the page is loaded and the Service Worker has done its caching tasks.

That’s why I’m in favor of keeping things simple towards a single goal: growing the offline web awareness.

A static website isn't a PWA but it should be able to be viewed offline.

I agree, let's focus on offline here.

@cathibosco what you're doing will be useful of course, but it might be better opening another discussion elsewhere. Browser vendors already chose different icons for the installation hint (aka "ambient badging" I think), so you should work with them first, I believe they already discussed it, even if they didn't make the same choice:

• Samsung Internet: https://medium.com/samsung-internet-dev/what-does-it-mean-to-be-an-app-ace43eb6b94d
• Firefox Android: https://hacks.mozilla.org/2017/10/progressive-web-apps-firefox-android/
• Opera: https://dev.opera.com/blog/pwa-badge-pop/
• etc.

Awesome - We really appreciate the clarity and the quick feedback! @nhoizey and @meduzen and @sholtomaud

Thank you

First of all, I wanted to say: wow, what amazing work you've done 👏

Since things have quietened down a bit now, I'll collect up all the images that were posted here and create a new issue.

I think from there we'll be able to step back and whittle down which images work well and which might not work so well. From there, hopefully we start to see a handful that we're starting to see works. I guess another part of the second round is to get more eyes on the images - which will be down to us to grab co-workers (which I'm sure with the pandemic moving us to working from home might end up as our partners, kids and pets!) and asking their thoughts too.

Though, happy to admit I'm making this up as I go and if anyone thinks direction needs something more, please jump in 👍

Any objections?

@cathibosco concepts sparked some ideas for me I’ve been meaning to share:

1. The circular symbols made me wonder if something based on an upside down wifi/signal symbol could work. An offline website turns ones expectations for a website on its head. Flipping an otherwise familiar symbol associated with connectivity upside down could be a means to convey that idea.
2. While pondering the discussion regarding the negative connotations associated with offline – the bird in flight made me think of offline going beyond online. Going further than online can. This to me is an entirely positive spin on it, and a concept that could form a strong basis for a stand alone mark.

@ollicle I'm going to both sharpen and broaden my research across browsers and with our engineers. I will be happy to continue to share and make public the research and design work/findings so please feel free to add me to future discussions.
'Works offline' is a great first goal and we absolutely got a lot of great async discussions here.

We need a Wilson

@remy ,
How about this? The logo can be the iconic T-Rex from google Dino run -if there are no trademark issues- Wearing pyjamas and sleeping cap and in a dialogue box it says "Finally, I can take some rest".


Because someone somewhere in the world will be having network issues at any given time ,So T-Rex will be running 24/7. But thanks to offline websites he can finally take some rest