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.
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.
Crowdin is a web-based SaaS tool for localization of desktop software, mobile apps, websites, web applications, games, help docs, and other content. To add and support multiple languages you need to register and create your own localization project, where all the translations can be made and synced with your code. Features offered by Crowdin include:
- support of over 30 file formats. Includes .xml, .strings, .php, .json, .xliff, .csv, .md, .resx, .yml, .properties, and other;
- integrations with GitHub, GitLab, Bitbucket, Zendesk, Android Studio, and more;
- RESTful API and command line interface;
- the ability to invite your own translators and manage their permissions, or choose one of the professional translation agencies within Crowdin;
- Crowdin’s online translation editor available from desktop and mobile;
- translation editor includes collaboration features, translation integrity, machine translation engines, translation memory, glossaries, placeholder highlighting, QA pop-ups when you save your translation, and more;
- In-Context. This feature allows making translations directly on your website to see right away how they fit into the UI;
- analytical reports and automated budget calculations.
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.
- a translation dashboard with intuitive reporting, custom HTML and CSS, and file and content hosting;
- tools for automation, including automatic content and language detection, plug-and-play integrations, and search engine optimization;
- translation tools such as an in-context editor, a glossary, and a style guide;
- tools for team collaboration with support for different user roles and permissions;
- on-demand human translation from the platform’s partners;
- client support and consultation;
- privacy and security, including network security, input control, two-factor authentication, and an activity stream;
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:
- log into the platform;
- type in your website’s URL;
- select the source and target languages;
- сhoose the language selector. You can go with labels (English, Deutsch), short code (EN, DE), or flags (which we don’t advise, but more on that later);
- сhoose the translation type. There are options for selecting manually editable machine translation, manually editable professional translation, and pure manual translation.
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.
Transifex offers a collection of tools and features for comfortable and high-quality content and software localization. They offer:
- file and content hosting. Supporting over 25 different file formats, Transifex allows you to prioritize content for translation and track changes within files;
- team management and collaboration. This feature allows you to comfortably manage teams, including organizing people into teams and controlling their roles and permissions;
- translation tools. Transifex’s comprehensive translation editor allows you to comfortably search through files, perform translation checks, and keep count of translated characters. Transifex also offers a translation memory feature, the ability to upload visual content and translate video subtitles, HTML and variable placeholders, a glossary, and a style guide;
- translation workflow management. A feature for setting up advanced translation workflows lets you control and fine-tune translation workflows of any complexity. It also offers an ability to set up translation crowdsourcing;
- detailed insights and analytical reporting. The translation dashboard offers insights on the overall progress of translation projects. You can view a list of languages for which translation has been completed, languages waiting for translation, and issues waiting to be resolved.
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.
- the Smartling translation management system allows you to capture, organize, and spread translated content across an entire organization. Users can see a visual representation of translated content in real-time, manage translation tasks and processes, and create fully customized workflows. Translation memory allows you to centralize, reuse, and share translations. Vendor management allows you to control and organize translation agencies, freelancers, and other people involved in the process. Cloud-based computer-assisted translation offers a comprehensive set of tools for quick and comfortable translation. A system of reports and analytics allows you to analyze each translation process step-by-step to increase quality and productivity;
- a translation proxy helps with automating the process of translating websites, web apps, and web services. It offers simple content extraction through scheduled content crawls, context visualisation, efficient translation processes, content control and delivery, and information security;
- translation connectors allow for integrating Smartling’s services with a variety of content management, marketing automation, eCommerce, code repository, and customer support platforms.
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:
- a REST API for automating localization workflows
- integration with version control systems including GitHub, Bitbucket, GitLab, and VSTS for file management optimization
- integration with HipChat and Slack for live communication and reporting on translation processes
- crowdsourced translation for community-based translations
- detailed statistics for detailed reports on translation activity
- translation memory for the ability to reuse translated texts
- real-time translation updates to increase the overall efficiency of translation collaboration
- the ability to access human translation services directly within the platform
- machine translation services based on translation engines from Google and Microsoft
Phrase is a translation management system where localization teams come together to release translations faster and easier than ever before. Supporting all common localization file formats, Phrase is designed to adapt to your localization needs and scale with your global business from day one. With Phrase, you can:
- bring it all together managing your localization on a single platform and collaborating with your whole team online to create a better localization experience for everyone;
- adjust quickly cutting your turnaround times in half right away. No more cumbersome manual translation file integration;
- improve quality using a variety of features designed to improve your translation quality and consistency, such as a Glossary, Translation Memory, In-Context Editor, SmartSuggest, and many more;
- easily integrate the platform into your workflow thanks to a variety of integration possibilities such as Phrase’s API, Over the Air, and GitHub Sync;
- keep it simple thanks to Phrase’s API that is designed to fit all software localization processes. You can easily import locale files, download locale files, tag keys or interact in multiple ways with the localization data stored in Phrase through the API;
- perfect your multilingual designs using dedicated plugins to help localization teams test and quickly iterate on translated interfaces without leaving Sketch or Figma;
- coordinate your team, organize all your translation tasks by assigning team members and seeing due dates to the locales of your choice.
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 currency button 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.
- Typography. Be careful with the fonts you choose for ornamental scripts. We recommend Noto fonts, as this is what Google recommends. If you want to use a different font, make sure you resize it to preserve legibility since traditional Latin typefaces tend not to fit RTL properly. Also, avoid italicized and bold fonts as they decrease the readability of RTL scripts.
- Numerals. The majority of Arab countries use Western Arabic numerals. However, Iran, Afghanistan, parts of Egypt and Sudan, and some other countries use Eastern Arabic numerals. In order to make your website comfortable for a variety of people, make sure that users see numbers they’re comfortable with.
- Icons. When choosing icons for Arabic interfaces:
- mirror icons with explicit directions and icons depicting movement or text direction.
- don’t mirror symmetrical icons, icons with an explicit purpose, and icons depicting English characters, but do localize them.
- pay attention to the cultural implications of icons (consider not using piggy banks to represent thriftiness, etc.)
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.
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.
- gTLD + subdomain: uk.website-name.net
This will make it clear to search engines that the website is targeted at the UK, but users might have a hard time understanding that the URL goes to a version of the website in English.
- gTLD + subdirectory: website-name.org/jp
Usually subdirectories help structure content, but if you include a country indicator, they can also show search engines that the website is targeted at a specific country (in this case, Japan). This is a great option as you can set not only the country but also the language, which is convenient for countries with two or more official tongues:
- 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.
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.
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:
- Automated employment and payment platform JobMatchIt
- Snaapy, a promotional mobile application with ERP features Snaapy
- Radonmeters - CRM and ERP for an online service that provides full-cycle indoor radon measurement
- Possio, a GPS-enabled solution for ensuring vehicle safety in Europe and the United States
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.