How to create a Bilingual Website

avatar

by

on

For most people, designing for an international audience is just about translating some text via a script. Well, it’s certainly part of it, but it’s wider than that.

From a designing point of view, we’d say having a multi-lingual website has to do with the design and development of a website or application as it enables easy localization for target audiences that vary in culture, region or languages.

If you don’t offer users great UI in their preferred languages, then it will be difficult for them to use your website or App.

So, the following are what you need to take into account when designing your multilingual website.

1.Consider The Width Of The Language Of Your Bilingual Website

When designing script for internalization, one of the challenges you need to overcome is the need for space. Not every language needs the same space to express the same idea. In order words, the width of a text translated in other languages varies.

The same idea expressed in English versus any other language may occupy more space. For instance, ‘join’ (English) is ‘joindre’ in French and, much longer, in German ‘beitreten’ and Italian ‘aderire’.

It is said that the Italian language is three times the length of the English equivalent. It is a challenge when designing a User Interface. You need to come out with a design that will look good in your preferred language but will accommodate the need for multiple languages.

A tool that can help you estimate the length of your translation is the Google Spreadsheets.

Also, the IBM globalization site has a great tool that can help you know the amount of space needed when you want to translate from English.

Here are some tips that can help you design and develop your website for an international audience.

2. Consider the Structure of Your Domain Name

One of the steps a company would take to internationalizing their website if they want search engines in another country is the structure of their domain name.

If you have a name that ends with ‘.com’ or ‘.fr,’ from search engine point of view, this shows that your website is relevant to that market.
It will give you a slight edge to the market in that territory. For example, Amazon has over 16 registered domains for its varied audiences in different countries.

3. Don’t Add Text in Narrow Columns

If you want to organize your content for a great user interface, then avoid adding text into narrow columns. Broad columns will ensure that your writing doesn’t break when translated. More character space gives you carefully crafted, well-balanced and skillfully structured messages.

OK, what if you found out that the length of your text changes during translation? What will be the effect?

• First, it will affect your headline. It will increase the length of your headline to 2 or 3 lines.
• It will also break the layout structure of your text.

narrow columns in bilingual websites

4. Avoid Wrapping Translations

When you structure your text in narrow columns, there is the possibility that some translations will extend to more lines.
The best way to avoid this is to use wider rows rather than narrow columns. Give your text more space to grow without affecting the layout of your content.

5. Reading Left-to-right or right-to-left

There are some important things you need to take note of if you’re targeting the Middle East.

Most languages in the Middle East like Hebrew and Arabic are written from right to left, instead of left to right. At the same time, figures will be written from left to right as you do in English.

The IBM Globalization website can be of great assistance to you. They provide great support that is meant to integrate with bi-directional locales.

text in images from bilingual website 6. Don’t Embed Text in Images

If you include an image with text in your design, then it will be difficult to translate that image to a bunch of different languages.

You can easily use a translator to convert your text layers in a sketch file or a Photoshop document (as seen above).  You can trigger different text for the same section or image based on languages selection. This will help you create better connect with all audiences.

7. Don’t Create Sentences with UI Elements

It’s a common practice among designers to move various UI elements around to know which layouts would work better. Be it shopping cart or order form.

However, these complex UI elements can create confusing translations, specifically as grammar rules in different languages can change word ordering, plural context, and gender references.

UI elements in multi-lingual website

8. Visual elements in your Application

Finally, one last thing you need to take into account is the visual elements of your App or website. It is not enough to have a perfectly translated text that makes sense to a particular country.

In some context, the icon you have selected or the images on display may be misleading.

One that can be misunderstood is the “save” icon. For you, it may mean saving changes to document, but in another context, it may also mean donations for underprivileged. Therefore, depending on the context icon would change.

 

So, here are some takeaways for multi-lingual websites:

• Do not to add the UI element in the sentence.
• Never use an unapproved abbreviation, antonyms or symbols.
• Avoid using metaphors based on languages.
• Do not use possessives in UI labels.
• Ensure complete sentences in your heading.
• Leave space between UI text and numbers.

Creating a user interface design for your bilingual website is not about technology. It’s about planning. You need to plan properly to get the layouts and spaces that you need to support a wide variety of languages.

Also, we would love to learn from you. Share your comments or thoughts with us.