Year round learning for product, design and engineering professionals

Code 16: Does Your Web App Speak Schadenfreude? Greg Rewis

Localisation (or localization) is one of those things that seem simple at first glance, but the further you go into it, the more of a rabbit warren you realise it is.

Fortunately, once you’ve worked out what’s needed, it can become a largely automated or at least controlled process and, as Greg Rewis’ talk at Code 16 demonstrated, one that can be managed to very positive effect.

Here’s our Wrap summary.

Does Your Web App Speak Schadenfreude?

Greg Rewis, Lead Developer Evangelist, Salesforce

Greg Rewis

Key points

The title refers to the German word for the enjoyment of another person’s misfortune, and is a way of saying this talk is about internationalisation and localisation.

Research suggests that a website not translated into 16 languages is not a global site.

Internationalisation (i18n) is the work that prepares a site for localisation (l10n), which translates sites from one language into another.

Localisation affects more than words: also numbers, dates, currency, symbols and more.

Culture plays a big role in how people perceive web pages, from where they look to how they move around the page to the balance between text and images.

Edward Hall’s 1976 book Beyond Culture found there is a high-context culture (where images and animation play a greater role) and a low-context culture (where text dominates).

“Web developers have to stop thinking in the patterns that are specific to their own locale.”

Code 16: Greg Rewis

Takeaways

An example: Americans use dashes between the groups of digits in their phone numbers, but this will cause a form built by someone who does not use dashes to fail.

Text on buttons can become problematic when the target word translated into another language is much longer or shorter than the word you started with, wrecking your layout.

When setting font sizes, don’t go for 16pixels because it’s fairly standard in English – 20px is better for many languages, especially Asian.

Use the lang attribute. Assistive technology like screen readers will attempt to read out a word like schadenfeude in English unless lang=de tells them otherwise.

Google Translate will translate words not in English unless you use translate=no to tell it otherwise. This allows you to use non-English words without having them translated.

Consider words and phrasing that are more universally understood, for example not all cultures understand are familiar with “from” and “to” when applied to dates – “start” and “end” are more widely understood, and still work in English.

Think about how translating English into a language that’s read from right to left might change structure and maybe meaning.

Test your layouts to see how they will look in different languages.

Consider how colours can have different meanings in different cultures: red doesn’t always mean stop, and green doesn’t always mean go.

Use resources like http://l10nchecklist.com to check your projects.

“Our culture – not just our language – influences the way we read a page.”

Caveats

Translation is not just swapping a word in one language for one in another language – the context has to be taken into account.

Even within one language, words can have different meanings and different connotations, depending on context and cultural values.

Phrases in one language might be single words in another, with no opportunity to break or wrap.

Japanese uses three different alphabets, one of which uses characters that are individually wider than letters in English, thereby making text strings longer, even though they may use the same
number of characters.

Characters in some languages may extend further up and down the line height than in others.

Capitalisation is another danger area – be aware that some languages have customs that are different to English, so don’t force capitalisation.

Text decoration like bolding and italics may not work in languages where several words are combined into one – you can’t bold just a part of a word in some Asian languages.

Some languages indicate emphasis in completely different ways, such as adding symbols on top of words, or putting words into a coloured background.

Text embedded in images is not going to respond to translation. If you want to tell users other languages are available, be aware that, for example, “Spanish” is the English word for Spanish, not the Spanish word.

Flags are not good indicators for language – they indicate nations, some of which use multiple languages, and many different nations use the same language.

Resources

@garazi
slides
website
github
Localization Checklist

Tweets

Code 16: Greg Reiws

Code 16: Greg Reiws

Code 16: Greg Reiws

Code 16: Greg Reiws

Code 16: Greg Reiws

Code 16: Greg Reiws

delivering year round learning for front end and full stack professionals

Learn more about us

I had an absolute blast, learnt so much, and met so many great people

Carmen Chung Software engineer, Valiant Finance