Rethink language selector again 😀

While working on aligning all of the pieces of the page on the various viewport sizes I realized we have a bit of a UI/UX problem on mobile due to the components we have in our overall page header section. This is best described via a screenshot of a reference page on mobile:

As you can see from the above, not only does it feel cluttered/overwhelming, it pushes the actual content of the page further and further down. I, therefore, started rethinking how we surface a language selector.

First, a general question. Yari 1 will ship with translations but, we will link to frozen translations from the language selector until we relaunch translations. Secondly, translations will have a banner that indicates that the translation is frozen and, will offer a link back to the up to date English version. Third, there will be a period of time, 4-6 months perhaps, between Yari 1 and the relaunch of translations where the frozen translations for some pages will get out of date so, do we want to actively provide the means to link to them?

With all of that, should we perhaps consider kicking this can down the road and decide/work on its implementtion after the initial launch?

With that said and out of the way 😀 and assuming you are still reading, I do have a possible proposal we can implement in time for Yari 1. Here is my thinking around this problem.

1. Users get to translated content, as most content, from an external search engine that returned results in their native/browser/OS language. i.e. very few people change their language while just generally browsing MDN (I know, except changing it to English, see point 2 below 😀)
2. The most asked for feature is to have a setting to always display MDN in English. This then also suggests that should a user want to change the language, they are going to want to switch to English.
3. This is not a commonly used part of MDN and as such, should definitely not be so prominent and take up so much of our screen real estate.

With all of that in mind, I broke this down into the following statement:

Provide the ability to change the current language of an MDN page in an easy, accessible, non-obtrusive manner. Make the most common use case quickly accessible.

From a UI perspective I see the above implemented as follows:

Mobile

Tablet

Desktop

Couple of notes about the above:

1. The icon used is the universal language icon for selecting a different language: http://www.languageicon.org/
2. But, for accessibility the heading “Change language” is only visually hidden on mobile and tablet and,
3. The icon is a link and will have title and aria-labelledby attributes that clearly describes the links intent i.e. “Select your preferred language”
4. The English link, will only be shown if you are no already on an English page and as such, change to the English version when shown
5. The language icon will link to the language selector in the footer as can be seen in the screenshot below:

I would really appreciate everyone’s input here. Thanks!

[mnme]

Just a heads up: The language selector is currently unaligned for me on Firefox 84 / Arch Linux. Instead of opening a new issue I’m just leaving this comment here, I hope that’s okay.

[schalkneethling]

I’m just leaving this comment here, I hope that’s okay.

Very OK. Besides, I think @schalkneethling is planning to move the language dropdown form thingy to the bottom of the page. Perhaps you can come back and check that it’s properly aligned there when it gets there.

I just remembered this issue and lo and behold, the alignment doesn’t seem to be fixed (Arch Linux / Firefox 86.0.1).

Thanks for reporting. I opened an issue for this. I am going to style our select elements better now that we have settles on a solution for this component. Along with this, I will also address the issue here.