315 строки
9.9 KiB
Markdown
315 строки
9.9 KiB
Markdown
---
|
||
layout: page
|
||
title: Master Template
|
||
permalink: /content-guidelines/master-template/
|
||
---
|
||
|
||
|
||
|
||
# Heading One
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
|
||
|
||
|
||
|
||
<!-- Full Width Image -->
|
||
<section class="image-with-caption" markdown="1">
|
||
|
||
|
||
Full width image (above)
|
||
|
||
</section>
|
||
<!-- END: Full Width Image -->
|
||
|
||
|
||
|
||
<!-- Half Width Images -->
|
||
<section class="image-with-caption grid-container grid-x grid-padding-x">
|
||
<div class="cell small-6" markdown="1">
|
||
|
||
|
||
Half width image (above)
|
||
|
||
</div>
|
||
<div class="cell small-6" markdown="1">
|
||
|
||
|
||
Half width image (above)
|
||
|
||
</div>
|
||
</section>
|
||
<!-- END: Half Width Images -->
|
||
|
||
|
||
|
||
## Movie Title Lorem Ipsum
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
|
||
|
||
|
||
|
||
<!-- Video Popup Thumbnail -->
|
||
<section class="video-popup" markdown="1">
|
||
|
||
[](a0_OsLGI0k4 "What’s Great Content and Design?")
|
||
|
||
</section>
|
||
<!-- END: Video Popup Thumbnail -->
|
||
|
||
|
||
|
||
<!-- Half Width Video Popup Thumbnails -->
|
||
<section class="video-popup grid-container grid-x grid-padding-x">
|
||
<div class="cell small-12 medium-6" markdown="1">
|
||
|
||
|
||
|
||
#### What’s Great Content and Design?
|
||
|
||
Featuring Madhava Enros, Senior Director of Firefox User Experience, and Dietrich Ayala, extension developer.
|
||
|
||
</div>
|
||
<div class="cell small-12 medium-6" markdown="1">
|
||
|
||
[](a0_OsLGI0k4 "What’s Great Content and Design?")
|
||
|
||
#### What’s Great Content and Design?
|
||
|
||
Featuring Madhava Enros, Senior Director of Firefox User Experience, and Dietrich Ayala, extension developer.
|
||
|
||
</div>
|
||
</section>
|
||
<!-- END: Half Width Video Popup Thumbnails -->
|
||
|
||
|
||
|
||
## Icons
|
||
##### Examples of goood icons
|
||
|
||
|
||
|
||
<!-- Icon Grid *** use "shrink" class to fit grid to image size -OR- use "auto" class to fit images to grid width *** -->
|
||
<section class="icon-grid grid-container grid-x grid-padding-x">
|
||
<div class="cell shrink">
|
||
<p><img src="{{ site.baseurl }}/assets/img/content-guidelines/example-icon.png" alt="Icon" title="Icon" width="53"></p>
|
||
</div>
|
||
<div class="cell shrink">
|
||
<p><img src="{{ site.baseurl }}/assets/img/content-guidelines/example-icon.png" alt="Icon" title="Icon" width="53"></p>
|
||
</div>
|
||
<div class="cell shrink">
|
||
<p><img src="{{ site.baseurl }}/assets/img/content-guidelines/example-icon.png" alt="Icon" title="Icon" width="53"></p>
|
||
</div>
|
||
</section>
|
||
<!-- END: Image Grid -->
|
||
|
||
|
||
|
||
Your extension’s name is critical. It shows up everywhere—in search results, on [addons.mozilla.org](http://firefox.com "addons.mozilla.org"), and in the browser itself. It’s sometimes one of the few pieces of information that a user has to determine whether or not they are interested in what you built.
|
||
|
||
Research shows that people really do take an extension’s name into account when making installation decisions. And, what you put into the extension name field becomes your URL on [addons.mozilla.org](http://firefox.com "addons.mozilla.org").
|
||
|
||
Between your extension name and subtitle, you have up to 70 characters to use—that’s because 70 is the max character limit for your headline in external search results. It’s best to keep your extension name shorter so you have more characters left over for your subtitle.
|
||
|
||
* Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Enim facilisis gravida neque convallis a cras.
|
||
* Id diam vel quam elementum pulvinar etiam non. Quam id leo in vitae turpis.
|
||
|
||
## Extension Name Do’s and Don’ts
|
||
|
||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||
|
||
|
||
|
||
<!-- Do this -->
|
||
<section class="do-this" markdown="1"><header><h5>Do This</h5></header>
|
||
|
||
1. __Make it memorable__
|
||
2. __Make it unique__
|
||
3. __Keep it short for better display on smaller screens__
|
||
4. __Make it easy to read and say__
|
||
5. __Give an idea or hint about what your extension does with an illustrative word or metaphor__
|
||
|
||
<!-- Example (Block) -->
|
||
<div class="example" markdown="1">
|
||
|
||
Examples:
|
||
An extension that saves passwords is called __Remembear__
|
||
|
||
An extension that puts a cat on new tabs is called __Tabbycat__
|
||
|
||
An extension that improves YouTube is called __Enhancer for YouTube__
|
||
|
||
</div>
|
||
<!-- END: Example (Block) -->
|
||
</section>
|
||
<!-- END: Do this -->
|
||
|
||
|
||
|
||
<!-- Not this -->
|
||
<section class="not-this" markdown="1"><header><h5>Not This</h5></header>
|
||
|
||
##### 1. Don't include a description.
|
||
|
||
Save these details for your subtitle and description.
|
||
|
||
<!-- Example (Inline) -->
|
||
<span class="example">Example: Videomix, a fast video downloader</span>
|
||
<!-- END: Example (Inline) -->
|
||
|
||
##### 2. Don't stuff it with keywords.
|
||
|
||
Google is smarter than this and it just makes your extension look untrustworthy.
|
||
|
||
<!-- Example (Inline) -->
|
||
<span class="example">Example: Youtube Download Videos, Convert, Media, MP3, MP4, Free.</span>
|
||
<!-- END: Example (Inline) -->
|
||
|
||
##### 3. Don't use random words to differentiate, like “Barbara Notetaker.”
|
||
|
||
Instead, create a descriptive name that is not already in use, like “Instant Notetaker.”
|
||
|
||
##### 4. Don't call it something with no meaning, like “hoyv.”
|
||
|
||
While the name “hoyv” doesn’t work, the name “uBlock Origin” for an ad-blocking extension does because it contains the word “block”.
|
||
|
||
##### 5. Don't include "WebExtension," “Firefox” or “Mozilla."
|
||
|
||
##### 6. Don't include version number or a previous name.
|
||
|
||
<!-- Example (Inline) -->
|
||
<span class="example">Example: Weatherchanger (fix version)</span>
|
||
<!-- END: Example (Inline) -->
|
||
|
||
##### 7. Don't make it hard to read or say.
|
||
|
||
<!-- Example (Inline) -->
|
||
<span class="example">Example: TrLrs! Tab Changer.</span>
|
||
<!-- END: Example (Inline) -->
|
||
|
||
##### Remembear Example:
|
||
|
||
<!-- Full Width Image -->
|
||
<section class="image-with-caption" markdown="1">
|
||
|
||
</section>
|
||
<!-- END: Full Width Image -->
|
||
|
||
##### List Example:
|
||
|
||
[Honey
](http://firefox.com "Honey
")
|
||
[Ghoastery](http://firefox.com "Ghoastery")
|
||
[Disconnect](http://firefox.com "Disconnect")
|
||
[Ecoesia](http://firefox.com "Ecoesia")
|
||
[Mate Translate](http://firefox.com "Mate Translate")
|
||
|
||
</section>
|
||
<!-- END: Not this -->
|
||
|
||
|
||
|
||
<!-- Do this, not this, side-by-side -->
|
||
<section class="do-this-not-this grid-container grid-x grid-padding-x">
|
||
<div class="cell small-12 medium-6">
|
||
<div class="do-this" markdown="1"><header><h5>Do This</h5></header>
|
||
|
||
1. __Make it memorable__
|
||
2. __Make it unique__
|
||
3. __Keep it short for better display on smaller screens__
|
||
|
||
<!-- Example (Block) -->
|
||
<div class="example" markdown="1">
|
||
|
||
Examples:
|
||
An extension that saves passwords is called __Remembear__
|
||
|
||
An extension that puts a cat on new tabs is called __Tabbycat__
|
||
|
||
An extension that improves YouTube is called __Enhancer for YouTube__
|
||
|
||
</div>
|
||
<!-- END: Example (Block) -->
|
||
|
||
</div>
|
||
</div>
|
||
<div class="cell small-12 medium-6">
|
||
<div class="not-this" markdown="1"><header><h5>Not This</h5></header>
|
||
|
||
1. __Make it memorable__
|
||
2. __Make it unique__
|
||
3. __Keep it short for better display on smaller screens__
|
||
|
||
<!-- Example (Block) -->
|
||
<div class="example" markdown="1">
|
||
|
||
Examples:
|
||
An extension that saves passwords is called __Remembear__
|
||
|
||
An extension that puts a cat on new tabs is called __Tabbycat__
|
||
|
||
An extension that improves YouTube is called __Enhancer for YouTube__
|
||
|
||
</div>
|
||
<!-- END: Example (Block) -->
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- END: Do this, not this, side-by-side -->
|
||
|
||
|
||
|
||
<!-- Tile -->
|
||
<section class="tile" markdown="1">
|
||
|
||
#### Requirements
|
||
|
||
* Minimum length: 2 characters
|
||
* Maximum length: 70 characters between extension name and subtitle
|
||
* Lorem ipsum: dolor sit amet, consectetur adipiscing elit
|
||
* Sed do eiusmod: tempor incididunt ut labore et dolore magna aliqua
|
||
* Ut enim ad: minim veniam, quis nostrud exercitation ullamco laboris
|
||
* Nisi ut aliquip: ex ea commodo consequat
|
||
* Duis aute: irure dolor in reprehenderit in voluptate velit esse cillum
|
||
* Excepteur sint: occaecat cupidatat non proident
|
||
* Bunt in culpa: qui officia deserunt mollit anim id est laborum
|
||
|
||
</section>
|
||
<!-- END: Tile -->
|
||
|
||
|
||
|
||
## Stuck? Try this.
|
||
|
||
#### 1. Identify the problem
|
||
|
||
What problem does your extension solve? You had a reason for creating that extension...what was it? Write that down.
|
||
|
||
Take the popular extension, Remembear, as an example. You can imagine the creator of this extension writing, "I am tired of having to remember all of my passwords for the web. And I worry that these passwords will get stolen. I want a simple way to save and secure my passwords so they are always at my fingertips. And I don’t want the experience to be an unpleasant, security-laden process. Let’s make it friendly and easy.
|
||
|
||
#### 2. Identify key words
|
||
|
||
Pull out the key words (nouns, adjectives, verbs) and phrases from your description
and create a word list. Add other words that come to mind based on those words, including synonyms.
|
||
|
||
Remembear Example:
|
||
|
||
* Tired
|
||
* Remember
|
||
* Passwords
|
||
* Worry
|
||
* Stolen
|
||
* Simple
|
||
* Save
|
||
* Secure
|
||
* At your fingertips
|
||
* Friendly
|
||
* Easy
|
||
|
||
#### 3. Example Lorum Ipsum
|
||
|
||
Pull out the key words (nouns, adjectives, verbs) and phrases from your description
and create a word list. Add other words that come to mind based on those words, including synonyms.
|
||
|
||
Remembear: dolore eu fugiat nulla pariatur lemera dosada peel.
|
||
|
||
[Extension Link
](http://firefox.com "Extension Link
")
|
||
[Extension Link
](http://firefox.com "Extension Link
")
|
||
[Extension Link
](http://firefox.com "Extension Link
")
|
||
|