Up and Running with Localisation

Samuel Oloruntoba

Do you cater a large audience? Are you planning on building a website that serves multiple people now or in the future? If you can answer any of these questions then this article is for you.

Localisation is a scarcely discussed topic and recently I got the pleasure of working on a website that requires it. Full disclosure — I'm not an expert in localisation but from weeks of research and working on a localising a site, I think I've learnt a few things.

What is Localisation?

Localisation refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale).

Localisation is often referred to as l10N, where 10 is the number of letters between l and N.

Basically, localisation refers to preparing a website like it was made for a particular region.

Before we continue, we should touch on Internationalisation.

Internationalisation (sometimes shortened to "I18N, meaning "I - eighteen letters -N") is the process of planning and implementing products and services so that they can easily be adapted to specific local languages and cultures, a process called localisation.

So in short,

The value of distinguishing between them is that (theoretically) once your program goes through the i18n process, you can then iterate many l10n processes as you need them; also, it's nice to be precise with language.

Translation

If you want to make a website feel like was made for that region, the first thing to consider is the language. This is probably the first and most important visual indicator that a website is for a particular community.

Translations sound easy right? Wrong. Translating a website is more complicated than you might think.

You have to consider typography, encoding etc. A lot goes into translating a website.

Get Translations Right

This is the most important part of translating a website. Translations must always be correct. If you think popping a phrase into Google Translate does the trick, think again.

At the moment, online translators like Google translate and Babylon still have a long way to go. They constantly give silly translations and let people print signs like this.

Don't believe me? Try typing "Se taper le cul par terre" into google translate. I dare you, try it. By the way, it means to laugh uproariously. But see what Google comes up with.

Some ways you could translate your website involves paying pros on PeoplePerHour, Freelancer.com etc.

Another way to get translation is by crowdsourcing it, like Wordpress does.

Make Translations Easy

This should be painfully obvious. When a user lands on your website, use their IP address to detect their location and language.

If they have multiple languages in that location, ask them to choose which language they want to use.

You can use MaxMind or IpInfo to check their IP address. It goes without saying that you shouldn't check a users IP every time they hit the site. You can store info like this in their session or cache.

They Can Change the Language

Another way to make translation easy is to give users the option to change their language. Visually, it should be obvious when a user wants/needs to change the language.

A clear and usable call-to-action should be made available.

You should also note that translating a website shouldn't break the UI. More on that coming soon.

Typography

Typography is very important when it comes to website translation. Not all fonts support every language known to man. Most fonts are latin-based (meaning they use latin alphabets like A, B, C etc).

If you want to translate a website to let's say Japanese kanji, you need a font that supports it. Not many fonts come to mind, but google has been working on a font called Noto which supports a lot of languages.

Alternatively, you could use a Japanese (fill in the language) only font.

Note, if you use a language-specific font, you might want to adjust the font size to match your site design as some language-specific font may be smaller or larger than the default.

Length of Words

Not all words are equal. Some words might be shorter in some languages and longer in others.

The word 'search' takes up 10 characters in French but only two characters in Japanese. The word 'basket' takes up 6 characters in English but when translated to German takes up a massive 13 characters.

You have to watch out for words like this as they might break your UI.

Special Characters Matter (UTF-8 or UTF-16 All the Things)

When we mock our HTML page, we always add

<meta charset="UTF-8">

This is a good thing to do, except for the fact that UTF-8 only contains so much. If you have a large percentage of users from Asia, you need to use UTF-16 as it is more suited for it.

Think About RTL (Right-To-Left)

Okay, It's not just about changing the text. Some languages are read from right-to-left instead of from left-to-right.

Languages like Arabic, Hebrew etc fall into the category of right-to-left languages. So instead of only changing the language, you might want to consider making the layout right-to-left also.

Here is how Facebook does it.

At times like this, one gets to love SCSS even more.

It makes it easy for us to create RTL and LTR versions of our CSS.

It's Not All About Translation

Translation might be a good visual cue, but it is not all that matters. Like the phrase goes, "Pictures do say a thousand words".

If you are trying to make a website more "homely", you should also look at your choice of images. You don't want to be using the picture of an Indian market when you are trying to make the website feel more Chinese.

You can also use popular landscapes from a country to make it more relatable.

For example, if on the American version of the site — you used an image of Times Square, you probably want to use a similar location in another country. Instead of using a Times Square picture in Japan, you can use a picture of Shibuya Crossing.

Never Hard-Code Date, Time Or Currency Formats

This is a golden rule. In Europe, a hundred thousand is represented 100,000, but in India, it is 1,00,000. So, you probably want to use a translation service usually built into your programming language of choice.

Also, it's no surprise that every country has their own symbol for representing currency. So, like I noted earlier, you want to use an inbuilt or custom function to represent Time, Currency, Date etc.

What About Payment?

You want to make payment easy for each country. Not all countries trust PayPal. Apart from trust, PayPal is not available in some countries.

So, think about adding credit/debit cards. Alipay, or something more local to a region.

This shows trust, care, attention to detail and good UX.

Know Your Market (Be Cultural)

We keep talking about translating text, changing images, but localisation goes more than that. You should first understand your market.

A Certain type of image has a certain type of impact. So, just switching up the image might not cut it. You might want to hit a cultural note.

For example, "Hello there" in the United States could be "Hey mate" in Australia. When somebody in Australia sees this, they are more likely to relate to it.

Localisation is Good for SEO

When it comes to search engines, Google, Bing, Yandex and Baidu are the most popular. For Yandex and Baidu, Russian and mandarin rank easier respectively.

So if your site is well translated(localised), it ranks better on those sites which means more traffic for you.

Be Strategic

You just don't start localising your site. You probably want to give more attention to countries where you get your traffic.

Getting countries with your most popular users is easy to find out.

Just choose a date range in Google Analytics or your analytics tool of choice, go back a year or more.

After that, you can see a list of most popular countries. You can then start choosing which countries to localise for. Ideally, you should start with countries with your most visitors.

Some Do's and Dont's

Below are just some dos and donts. Enjoy.

  • Plan Your URLS: This goes without saying. Translating your website means you have multiple versions of a particular content. So you want to plan out how to display them before hand. Google, for example, provides different TLDs for different countries. For the UK, they use .co.uk etc. While other websites manipulate URLs like this http://website.tld/en/content-slug.
  • Never Concatenate Strings: strings conjugation don't work the same way in every language, so might want to rearrange each string to match.
  • Don't Trust the Browser: Don't use the browser to get a user's location. This data can be spoofed quite easily. So always make detection of locale and language on the backend.
  • Get Legal Help: When it comes to privacy policy and other legal docs you might want to check out with a lawyer to make sure you are not infringing on a country's laws.
  • Customer Care: Okay, so now you have a website looking good for a particular region. Automatically, people assume that when they require support of some kind, they expect it to be in their language.

You can either hire people who speak their language or just straight up tell them that support is only available in a particular language or set of languages.

Testing, Testing, Testing

I can't stress this enough. You want to test your implementation as much as possible. Also, you want as many people as you can find to test your site for you.

A place where you can easily find people to test your site is UserTesting.com. For the service it offers, it is quite inexpensive.

Testing is key to any website's success. So Test.

Conclusion

I am pretty sure I missed a thing or two when it comes to Localisation, please do let us know down in the comments.

Samuel Oloruntoba

I'm a freelance web developer that focuses on building performant web applications. Hire me on Upwork or email