• use lang for the language of the page, then the other parts of the page with a different language
• support different writing direction. Logical CSS properties help.
• handle text expansion with adaptive layouts. Avoid to truncate the text.
• apply a minimum width to avoid text shrinking in other languages. Also think about the height.
• readable typography is important
• make sure every user-facing string is translated such as alt-text, title or desc nodes in SVG.
• different languages have different word order, so avoid string templates
• ensure consistency of microcopy

  Microcopy is all the little bits of text that appear throughout the site: the nav links, the sidebar headings, the form field labels, stuff like that. When microcopy is written and used consistently, the site layout becomes much more predictable, and users won't have to guess

It means the atoms and some molecules in atomic design.

TL;DR refers to the language selector checklist

In my experience, when asked to change a country or language, a vast majority of users will immediately head to the header of the page first, and if they can’t find it there, they’ll jump all the way to the bottom of the page and scout the footer next.

I find this rule true in my experience:

We can’t confidently infer users’ preferences without asking them first.
While polite nudging is reasonable, automatic redirects are not.

As a rule of thumb: let the user choose between language, country and currency.

For example, if you want to purchase sneakers on Adidas from Germany but deliver them to your friend in Poland, you need to be able to make sense of the Polish language when checking out.

Moneses shows two tabs in the right upper corner of the header. Users can switch between language and country, defining preferences for each separately. [...] We can allow users to customize further parts of the UI, from currency and auto-translation to units of measurement and date formatting.

Preferred customization:

• shipping location
• preferred currency
• units of measure
• time/date formatting
• time zones preferences
• level of experience

Modal windows are often dismissed. So, In the mock-up above [with a modal on the bottom right], the important content isn’t blocked by the modal.

• display most languages/countries in their local format . It avoids the assumption that the user needs to understand English.
• breaking options down by tabs, either horizontal or vertical ones
• provide users with poignant autocomplete suggestions. But Sometimes the fine-tuning of making autocomplete work for many different languages might be an effort way too underestimated and way too time-consuming.
• Use the globe or translate flags to indicate the choice of locales

On Atlassian, if the user with a different browser language preference enters the site, it suggests changing the language at the very top of the page, with a globe icon appearing there, too.

After looking at the available options I definitely prefer number 2 in the list above: the name of the language as text in the language itself, possibly followed by the name of the language in the language of the current page.

After thinking about it, this is what is the most explicit, even if it is not shiny 👍‍

Do not use flags to represent languages. Explications are provided in the article.

JavaScript contient une solution d’internationalisation assez puissant, qui permet de détecter la langue d’un texte ou de formater une date, un nombre…

Ici, j’utilise tout juste 10 lignes de JS pour capter une date entrée par l’utilisateur et la traduire dans la langue qu’il souhaite.

J’ai mis une liste immense de codes de langues, mais beaucoup ne sont pas supportées. Je vais peut-être faire un filtre pour les virer dynamiquement.

En attendant, vous pouvez essayer des langues un peu communes : anglais, allemand, danois… Même le perse, l’arabe ou le japonais sont supportés !

Et ça formate la langue correctement, avec les majuscules, les vigules et l’ordre tout comme il faut. Actuellement il n’y a pas les variantes (pour l’anglais, par exemple j’ai juste « anglais », sans distinguer anglais UK et anglais US).

J’étofferais ça probablement un jour, peut-être avec les émoji de drapeaux, etc. pour faire joli.

Je n'y a avais pas pensé, mais c'est tellement simple et pratique ! Mhmhmhmh il y aurais moyen d'améliorer cela !
#project #idea