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

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…

Turning Rejection into Fuel: Your Guide to Creative Resilience

Rejection sucks. And for some reason, it’s always unexpected, which makes it feel like an ambush. Being creative is…

20 Best New Websites, August 2024

The overarching theme in this selection is simplicity. Minimalism never really goes out of fashion and with good…

Free AI-Website Builder, Scene, Helps With the Worst Part of Site Design

AI website design platform, Scene As we’ve been hearing constantly for the last couple of years, AI will soon replace…