How to design for multiple languages

Default avatar.
June 26, 2015
How to design for multiple languages.
The Internet isn't all in English. I mean, I know this. You know this. But unless you actually have to stop and think about building a website in more than one language, you might not look closely at the issue. And there are a few issues to consider. The basics are easy enough, as logical exercises, but it's always the details that drive you mad. You have to step outside your cultural context and into someone else's for a while. Think about how the change in language will affect every aspect of your design. Make sure every string of text on the site gets translated. Consider the usability implications. Research the devices your site will be viewed on in different parts of the world. Don't forget any text in the images! "See? It's easy!", he said, pouring himself his fifth cup of coffee that night. Okay, it's not that bad, but you are in for a long haul. I contend that accommodating content for two languages is three times the work as it is for for one. It may get a little easier after the second language, but not by much.

Before you start designing

Research the languages you'll be including. If all you're including is European-style languages, then you're in luck! Most of them share a pretty similar alphabet, are written in the same format (left-to-right), and they'll always take up the same amount of space! Okay, that last one was an outright lie born of wishful thinking. It's called "text swell", among other things. A concept that might only take a couple of words and a small number of characters to express in English might take a heck of a lot more in another language. English may not be the most concise language out there, but it is one of the contenders. Spanish words tend to be longer than English words, and German words are much longer. Then there are languages like Arabic, which not only use an entirely separate alphabet, but are written right-to-left. It might seem backwards to you (See what I did, there?), but people who grew up reading this way will also scan/navigate the page right to left. That is all to say nothing of vertical text. Proper support for the languages which are written in vertical formats is a relatively new thing outside of (and I'm not kidding) Internet Explorer. (Yup, IE did something right, and did it first, in version 5.5.) Firefox, Chrome, and Opera seem to have caught up with support for CSS3s writing-mode property, which allows you to switch between those horizontal and vertical orientations. Failing that, you can use the transform property as a fallback for older versions.

Best practices

So much of what constitutes "good design" in the case of multilingual sites will depend entirely on the site and the languages in question. Besides that, there are a few things I can recommend to make your users’ experience less complicated:

1) Let the user choose

For one, let me actually pick my language. It sounds obvious; but I've been to websites that would literally refuse to let me go to the English version just because I don't live in an English-speaking location. They insisted on redirecting me to the Spanish version every time, even if I edited the URL manually. Let's put that another way: the website directly inhibited my attempts to buy something from them by making me do it in a language other than my native tongue. This is how websites lose money.

2) Language choice isn’t an afterthought

Secondly, make the language picker easy to find. Half the multi-lingual site I go to stuck all of the language options at the bottom. That's great if you know what you're looking for. It's less great for more inexperienced users. I suggest a one-time language picking option on a first visit to your site, and then a picker at the top of the page as well as one at the bottom.

3) Be consistent with all communication

Oh, and any and all e-mails sent after customers sign up should be in their language of choice. Again, obvious, right? Apparently not.

4) Match up information architectures

Fourthly, and this is a big one, if I'm in the middle of a site's hierarchy, and I change the language, I should go to the equivalent page in a new language. example.com/en/products/coffeeflavor1 should turn into example.com/es/products/coffeeflavor1, and not example.com/es/. (Note: On one occasion, I was redirected because they didn't actually have a particular product available in my country. That sort of redirect merits an explanation to the user.)

5) Use professional translation

Lastly, don't trust automatic translator services. Ever. Get it translated right, or not at all. Good content in other languages is expensive, but getting it wrong will cost you a lot more money.

Tools

So you wanna develop a multilingual site? I haven't convinced you that it's a horrible idea? Good. Most of the larger CMSs have a multilingual system in place already. Many large sites are built on custom systems in any case. For the average designer/developer, the easiest way is probably WordPress with some plugins. My favorite solution so far has to be using a multi-site installation and connecting the different "sites" as alternate versions. This provides the most power and flexibility, I think. Plugins that operate this way include: Multilingual Press, Multisite Language Switcher, and Zanto WP Translation. Other WordPress based solutions include: WPML which takes a more classic approach, you write a post or page, define some extra languages for it, and it stores those translations as extra posts, those “extra posts” will be attached to the first, and show up in its place when the language is switched; or Polylang, and xili-language both of which operate similarly to WPML, but come with their own sets of features. Some of these plugins will come with tools and built-in functions to help you translate any content that isn't directly handled by WordPress. (I'm talking about text that might be hard-coded into your theme for one reason or another.) Others won't. Take that into account as you pick your plugin. Then get yourself another coffee. You’ll need it. Featured image, translation image via Shutterstock.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…