To answer the question “What is a multilingual website?” - it’s a website with content in different languages. Multiregional websites cater to more than one country or geographic region. It’s challenging to make your website multilingual, especially if you have little to no experience in the area.
We’ve collected best practices for developing multilingual and multiregional website development to make it simpler.
Is expanding to new countries and regions the next step for your business? It’s likely that your website content was originally written in one or maximum two languages. This chapter answers the “How to translate a website into another language?” question.
Source: public domain
You could hire a professional to translate your website content. But depending on the target language and the amount of content, this can be a rather expensive endeavor. Still, a professional translator will be able to adapt your website not only in terms of language but also in terms of culture, catering it more to the needs of your new target audience.
Although creating multilingual websites using Google Translate is considered faux pas, opting for machine translation, does prove to be cheaper and faster than the other alternatives.
Many multiple language websites turn to software-as-a-service translation solutions that offer a variety of web and mobile localization services. Let’s look at the specific examples of companies that apply best practices for website localization.
Localize offers a variety of translation tools for translating websites and web applications, backend elements (emails, SMS messages, notifications, etc.), and iOS, Android, and hybrid mobile applications in more than 80 language pairs. They also offer technology for translating uploaded files in CSV, YAML, XML, and other formats.
Bablic is an online service for website translation. It offers comprehensive translations via a simple process, which you can test within the 14-day free trial:
Your website is then converted in Bablic’s visual editor where you can view the interface as it would be seen on desktop computers, tablets, and smartphones and manually edit each website element as necessary.
Crowdin is a web-based SaaS tool for localizing desktop software, mobile apps, websites, web applications, documents, video games, and video content. The three main services that Crowdin provides are management and organization, localization for developers, and translation and proofreading.
Transifex offers a collection of tools and features for comfortable and high-quality content and software localization. They offer:
Smartling is a translation management platform for localizing websites, digital content, mobile applications, documents, customer support content, marketing content, audio, video, and so on. Their solutions include a translation management system, a global delivery network, and a number of collectors and translation services.
POEditor is a comfortable localization management platform for software translation. Currently it supports 15 file formats, but POEditor is constantly working on widening their horizons. Among the features offered by POEditor are:
The most important part of multilingual design is comfortable language navigation. And although it’s likely that your website will detect the user’s language automatically, translating content based on geographic location, there should still be an option to manually change website language.
We suggest the usual types of language navigation as most users are already comfortable with them.
A drop-down menu is the most common option. It’s a button that, when clicked, reveals a list of languages that users can scroll through and select from. Here’s an example from Airbnb.com:
The language drop-down is accessed by clicking on the Language and currencybutton in the bottom right corner. Once opened, it reveals two drop-downs: one for language and one for currency. Offering a choice of both language and currency is common for marketplaces.
International websites also often use drop-down menus without scrolling, like on Booking.com:
The language selector is, again, next to the currency selector, and is marked with a flag. It first displays a list of the languages most common in the user’s geographic area, then lists all available languages.
A similar option is to start with a list of regions as opposed to languages. Here’s an example from the Fujitsu Global website:
This is an option for businesses whose services vary from market to market, since it redirects users to country-specific pages with unique experiences that are relevant to particular countries.
A similar approach could also be implemented with a separate page for country selection. This is how Nintendo does it:
Nintendo’s region page offers an extensive list of countries and regions, helping users comfortably find relevant content.
Next, we discuss how to represent languages and countries for website language navigation.
It’s considered bad taste when multilingual websites use flags for language navigation. Since flags represent countries, not languages, they can complicate language selection especially in cases where the website is targeted at a country with two or more official languages. If you still want to use flags though, avoid something like this:
And opt for a variant with languages or country names written out:
Some languages are written and read from left to right (LTR) and some from right to left (RTL). A multilingual site that deals with markets that use RTL languages should be adapted to the peculiarities of RTL languages.
Here’s a summary of our article about RTL design specifics. If you’d like to read the whole piece, you can find it here: Right-to-Left (RTL) Website Development: Tips & Tricks.
Read also: SteelKiwi’s article on Smashing Magazine about Right-to-Left Development in Mobile Design
Apart from icons, you should also mirror the interface, logos and navigation buttons, form fields, breadcrumbs, media players, dates, calendars, and tables to fit RTL design.
If you would like to learn about RTL development in terms of coding, we have a post with instructions and examples: Right-to-Left Development: Tips and Tricks.
The size of words can shrink and expand depending on the language. For a multilingual website, it’s important that no matter the language, there’s enough space for the words. Take a look at this example from Adidas:
If it wasn’t for designers’ careful planning, the search box would be all over the place, moving to the right and to the left depending on the word size.
Use UTF-8 encoding to make sure that special characters are displayed properly regardless of the language. This is achieved by placing
in the page header. This will not only make sure languages are displayed properly but will also support several languages on a page at once.
When it comes to fonts, there are ones that support Latin scripts but don’t support Cyrillic scripts just as there are ones that work perfectly for Latin and Cyrillic scripts yet don’t support RTL or Asian languages. You can refer to Google Fonts in order to choose appropriate free typefaces for your website.
A website URL contains important information about the site’s content. Not only does it clue users to what sort of information they might find there, it can also show which country the website is targeted to (for instance, by indicating a German website with the .de top-level domain). Apart from being informative, URLs help search engines improve search results by displaying pages relevant to a particular region first.
For the purposes of multilingual websites, it’s better to go with a country-code top-level domain name (ccTLD), as they’re a strong indication that the website is designed for a specific country. This way the version of your website for the Japanese market won’t show up in the US. However, ccTLDs are often unavailable and tend to be more expensive than other domain types.
There are two options you can go for instead, combining a generic top-level domain name (gTLD) with either a subdomain or a subdirectory.
- website-name.com/ca-en/ for the English version of a Canadian website
- website-name.com/ca-fr/ for the French version of a Canadian website
It’s often the case that websites in the same language are targeted at different countries, and hence need to have separate pages. So a company working with the US, Australia, and New Zealand can have three separate pages for these countries but they would all be in English, as it’s the primary language spoken in all three. Search engines would treat this as content duplication unless you specify that each page is for a specific country. This is how that looks in code:
Search engines would treat this as content duplication unless you specify that each page is for a specific country. This is how that looks in code:
<link rel=”canonical” href=”http://website-name.com” hreflang=”de-de” />
<link rel=”alternate” href=”http://website-name.com” hreflang=”de-at” />
<link rel=”alternate” href=”http://website-name.com” hreflang=”de-ch” />
The first link indicates content in German for Germany, the second for Austria, and the third for Switzerland. Once search engines see these indications, they no longer consider your website to be duplicating content and won’t penalize it.
If your website’s users run into issues, they’ll likely want to talk to customer service. And it’s only natural that they expect customer service representatives to understand them given that they can view your website in their native language.
Source: public domain
It could be a nuisance, however, to hire employees who speak several languages. This might not be so much of an issue for large companies, but it’s a real issue for startups.
What you could go for instead is a functional intelligent chatbot. They’ve proven useful in a variety of industries and can do a great deal when it comes to solving your customers’ issues. If you would like to learn more, read our article about the benefits of chatbot technology.
There are a couple of smaller yet very important things to keep in mind when creating a website for more than one language.
Date and time formats aren’t the same everywhere. While the US and Commonwealth of Nations countries use 12-hour time, the rest of the world uses 24-hour time. And although most people understand both formats, you should use the country-appropriate time format to create a more personalized experience.
When it comes to dates, it’s better to have them formatted according to each country’s official standards. If a date is written 2/5/2018, a US user will understand it as the 5th of April, while for a European it would be the 2nd of May. You can find the full list of day/month/year formats by country here.
Keep in mind that your website’s users might need to communicate not only across borders, but also across different time zones. Consider this during both design and development.
As for orthography, you’ll have to look into the specifics of each country and language. One example is how decimal places are separated: with a dot in the US (28.3) and a comma in Europe (28,3).
Go for numeric captchas as they can be understood universally, regardless of the website language.
Source: public domain
Adding country codes to phone numbers makes for a more pleasant experience. You can find a list of all country codes here.
Multilingual website development is complex and involves following many rules. And the more languages, the more rules there are to follow. We have a lot of experience developing multilingual and multiregional products – everything from websites to mobile applications, including:
If you’re looking for a top-quality service provider to develop a functional and beautiful multilingual product, contact one of our sales representatives and we’ll start working on your project today.