Internationalize Your Website

On a website, we are used to seeing it in English or German, so we are used to the euro being the currency of choice, Germany being the centre of a world map, or Europeans being depicted in photographs. Not everyone sees the site like this. For example, a Japanese person sees a slightly different website.

Neither the German nor the Japanese knows that the other's website exists. However, the project team needs to know that both languages will exist. In addition to Spanish, Italian and Russian. Why?

Already in the concept and design phase we should consider different things, such as text lengths. I have listed some points that should be considered here.

‍

1. Local settings

Several points are relevant: Address, telephone number, currency, measurements, numbers, time, date and sorting/filtering. Local settings should at best be adopted by the chosen CMS. The following picture shows an example of a form. We see that for Canada another input field appears. In this field the user can enter the province. A German can not do anything with this field. Therefore it is not necessary to offer it to him.

2. Characters

Does the font used even exist in Cyrillic? Some fonts, like the well-known Helvetica, exist for several languages. If not, it may be necessary to use a different font. The next question is, how does the website tester know if the correct characters are loaded? Look at the example from Wikipedia. Could you determine whether a character is loaded incorrectly?

Some fonts have several alphabets, such as Japanese. What needs to be loaded here? Again, we can't get away with Google Translator alone, but need a professional translator.

3. Translation

It is important that texts can be extracted from the code and are therefore not hard-coded. It is best to store the words early in dictionaries or in another outsourced file. Care should also be taken with audio, video and images on a website. The Slack collaboration software has an image on its website. If you look at it closely, you will see that it is not an image in an image format such as .png. Instead it is programmed. This means that elements of the "picture" can be quickly exchanged without having to search for, change and save an image file.

4. Language

A text that works well in layout in one language does not have to look good in all other languages. Flickr uses the short word 'views'. In Italian this is translated as 'visualizzazioni', which means that the text on the card is double-spaced.

In principle, an English word can be between one and ten letters in Spanish or Italian, three times as long. For longer texts the extension is less small, but a Spanish text can still be up to 40% longer. The opposite is true for Chinese texts, where they can be up to 70% shorter. How can I find out about this early in the design process? There are plug-ins for Sketch that do a pseudo-localisation. This means that a text is extended by a certain percentage of nonsensical letters. So we can see directly if the layout would still work.

5. Layout

Not only the length of the words must be taken into account, but also text breaks in long compound words can cause problems. Probably we Germans are leading with words like 'Oberdonaudampfschiffahrtsgesellschaftskapitän'. With some characters, however, you have to pay attention to wider or higher characters. In the following example you can see that the Thai characters are very high:

Englisch: „A long text in two lines on the website.“
Thai: „ข้อความยสู่วสองบรรทัดในเว็บไซต์นื้อหา.“

Is that all there is to it?

Now I am mainly concerned with language. But that is not all. Political, religious and other aspects of another cultural country must also be considered. Just to give you one example: Microsoft had shown a world map in Windows 95. This showed the Kashmir territory on eight pixels. Of course, there are also many successful examples, be it Slack with five languages, facebook with 49 languages, Google with 149 languages or, well, the Jehovah's Witnesses with more than 1000 languages.

After we talked about internationalisation at Coeno during a team day, we were particularly interested in what the future will bring. Will the translation programmes become so good that you no longer have to learn languages or will it be more like simply doing everything in English?

The world is diverse. So if we’re not thinking about diversity, then we’re not thinking about people. If we’re not thinking about people then we’re not designers, we’re makers of stuff.

Jason Mayden (Designer, Accel Partners)