Frontend translation guide cleanup (#3908)

source/_includes/asides/developers_navigation.html

@@ -78,6 +78,7 @@
           <li>{% active_link /developers/frontend_add_more_info/ Add More Info Dialog %}</li>
           <li>{% active_link /developers/frontend_creating_custom_panels/ Add Custom Panels %}</li>
           <li>{% active_link /developers/frontend_creating_custom_ui/ Add Custom UI %}</li>
+          <li>{% active_link /developers/frontend_translation/ Translation %}</li>
         </ul>
       </li>
       <li>

source/developers/frontend_translation.markdown

@@ -1,6 +1,6 @@
 ---
 layout: page
-title: "Translate Home Assistant frontend"
+title: "Frontend Translation"
 description: "How to translate the frontend for Home Assistant."
 date: 2017-10-27 13:00
 sidebar: true
@@ -10,25 +10,32 @@ footer: true
 ha_release: 0.57
 ---
 
-The translation of the Home Assistant frontend is still a work in progress. More phrases will be available soon.
+## {% linkable_title How to start %}
+[Join the translation team](https://lokalise.co/signup/3420425759f6d6d241f598.13594006/all/) and choose your language. Even if your language is completely translated, extra proofreading is a big help! Please feel free to review the existing translations, and vote for alternatives that might be more appropriate.
 
-#### {% linkable_title How to start %}
-[Join the translation team](https://lokalise.co/signup/3420425759f6d6d241f598.13594006/all/) and choose your language. If your language is not listed you can request it at [GitHub](https://github.com/home-assistant/home-assistant-polymer/issues/new). Please provide both the English name and the native name for your language. Example: German / Deutsch.
-Note: Languages that differ from the language of the country of origin need a translation for the latter first.  Example: `French as used in Canada` requires a generic `French` translation.
+First time users may find it helpful to switch between multilanguage and single language view using the <img src='/images/frontend/lokalise-multilanguage-view-button.png' alt="Multilanguage view" style="width: 17px; border: none;"/> button. For more information about the translation workflow, please see the [Lokalise translation workflow documents](https://docs.lokalise.co/category/iOzEuQPS53-for-team-leads-and-translators).
 
-Even if your language is completely translated, extra proofreading is a big help! Please feel free to review the existing translations, and vote for alternatives that might be more appropriate.
+<p class='note'>
+The translation of the Home Assistant frontend is still a work in progress. More phrases will be available for translation soon.
+</p>
 
-For more information about the translation workflow, please see the [Lokalise translation workflow documents](https://docs.lokalise.co/category/iOzEuQPS53-for-team-leads-and-translators).
-
-#### {% linkable_title Rules %}
+## {% linkable_title Rules %}
 1. Only native speakers should submit translations.
-2. English is reference language.
-3. Stick to [Material Desing guidelines](https://material.io/guidelines/style/writing.html).
-4. Don't translate or change proper nouns like `Home Assistant`, `Hass.io` or `Hue`.
+2. Stick to [Material Desing guidelines](https://material.io/guidelines/style/writing.html).
+3. Don't translate or change proper nouns like `Home Assistant`, `Hass.io` or `Hue`.
 
-Tip: Use `Multilanguage view` (eye-symbol) and hide those languages you don't need.
+## {% linkable_title Adding a new language %}
+If your language is not listed you can request it at [GitHub](https://github.com/home-assistant/home-assistant-polymer/issues/new). Please provide both the English name and the native name for your language. For example:
+```
+English Name: German
+Native Name: Deutsch
+```
 
-#### {% linkable_title For maintainers %}
+<p class='note'>
+Note: Languages that differ from the language of the country of origin need a translation for the latter first.  Example: `French as used in Canada` requires a generic `French` translation.
+</p>
+
+### {% linkable_title Maintainer steps to add a new language %}
 1. Language tags  have to follow [BCP 47](https://tools.ietf.org/html/bcp47). A list of most language tags can be found here: [IANA sutbtag registry](http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry). Examples: `fr`, `fr-CA`, `zh-Hans`. Only include the country code if country specific overrides are being included, and the base language is already translated.
 2. Add the language tag and native name in `src/translations/translationMetadata.json`.  Examples: "Français", "Français (CA)"
 3. Add the new language in Lokalize.