Daily designer news

Getting started with multilingual websites

Posted: 26 Sep 2012 05:18 PM PDT

As a web designer or developer, you will sooner or later meet a client that wants to expand his website’s reach by adding one or more new language to it. Or maybe you can speak several languages and want to make your own portfolio multilingual to take advantage of your language skills. In both cases, you will soon enough discover that creating multi-languages websites is a very challenging project.

The challenges of creating a more international websites are varied: they make the design process harder, maintainance more time-consuming, there can be cultural or political issues, and the website is technically more complicated. To be clear, the first question you should ask your client is: is it really worth creating a multilingual website for your business?

1. Do you really need a multi-lingual website?

Of course, I will get much more business and make loads of cash that way! You heard it before right? Think again, the implications of building a multilingual website take a lot of time and money on the long run, so you might save everyone’s time by aborting the project if it’s not right for you.

It costs more to build

With a multilingual website, everyone will have more work. Developers will need to implement the possibilities to add new languages and handle it, they will not do it for free. Designers will face templating issues that make the whole process longer. Last but not least, the content will need to be translated, so you will either need to hire translators, or if you have someone in-house, to pay them to work on that.

It costs more to maintain

Want to redesign your website or add new functionalities? Sure you can, but the fact that your website is multi-lingual makes it more difficult. For example, you want to add a related-posts box at the end of your articles. You will need to make that this box is taking articles from the language of the article, or you will have a language mix that would mess up the site. Obviously, if your site often adds new content, you will need to translate that new content and pay someone to do it. One problem that people tend to overlook as well is the fact that you’ll be contacted in multiple languages. Your website is in chinese? Great, but you better have someone in-house to handle requests in chinese.

It’s harder to promote

You know that community manager you hired to promote the site on social networks? He did wonders with the promotion of the site on Twitter and Facebook, but can he promote the site on country or language specific social networks? By adding languages to your site, it starts addressing several groups of people, making your strategy to attract new people much more complicated. There is also a cultural issue, some social networks in one language are popular in one country but not another. For example, if you want to attract chinese speakers, will you be active on Weibo to communicate with mainland chinese, or on Plurk to address Taiwan people.

Dominant social media sites by country. Source and larger image.

2. Some technical issues

In this section, I will not go into details about complicated technical stuff such as database structure or programming, but just give you an overview of the most important elements that you’ll need on your multi-lingual website.

Language detection

This is a problem you will meet, should you detect the language that is more suitable for your readers, or should you simply display the default language? If you chose to go with language detection, you will need to chose the detection method, serve the language depending on the user’s browser language or on location. In my opinion, using the user’s browser’s language is safer, as it is something the user set up himself and chose the language he prefers. This said, the best and easiest solution is probably to send to a default language and make switching to another language easy and obvious.

The encoding

This one is fairly simple, if you are designing for multiple languages, you should use UTF-8 encoding. UTF-8 is a character set supported across many commonly used software applications and operating systems, it basically makes sure that no characters will disappear because you are switching to another language. To declare this encoding, you will need to add the following meta tag in the head of your page <meta charset=”UTF-8″ />.

Declaring the language use on the page

This is important when working on a multi-lingual website, use one language per page or you might get Google lost. Just announce which language you are using by adding the following piece lang=”en” to your html tag. It should look like this <html lang=”en”>.

Chosing the URL structure

Don’t complicate things when creating a structure for each language’s URLs. A common practice is to use a structure like this: http://www.example.com/en/article-title.

Get the search working

There are two kind of readers, the ones who browse and the ones who search. When creating your site, you will need to ensure that the searchers are not given results in any other language than theirs.

3. Design challenges

Multi-lingual website templating will give designers some extra headaches by bringing up new issues, let’s take a look at the most common ones.

The length of words

Unfortunately, languages differ when it comes to the length of words. For example, the German language is famous for having never ending words. On the other hand, chinese characters will make your long english words tiny. The problem with that fact is that it makes some elements of your design harder to manage. You navigation will need to be flexible enough to accept words in various languages. Form labels can present some issues with that too.

Flags

This one has stirred up big debat in the web design community. Many web designers still use flags on their language switching menus to give a visual hint of what language it is without even reading. It is useful and kind of works, but also totally inappropriate. Which flag would you use for depicting english? The american flag, the canadian one, the british one, or one of the many english-speaking countries flags? It can be culturally and politically sensitive to use flags for a language, I wouldn’t do it.

Image source: free flags vector set.

Custom fonts

It has become a big trend in the recent years to use custom fonts for web design, thanks to the @font-face CSS attribute. If you are going to use this, you will need to be extremely cautious in your choice of fonts for a mulit-lingual website. Many languages have special characters, so you should make sure that the font you picked supports the characters used in those languages. When you pick a typeface from a website like FontSquirrel, make sure that you check out the characters map before you make your choice.

Conclusion

The purpose of this article was of course not to discourage you, but to bring your attention to the challenges and issues you will face if you work on a multi-lingual website, so you don’t become desperated in the middle of the project. Multi-lingual websites can of course be beneficial for many business websites, you just have to know what you are doing.

Do you have experience creating such websites? If so, what are the issues you have faced that I may have forgotten in this article?