Does Your Web App Speak Schadenfreude?

¿Hablas español? Sprechen Sie Deutsch? No? Well even if you don’t speak another language, chances are good that your web application will need to. During this session, we’ll use some real world examples to explore the many challenges involved in localizing a web application–from properly sizing text and controls to the use of color and images to cultural issues you might not even be aware of. And of course, we’ll look at some best practices to ensure your web app can tackle any language thrown at it.

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).

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 to create check your projects.