Support alternative calendars, and names in native and transliterated forms

Have Unicode support 🔖 Unicode and Internationalization Primer for the Uninitiated Use descriptive variable names Hello {firstname_lastname} will be far more useful than Hello {0} 

Informative variable names where language translation occurs will help future developers internationalise consistently

Don’t concatenate strings in your code* 🔖 How to concatenate localized strings mindfully

🔖 Internationalization & Localization Tips – Concatenation

See a full set of internationalisation guidelines here.

🌟 Don’t Concatenate: Translations are not a word-by-word replacement

To find our why concatenation is not your friend, read Internationalization & Localization Tips – Concatenation by localisation expert Daniel Neumann. As Daniel explains, translations are not a word-by-word replacement. Take the following example phrase:

Jane liked/commented on your article, Internationalisation Tips.

The above phrase can be created programatically depending on the action taken by users, so the words in bold could be concatenated by the developer, leading to issues:

• “Your”, in Spanish, could be translated as “su” or “suyo”
• “Liked” can be participle or past tense, so may not translate the same across languages.
• “Article” can either be verb or noun, and can translate differently depending on the target language.

Essentially, internationalisation lays the foundation for localisation.

In all, your code can use techniques that make it global-ready, so it’s not constrained to one language. This is seen with concatenation above, but another may be to leverage libraries when outputting dates, times, and currencies. For example, moment.js can convert dates and times to the correct locale depending on who’s visiting your site.

📍 Localisation

If internationalisation is designing your software so that it can be adapted for a wider audience, then localisation is the actual process of adapting for said audience. Localisation is often abbreviated to ‘l10n’ because, you guessed it, there are 10 letters between the l and n.

The following image adapted from John Saito demonstrates how design details can get lost in translation. The subtitles on the video can’t be understood by English-only readers:

So in the internationalisation leg of the procedure, you may include a markup in your code that allows for right to left (RTL) or vertical text. During localisation, you’ll then deal with the translation of the user interface for your intended audience(s).

People who come from different cultures and use different languages work to make sure that all kinds of languages, whether read from left or right, can be shared and used on the Web.

Tim Berners-Lee, inventor of the Web – W3C

It’s not just language that often doesn’t translate well, but features too. Say your mother tongue is Arabic, Urdu, or any of the other 12 languages that are traditionally written RTL – translation of a website alone is not enough (or sometimes even possible) without the software’s ability to support bidirectional text in the first place.

‘Mirroring’ and RTL Reading

When designing, this is commonly referred to as ‘mirroring’. Here, the reading pattern starts from the top right, and zig-zags, affecting where you place CTAs, image progressions, and product colocation, in contrast to the western F pattern of reading.

More Localisation Tips:

Localisation Technique	Example/Links
Numerical formats (e.g. currency, date & time)
Legal specifications for a particular region	GDPR notices in Europe became a requirement for sites collecting user information
Adapting the UI with cultural sensitivities in mind	Removal of images/text that may have different, negative, connotations in another jurisdiction – or that may even be illegal!
Regional language or spelling (BrE/AmE), and cultural-appropriate tone	🔖 Localisation and Translation on the Web
Multilingual SEO	🔖 Multilingual SEO best practices 🔖 SEO tips for your multilingual website

Understanding and preparing for various cultural nuances helps you serve more people around the world, and from a business perspective, it can also give you a competitive international edge. In addition to increasing the availability of information, it’s also no longer an option not to have internationalisation; without the ability to localise your website later down the line, you could be alienating potential users, reducing your reach, and increasing your dropoff rate.

Designing and building for wider cultural norms

On a podcast by ShopTalk Show, technical writer Rachel Andrews talks about editing work for an international audience: “One of the things you learn…is the number of things that are completely baffling outside of your own culture.” For example, according to Hofstede’s country comparison tool Chinese and US users differ massively in individualism, indulgence and power:

What makes sense in one culture or region doesn’t necessarily in the next; with localisation, your aim is to address their specific needs and queries. You don’t just want a word-for-word translated product, you want your content to be understood as it was intended.

Be Culturally Concious

What should we be culturally conscious about when designing? Some standout examples include:

• 🇨🇳 China API Access: Many APIs (such as Google) are blocked in China
• 🇯🇵 🇪🇬 Japan/Egypt = RTL: Text direction (vertical/RTL) differs, and so the layout of your text, as well as your content (logos, navigation etc.), should take this into account

• 🎨 Eastern Bloc Colour Association: The colour red can still stir up associations with communism (and, in Latin America, the colour yellow is linked to death and mourning)
• 🍔 China Discover Button: on mobile apps, a ‘discover’ button is used instead of the western’s Hamburger button.

Discover is the new hamburger menu where, instead of this hamburger menu, you see an icon of a compass and that’s appearing in most of the popular Chinese apps. – Jenny Shen

The more your product caters for cultural preferences, the more likely people will engage with it. So where to begin? If you’re a one-man-band, this can be quite a feat, but you could start by researching “cultural considerations when building a website in [country name here]”, for example.

Better still, bring someone onto your team who is from/has some experience working in that particular area, and who will be able to let you in on the ins and outs of the region and identify potential issues before they snowball.

And best of all, get someone/a group of people to beta test your app:

I think the design of WeChat is really usable. . . when I started to use Facebook Messenger I thought it was really hard…WeChat has more functions than messaging. . .

I don’t know why I can’t open messaging (directly) on Facebook, when I click the icon it takes me from Facebook to Messenger and it’s annoying.
ResearchGate.net

For more on cultural norms, check out this article from Jenny Shen: UX Design Across Different Cultures — Part 1 | by Jenny Shen | Prototypr.

TL;DR

Internationalisation (i18n) paves the way for localisation (l10n). Lack of internationalisation at the start can = regrets at the end. By forfeiting your ability to adapt your product for a wide range of regional requirements, you’re limiting its potential pool of users. Not to mention wasting valuable time (and in some cases, money) unpicking and relaying the foundations of your design.

So add those markers, enable that code, and thank yourself (and me) later.

* * *

Useful links:

• Think globally, act locally: Elianne Schutze talks about i18n on the web
• Let’s get technical: Internationalization techniques – Authoring HTML & CSS
• Internationalization Coding Guidelines: The Developer’s Guide
• What’s the latest? W3C Internationalization (i18n) Activity
• How To Internationalize Your Typography