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.

[shazibhaseen]

Really digging @MarshallCB's designs and how you can use them to represent different states too

[calebsylvest]

I really like this project idea

1. My thinking is the brand identity is going to need to strongly hinge on a wordmark based around "Works Offline".
2. Is "Works Offline" the official moniker? Other variations I've worked up are "Offline First" and "Offline Good".
3. Any iconography needs to have a positive inflection. Xs and slash marks are not positive and denote "brokenness".
4. Branding and technology typically call for strong sans serif typography. But I also like the idea of classical serif fonts, harkening back to the "offline" world and pre-internet age.
5. A tagline could be helpful to elaborate on the meaning.

Here are some of my initial ideas on this concept. I could see this type of brand identity working as a badge in a footer website, a sticker, and other swag.

I'd love to get feedback if anyone has thoughts

[ad-si]

@calebsylvest I like a wordmark. I think everything else was just too confusing. But maybe rather "Offline Ready" ?

[diekus-zz]

All I'd want is not to make this an English word/phrase please. I'm all in for a graphic or logo, but not a word mark or something that will force another English terminology onto end users globally.

[akessner]

I think the graphic should be unique, and evocative. Anything that gets chosen, will in the end represent the concept and once it's popular it will represent the idea, even if initially it doesn't fully make sense. I agree with it not being English specific. It should work in China as well. Maybe there is already a nice glyph in other languages which can inspire a graphic.

[akessner]

Offline in: Thai: ออฟไลน์ Chinese: 離線 Odia: ଅଫଲାଇନ୍ Amhamric: ከመስመር ውጭ Japanese: オフライン Hebrew: במצב לא מקוון Arabic: غير متصل على الانترنت

I tried pasting elvish and Klingon but GitHub wouldn't accept it.

[akessner]

Perhaps we should riff off the service worker logo?

[essenmitsosse]

Im also wondering about the exact use case. The whole idea is compared to the PWA logo. I actually had to check what the "official" PWA logo looks like, since I can't remember ever seeing it in the wild. Since "works offline" is more like a subset of PWA I wonder where you would use that, since no one even seems to use the PWA logo.

Also what would it mean? That the whole website with all pages would work offline if I'd pull the plug now? Or that only the currently opened page would be available offline without a guarantee all navigation is working.

I actually like the idea of having a universally agreed upon logo for this concept but it seems more like something browsers should display (if there would be a standard of how to communicate to browsers that this page would work offline). I see it more like HTTPS — which is communicated through the browser and not as a badge that is arbitrarily positioned on a website.

[nhoizey]

The logo could be an object we use everyday, mostly plugged, but that can also work unplugged.

Idea inspired by the illustration of the "offline first" article on A List Apart:

[remy]

@essenmitsosse you raise some good points (or via questions), so:

On whether it should e something that browsers should display, absolutely yes - the problem is that browsers have dropped the ball on this. I get how "works offline" isn't a binary, so I can imagine how/why browsers don't have an answer to this. But whilst browsers won't do anything about it, we, the web do.

Also what would it mean?

It doesn't "mean" anything. The same way you might see a "secure and trusted" image on websites from the early 2000s - it didn't mean they were using SSL or using a 3rd party secure service, but you had to hope that there were less bad actors.

What I think we're all shooting for here is a way to indicate to a visitor that the current web site will work regardless of the quality of their connectivity.

"Will work" is going to be variable for everyone, and some will fail to deliver on the promise.

And whether you're familiar with the PWA or not (not you specifically, but anyone) isn't really so important. It does help with consistent messaging, but the idea is out there and we, the web, are all talking on the same terms and that bubbles up to business and non-tech users and they start to have a grasp of what that means (and it doesn't mean "has a service worker" etc).

It's the same with Ajax for instance. Many non-tech people will know the term, but have no idea what it means and that really doesn't matter. What matters is that if the "site used ajax it was better than one that didn't".

We want to get to the point where our web site visitors can expect our sites to work offline, and be surprised (or annoyed) when the re-visit to find nothing loads.

---

So for now, without browsers taking the lead, it's left to us to make our indie movement. RSS is also probably one of the strongest examples of this idea working. Early iteration: https://web.archive.org/web/20060227071704/http://blogs.msdn.com/rssteam/archive/2005/10/08/478505.aspx and final selection: https://web.archive.org/web/20051216113745/http://blogs.msdn.com/rssteam/archive/2005/12/14/503778.aspx

[akessner]

Another possitve motif is "cache"

[remy]

Wondering if there's anything that riffs on these images (taken from a google workbox page IIRC).

Particularly the cell signal (though as per all previous comments, with a twist of positive - though the text below that icon was "resilience").

[goranmoomin]

I think that instead of conveying the 'offline' meaning, it should convey something more like 'local' or 'on-machine'. Offline sounds a bit negative contrasted to online. An icon that can convey 'already downloaded' or 'ready on local' would be great, like a download icon with a small check on the left.

[denmch]

Simple wordmarks of dubious legality:

NO-FI 0G

[akessner]

"works on my machine" ;) Ghost in the machine Local enabled Faraday Cage Safe!

[calebsylvest]

Thanks for the input @ad-si, @diekus, @akessner. Adding some updates based on icon and multi-lingual comments and pitch from @remy.

Multilingual-first approach

Revisions based on my earlier approach of a wordmark

On-Off Happy approach

My wife suggest on/off light switch. Then pivoted to the power icon you see on electronics. Mixed that with happy characterized feel.

Signal based icon approach

Based on many of the ideas in thread and @remy 's last post

[terichadbourne]

Folks here may be interested in the UX discussions from various editions of Offline Camp, summarized in these Medium posts. Not included there is this great post from Jesse Beach on conceptualizing offline experiences through the dimensions of freshness, reach, and assurance.

At the latest edition of Offline Camp, which had more representatives than usual from the decentralized/distributed web community, it became quickly apparent that there's a very broad scale of "offlininess" in those peer-to-peer situations, whereas things are a bit more clearcut in the traditional web sector of the Offline First community. However, in either case the user is ultimately interested not just in access to features while offline but also an indication of where and how secure their data is at a given sync state, as detailed in the articles noted previously.

Closest I recall us getting to drawing an adorable icon at Offline Camp was the shrugging cloud:

More Offline First resources: https://medium.com/offline-camp/offline-first-resources-2acc5836e9d4 Offline First Slack org: http://offlinefirst.org/chat/

[benbrignell]

Pretty rough starting point but I was thinking of something on these lines:

The idea came from combining connectivity/wifi icons etc with the conventional on/off/power icon.

[smhmd]

Just the word PWA?

[sholtomaud]

[nadameu]

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.

I like this idea.

Perhaps someone could provide a variant using the Wi-Fi symbol, where the left half is solid black, and the right half is greyed out (or with dashed lines). It conveys the idea that the website works both online and offline.

[meduzen]

No matter the branding that comes out from whatever place, the awareness of offline capabilities will go their way as time flies and as more and more websites and more and more blogposts from web folks (developers, designers) raise awareness about it.

I may be wrong, but I feel a lot of websites makers will chose their own way of saying “this works offline” to the user.

Now, about what direction and goals should be achieved by a branding… Quoting what I posted on Twitter:

Like a “offline ready” logo, which probably would be used as logo+text during a couple of years, then being simplified to the logo without the text? Or simply used along a sentence in a “toast” notification: “[logo] Ready to work offline. [dismiss] [install on home screen]”.

I think the “solution” must work in two contexts:

1. During the education phase, along with proper UI awareness (see my quote 👆);
2. As a standalone logo that will be understood almost – after enough awareness – as well as the Wi-Fi icon one.

As the target audience is very wide and diverse (= all browsers users, so not only folks participating in this thread), the most difficult challenge is probably to be able to check most of these boxes:

• works when translated in any language;
• logo/icon without text convey the “works offline” capability and won’t be mixed up with other icons/logos;
• non-tech people understand it when they see it on a website;
• has the same meaning and clarity when used standalone or with a sentence;
• (optional?) logo is simple, discrete and subtle enough to work across years or become a UI generic icon (like the Wi-Fi one).

As such, what I find interesting in some @calebsylvest ’s proposals is that they take internationalization into account and gives a good idea of something that can work consistently in a lot of contexts.

The logo proposed by @calebsylvest:

> ## Multilingual-first approach > Revisions based on my earlier approach of a wordmark >  > > ## Signal based icon approach > Based on many of the ideas in thread and @remy 's last post > 

My two cents (I’m not a designer but I’m really picky about design, so take it with a lot of distance):

• Standalone logo in signal based icon approach: I think the “works offline” one with the ✔︎ is probably a better start than the others, but lacks of clarity because the strokes are too big, making the logo not discrete and not clear enough.
• Logo with text in the multilingual-first approach: I think “works offline” is clearer than “offline ready” (which is confusing: offline ready to do what?). That said, I really like them all if they don’t have to be declined as standalone logos (in that case, it’s too generic).

[cathibosco]

Hello, I am a designer and UX architect - I am dedicating a lot of my spare research time to PWA this year. So when I saw the call for some iconography I got to thinking....

Here are some variations on a theme. I am drawing and mocking drafts up in 24pt grid as icon style graphics. I am visualizing them in the browser and as something, anyone could begin to identify as "hey this experience is available both on or off-line."

When content is freely available online or offline then it is more accessible - 'more freedom' like flight - unrestrained more performant etc..... (we should consider avoiding any confusing visual communications with planes I think)

I imagined birds on a wire and a bird getting 'off the line', taking flight. So this draft is a representational design utilizing the metaphor of the bird in flight freely flying off the "line". (I know I am stretching it here - but I wanted to share my thinking)

I could do some abstract designs based on this theme as well.

Question will there be other icons needed for other functionality like mobile and web notifications etc?

So here are some screenshots of simple representational vector variations (meaning you can tell it is a bird) based on that thinking of offline. We may also need to also see how the PWA logo might influence another variation or series of iterations. I can supply SVG's if we narrow in on a design or if anyone else wants to iterate.

[the-dijkstra]

a quick concept that may need some refinements

[iemadk]

Here is a quick idea

[adamduncan]

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?

[ninabreznik]

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

[Daganev]

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

[praveeno]

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

[loiccattani]

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?

[cathibosco]

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.

[Daganev]

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

[lamplightdev]

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.

[RitterKnightCreative]

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!

[essenmitsosse]

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.

[Daganev]

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

[cathibosco]

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

[cathibosco]

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.

[cathibosco]

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?

[elliz]

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

[calebsylvest]

@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

[capnmidnight]

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

[cathibosco]

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

[sholtomaud]

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?

[meduzen]

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.

[Daganev]

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

[nhoizey]

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.

[cathibosco]

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

Thank you

[remy]

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?

[ollicle]

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