1006010 - Design quick compatibility data marker on top of pages

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: BrowserCompat, defect)

Description

[Jeremie Patonnier :Jeremie]

While writing the compatibility data requirements, one of the most requested feature from users were the possibility to have some quick and simple markers on top of each pages to know which browser is supporting the features describe on the pages.

Comment 1

[Chris Mills [:cmills]]

+1 for this - I've seen quite a few requests for this too. I created a support info ribbon mockup, to give form to my thoughts on the subject:

http://people.mozilla.org/~cmills/browser-compat-ribbon/

Comment 2

[Stephanie Hobson [:shobson]]

I've done some thinking about this for Bug #1019880. 

There's a couple problems I haven't been able to solve :(
- The logo for the desktop and mobile version of some browsers is the same.
- The logo for some browsers is not recognizable.

This means I haven't found a good way to avoid actually writing out the browser's name.

Comment 3

[Stephanie Hobson [:shobson]]

Attachment: The problem with icons

Here's an illustration of the problem with just icons.

Comment 4

[Stephanie Hobson [:shobson]]

Attachment: Quck reference with text

Here's a potential solution that still needs some work (check and cross are not good for localization).

Comment 5

[Jeremie Patonnier :Jeremie]

I tend to agree that if we want some fine grain information, icon are very limited. However, a very rough signal such as those use on http://status.modern.ie/applicationcache could be good enough in many cases.

Actually the question is how far do we want to go in term of accuracy for our summarized information at the top of the page? (this is a open question, everybody is encourage to provide feedback).

Comment 6

[Jean-Yves Perrier [:teoli]]

I think we absolutely need version numbers at the top. Saying IE is supporting something means nothing. People want to know at a glance if it is first supported by IE8 or IE11. It is a critical information for a Web dev.

Then we need to make sure that people understand that the granularity of information there is limited and that for specific features (like a specific attribute (e.g. srcset on <img>)) they need to get to the detailed information at the bottom.

We should add a link there with an evocative text.

Also an important piece of information nowadays for API are the context where they can be used:
Web page (Window context, in regular browsing or when prefetching), Workers (either Dedicated, Shared, Service or the non-standard Chrome). 

Finally for FxOS, the certified/privileged/regular apps info is also very important.

All this need to appear in the quick compat markers.

Comment 7

[Chris Mills [:cmills]]

I agree that version numbers are important. I also think that having this information available up the top for an "at a glance" summary is very useful, and is definitely better than not having it (the modern.ie way of doing things is still useful, albeit a bit limited.)

I like Stephanie's new proposed solution. So could we add version numbers to that, where the version number is significant?

So

Firefox
Desktop FxOS Android

Could mean "supported for a long time now in all Firefox browsers"

whereas

Firefox
Desktop 33 FxOS (No) Android 33

Would mean only supported as far back as Gecko 33, but not enabled on FxOS.

For IE, even versions as far back at 6 could still be significant

Internet Explorer
Desktop 6 Mobile ?

A ? could be used where version number is potentially significant but unknown.

cross and tick are not great internationally. How about using some kind of system where supported stuff is full opacity, and unsupported stuff is slightly shaded out? This increasingly seems to be a de facto standard these days.

Comment 8

[John Whitlock [:jwhitlock]]

The BrowserCompat project is canceled.  See https://github.com/mdn/browsercompat for current effort. Bulk status change includes the random word TEMPOTHRONE.