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.

Article Continues Below

A red flag about flags#section2

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?#section3

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#section4

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#section5

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#section6

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

  1. Thank you for this! I just had this exact conversation with a client a few days ago and appreciate having a well thought out article on an authoritative site like ALA to point the client to when they choose to disagree with my line of thinking.

  2. “Simplified Chinese” is a short form, and could be misleading; but the official name for the character system is 简化字, which can be literally translated as Simplified Chinese Characters. It refers only to the characters used in writing 中文; the language being written is pretty much the same regardless. If that still bothers you though you could always be cutting edge and render all of your content in Zhōngwén written in Pinyin, the Latin script standard. It’s heavily used by the PRC government, and most literate folks both read it and use it for characters they’ve forgotten.

  3. Thanks for this article.
    First part talks about things I agreed upon but not able to express in so concise manner.
    Last part teach me things : I did not know about the chineese subtilities. It’s always a pleasure to discover something new 🙂

  4. Thanks for the great article! It’s interesting to see that different places have different localization issues.

    Just want to point out one minor typo: Traditional Chinese should be 繁中文 (traditional) as shown in the Global Voices screenshot.

    And to Tad Dockery: Please don’t use Pinyin to display Chinese, ever! There are a lot of homophones in Chinese, so Pinyin is difficult to understand and causes ambiguity. That’s why Chinese is a logosyllabic language and needs the many different characters to convey meanings clearly. As an example, zhōng can mean 中, 盅, 忠, 忪, 衷, 鐘, 鍾, 螽, 終 and wén can be any of 蚊, 雯, 聞, 文, 汶, 紋, so it will be very confusing to read any text using pure Pinyin. I heard that one professor tried to write his diary using pure Pinyin in the past and found that he could not understand the diary later in his life! Also, Chinese has many different flavours but Pinyin is only for Mandarin, so it’s difficult for people not fluent in Mandarin to read Pinyin actually. Therefore, please stick with Pinyin (in the case of Mandarin) for 語 (oral language) and Simplified/Traditional Chinese Characters for 文 (written language).

  5. Ukraine has it’s own language, so that’s a bad example ;-).

    Although in that specific use case from article it would be wiser to use American flag, in most other cases if some U.S. citizen don’t know English is from England then I don’t really care ;-].

    Especially in long lists of languages (like on Wikipedia) it would be much easier to find a flag then a text. Also there is always a problem – should I write the name of the language in it’s native language or current language? That might be obvious, but on Wikipedia you sometimes just want to see an original article even if you don’t really know the language (e.g. for numbers and pictures or automated translation). So I would say that ISO codes are not only good for mobile/short versions, but generally a good idea (if you really don’t want icons).

  6. Merci à tous for your comments.

    @Ryan @Richard Many thanks for your kind words. I’m happy to hear this column can help you convincing clients and discovering new things.

    @Mat @Tad @hin159 I’ve called Silvia Romanelli to the rescue as my expertise on the Chinese language is limited. I hope she’ll answer your questions here.

    @Maciej I’m aware Ukrainian is a language, and Ukraine a multilingual country with a sizeable Russian-speaking population. Which makes it a great example I believe, as the recent events of Euromaidan, Crimea and Eastern Ukraine highlight how tense the relation between Ukraine and Russia is. In this delicate context, requiring Russian-speaking Ukrainian users to click on the Russian flag is almost a political act.
    With regard to ISO codes and localized languages names, I reckon the europa.eu approach of showing both the code and the name is a interesting solution. It helps to understand the alphabetical order and—as you’ve said—to spot a language in a long list of foreing words.

  7. Many good points in your article.

    F, D and I derived from international vehicle registration codes—far from fitting in this context. But fr, de, it wouldn’t be much better either. These codes might work for a specific target audience (apache.org use them), but how many users would recognize their language tag? Think about speakers of Arabic, Hindic or Chinese languages who might not even be familiar with the Latin alphabet. Use language names in target languages.

    BTW, according to BCP 47 language tags no longer refer to ISO, but to the IANA Language Subtag Registry, cf. this article.

    By saying “One powerful language selection feature is the automatic detection of a user’s language” you meant language negotiation based on user settings in the Accept-Language HTTP header, I guess? The (one) language of the browser UI might differ from the the user’s (might be more than one) preferred languages for content.

    I wouldn’t call “country based on…IP address” a ‘detection’; it’s a guess at best. Other kinds of geolocation (on mobile devices) should give better results.

    You might want to check a similar article I wrote About languages and flags.

  8. Hi everybody,

    @Mat In my exchanges with Mandarin speakers I’ve never had the feeling that the expression « simplified Chinese » was perceived as judgmental or derogatory. But I may be wrong, this kind of cultural perceptions may be subtle and tricky. I’ll ask a Chinese friend and then tell you what she said.

    @Tad About the expression 简化字, I looked it up in the dictionary and I found it there, but I have to say I don’t remember having ever come across it before, neither in oral conversation nor in written texts.

    If you want to be accurate and say « simplified Chinese characters » rather than « simplified Chinese », then the expression I’d use would rather be 简体字 (and the same structure for « traditional Chinese characters » : 繁體字 ). As for the pinyin, I agree with @hin159 : I would avoid it, for the reasons hin159 already mentioned.

    @hin159 Thanks for pointing out the typo, you’re right : « Traditional Chinese » should be written using traditional characters : 繁體中文

  9. Hi @Mat, as I said, I asked a Chinese friend about the possible derogatory meaning implied in the expression « simplified Chinese ». He told me that « simplified Chinese » and « traditional Chinese » are absolutely fine for the great majority of Chinese speakers, be they mainlanders or Taiwanese. However, a minority of them may perceive the expression 繁體中文 (« traditional Chinese ») negatively because 繁 means « complicated » ; that’s why some Taiwanese prefer to say 正体 instead, which means « standard/correct form of characters ». Also, according to my Chinese friend, some Chinese speakers may see the simplified characters as an impoverished version of the traditional ones, but that’s more about the characters themselves than about the fact of calling them « simplified ».

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

I am a creative.

A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career