Last updated on 19 September 2023
It seems like a no-brainer, but plenty of us get this wrong. Here are three guidelines on web design for multiple languages.
TL;DR
In short, here are three things a web designer or developer can do to make it easier for people to find the right language for her website:
- Figure out which language a person wants, and show that one to them.
- Show them your offered alternatives and offer the option to choose one.
- If they choose a different language, translate what their looking at, instead of redirecting elsewhere.
The Good, The Bad, and The Ugly
Note: These sites may have changed since writing this post! The following descriptions are accurate as of 22 December, 2011.
The Good: Wikipedia
- Win: Detects language automatically.
- Win: Shows available languages in the respective languages.
- Win: You can switch languages on the same page.
The Bad: Moleskine’s e-Shop
- Fail: The site defaults automatically to its Italian version.
- Fail: The language selector is in the current display language.
- Fail: Switching languages kicks the person out to a new home page.
The Ugly: Nintendo’s Website
Before a person can see any content, they have to look at an ugly country selector?! Fail!
Figure Out Which Language They Want
People usually set up their browsers and mobile devices in their preferred language. For websites, JavaScript can detect navigator.language or navigator.browserLanguage properties.
Apps should use the device’s or operating system’s language. Just detect and dynamically serve the content in that language. Web design for multiple languages meta-guideline: often, the best way to make a choice is not to need one at all.
By the way, language is not the same as location!
These two properties should be treated separately at all times. If location is necessary, like when a shop sells different products in different countries, derive a visitor’s location from their IP address. Device location is more accurate, but it’s usually not necessary for these use cases.
Make It Easy to Switch Languages
People are looking for what they want and need, not for what they already see. That’s why showing a link called “English” on an English page makes no sense.
To put it in perspective for us westerners, take for example a site in Hebrew or in Japanese. Can you change the language there in 30 seconds or less? Real people will only give you ten seconds before they give up and leave.
Facebook’s unethical behavior notwithstanding, their product’s internalization approach is a good compromise. They detect a person’s language automatically, then show a selection of alternative languages with an icon to reveal the rest.
Keep Them in the Same Place
There are four ways I can think of to enable a site to change language without changing context.
Some websites use different subdomains to localize their content. For example, switching from English (en) to Spanish (es) could look like this: en.site.com/this-page to es.site.com/this-page.
Others keep it all on one domain, but use folder structures,. Going from English to Spanish could look like this: site.com/en/this-page to site.com/es/this-page.
The most elegant way to implement these would be to dynamically change the content, without loading a new page. It’s more elegant because:
- The change is faster, so it doesn’t feel like navigating to a new page
- The URL is updated, so the page can be shared in the right language
Three Simple Guidelines
I understand that this can be difficult for multinational corporations that have different product offerings (ergo different content) for different countries. However, as stated above, location is not the same as language, and the two should be treated independently of one another.
Think about the poor expats who can’t shop in their new home countries!
If all multi-language websites would follow these three simple guidelines, we’d have lower bounce rates, higher profit margins, and most importantly happier customers.
Oh, and world peace… Thanks and good luck 😃
