Revision 376207 of Ribbons

  • Revision slug: User:Sheppy/Ribbons
  • Revision title: Ribbons
  • Revision id: 376207
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

{{draft()}}

The "ribbon" concept is an idea for a way to mock up content as being relevant to specific products or product versions. Variations on this can also be used to mark blocks as being ready for review.

Marking content with metadata

Often, we need to mark content as being relevant only to specific products or versions. Currently, we have a variety of somewhat contrived techniques for this. The ribbon concept would work like this:

In this case, there are two paragraphs marked as being specific to Firefox OS. We could just as well have marked them as being relevant only to Firefox 8 and later. In addition, one paragraph is marked as having been flagged for technical review.

Document compatibility information would be marked on the left side of the page, and editorial information (tech/editorial review needed, content revision bars, etc) would go on the right.

The exact appearance of the bubbles describing the ribbon in more detail can be adjusted, of course. We could do a simple icon with a tooltip on hover, and there's obviously room to make these significantly smaller. The idea, though, is that they explain the ribbon in an appealing and easy-to-understand way. The image above places these bubbles in the sidebar areas of the page.

The goal is to have metadata available on content that would allow flagging blocks of content with their compatibility information, and to have the wiki automatically add the ribbon or box content.

Multiple ribbons

If content needs to be marked as being relevant to multiple products, that's possible too:

Here we see an added ribbon for "Safari 6+", in which one paragraph overlaps with the Firefox OS content as well as the technical review banner on the right.

Adapting content for the user's needs

Ultimately, the goal is to let the user customize their experience by letting them specify their compatibility needs and obscuring content they don't need to see based on those needs. For example, if the user specifies that they don't care about any version of Safari prior to Safari 6, they wouldn't see the "Safari 6" ribbon above, but just the content.

Similarly, if the user says they're only interested in content that's compatible with Firefox 10 and later, content flagged as having been removed in Firefox 9 would be stripped from the article entirely (or perhaps hidden away with a button to show it again. Perhaps we could have a the bubble remain behind, floating along in the page sidebar, saying something like "Click to learn about earlier versions of Firefox" or something.

Revision Source

<p>{{draft()}}</p>
<p>The "ribbon" concept is an idea for a way to mock up content as being relevant to specific products or product versions. Variations on this can also be used to mark blocks as being ready for review.</p>
<h2>Marking content with metadata</h2>
<p>Often, we need to mark content as being relevant only to specific products or versions. Currently, we have a variety of somewhat contrived techniques for this. The ribbon concept would work like this:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5123/ribbon-mockup2.png" style="width: 712px; height: 584px;" /></p>
<p>In this case, there are two paragraphs marked as being specific to Firefox OS. We could just as well have marked them as being relevant only to Firefox 8 and later. In addition, one paragraph is marked as having been flagged for technical review.</p>
<p>Document compatibility information would be marked on the left side of the page, and editorial information (tech/editorial review needed, content revision bars, etc) would go on the right.</p>
<p>The exact appearance of the bubbles describing the ribbon in more detail can be adjusted, of course. We could do a simple icon with a tooltip on hover, and there's obviously room to make these significantly smaller. The idea, though, is that they explain the ribbon in an appealing and easy-to-understand way. The image above places these bubbles in the sidebar areas of the page.</p>
<p>The goal is to have metadata available on content that would allow flagging blocks of content with their compatibility information, and to have the wiki automatically add the ribbon or box content.</p>
<h2>Multiple ribbons</h2>
<p>If content needs to be marked as being relevant to multiple products, that's possible too:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5125/ribbon-mockup3.png" /></p>
<p>Here we see an added ribbon for "Safari 6+", in which one paragraph overlaps with the Firefox OS content as well as the technical review banner on the right.</p>
<h3>Adapting content for the user's needs</h3>
<p>Ultimately, the goal is to let the user customize their experience by letting them specify their compatibility needs and obscuring content they don't need to see based on those needs. For example, if the user specifies that they don't care about any version of Safari prior to Safari 6, they wouldn't see the "Safari 6" ribbon above, but just the content.</p>
<p>Similarly, if the user says they're only interested in content that's compatible with Firefox 10 and later, content flagged as having been removed in Firefox 9 would be stripped from the article entirely (or perhaps hidden away with a button to show it again. Perhaps we could have a the bubble remain behind, floating along in the page sidebar, saying something like "Click to learn about earlier versions of Firefox" or something.</p>
Revert to this revision