A List Apart

Menu
Antoine Lefeuvre on The Web, Worldwide

Stars and Stripes and ISO Codes

This is the real story of a promising French start-up expanding into the U.S. market. The founders now have West Coast offices and the app has been fully translated into English. One minor detail though: to switch to the website’s English version, American customers have to click on… the Union Jack.

A red flag about flags

Article Continues Below

Don’t laugh—this story is no exception. Bla Bla Car, one of Europe’s hottest tech companies, is a truly international operation with a presence in 13 countries. Strangely enough, only 11 flags are listed in Bla Bla Car’s version selector. Who’s missing? Belgium and Luxemburg, whose only “fault” is to be multilingual countries. Requiring Dutch-speaking Belgian users to click on the Netherlands flag, or American users on the British flag, is a cultural faux-pas. It can even raise political hackles when you have, say, a Ukrainian user clicking on the Russian flag.

Bla Bla Car language selector list with flag icons
Bla Bla Car language selector.

Version links are a key element of an international website’s navigation. But many web designers still confuse flags and languages. “What is the flag of English?” is a surreal yet often-heard question in web agencies throughout Europe (and arguably all around the world). The obvious answer is that languages have no flags. But does this mean flags are not to be used on websites?

Do you speak es-MX?

Let’s be honest, flags are also popular with designers because they are small, colorful, handy 16px-wide icons you can stick in the top-right corner. Sometimes you really have to deal with limited space. We had this problem a few months ago at my start-up, Clubble, when setting up our pre-launch website. We’re happy to write “English,” “Français,” and “Español” in big letters in the desktop version, but what about the mobile version?

We need the language selector to be immediately visible and don’t want to hide any language in a drop-down list. The solution: ISO codes, “a useful international, and formal, shorthand for indicating languages.” English is “en,” French is “fr,” and Spanish is “es.” ISO codes include language variants such as American English: en-US, Brazilian Portuguese: pt-BR, or Mexican Spanish: es-MX. (Note that the first part is in lowercase, leading some purists to argue that language codes should always be in lowercase as on the European Union official portal.)

Clubble mailing groups mobile home page
Language ISO codes on Clubble’s mobile websitee.

Avoid the temptation to create your own abbreviations just because ISO codes don’t fit your design. Visitors to Switzerland’s official portal might be surprised to find an English-only website. Well, the French, German, and Italian versions exist. They’re just hiding behind the tiny F, D and I links!

Government of Switzerland home page, English version
Hidden language selector at gov.ch.

One powerful language selection feature is the automatic detection of a user’s language and/or country based on the browser’s language and IP address. However it isn’t a substitute for a well-designed, easily-accessible language selector, as it cannot always detect who the user is and which content he wants. On my last trip to Spain, nike.com stubbornly refused to let me access the French website no matter what I tried—going to nike.fr, or even choosing France in the country selector.

A country is more than its language

A German version is not the same as a version for Germany. A user in Austria or Switzerland would be reading local restaurant reviews in German; we can’t assume they are interested in restaurants in Germany. When you localize an app or website, you go beyond the translation to adapt your product to a specific country. Think in terms of places under the same laws and customs rather than populations that share a way of speaking. It’s the same principle you apply to domain names: .de is for the country Germany, not the language German. In this case, using a country’s flag to tell users you offer a version tailored to their culture is a great idea.

Mercado Libre country selector with flag icons
Mercado Libre’s country selector.

E-commerce websites tend to be less confused about flags and languages, as most are localized, not just translated. Selling in a foreign market implies you comply with local laws, take payments in the local currency, understand your clients’ culture and sometimes ship goods out of country. Chances are your website won’t have one but two selectors: language and country. Or even three!

Site with multiple selectors
Keen Footwear and Skyscanner’s language and country (and currency) selectors.

The Middle Language

When labeling a link with the name of a language, localize the name too! That is, write “Tiếng Việt,” “Русский,” and “עברית” rather than “Vietnamese,” “Russian,” and “Hebrew.” Facebook’s and Wikipedia’s language selectors are two impressive examples.

Facebook and Wikipedia language selectors
The Facebook and Wikipedia language selectors.


Culture is often a sensitive issue. How to localize the name “Spanish,” for instance? The answer seems easy—“español,” of course. But this word happens to have connotations. In the national context of Spain, where strong regional identities and languages such as Catalan or Basque make headlines, the term “castellano” (from the historical region of Castile) is often used, as it puts all the Peninsula languages on the same level. During a six-month-long trip across South America, I also heard “castellano” a lot, probably used by those who think “español” has a colonial feeling. Many websites and applications choose to offer two Spanish versions: one for Spain and one for Latin America that is commonly named “español latinoamericano.”

Government of Spain regional language selector
La Moncloa (headquarters of the Spanish government) language selector.

Naming the Chinese language isn’t any easier, I realized when I naively asked journalist and orientalist Silvia Romanelli how to say “Chinese” in Chinese. Chinese is what ISO calls a macrolanguage, i.e. a family of dozens of languages and dialects. What’s more, since Chinese languages use ideograms, there’s a big difference between written language (文 wen) and oral language (语 yu). So unless you’re designing a voice-based app, label your link 中文, zhongwen—literally, the Middle Language (China is 中国, zhongguo—the Middle Kingdom).

Wait, that’s not all! In the People’s Republic under Mao Zedong, Chinese characters were simplified, so that today two written forms exist: 简体中文 (simplified) and 繁体中文 (traditional). Again, this can be a political issue, as the traditional form is mostly found in Taiwan. Silvia Romanelli therefore recommends following a country-agnostic approach like Global Voices and simply stating “Simplified” or “Traditional”, not “Chinese for China” or “Chinese for Taiwan” as does Facebook.

Language selector with two versions of Chinese named simply “Simplified” and “Traditional”
Global Voices language selector.

Venture forth

You had a nice app in English with no character-encoding bugs, no awfully long words that don’t wrap nicely, and no emotional or political issues about flags and languages. Now you’re leaving the comfort of designing at home to venture into foreign lands of unknown cultures and charsets. But what can be seen as a threat is actually an opportunity. Because it is tedious and complicated, internationalization is often overlooked. If you can provide a well-localized user experience, that’s still is a nice surprise today for most non-English-speaking users. Isn’t this what we’re all looking for: a great way to stand out.

12 Reader Comments

Load Comments