This is a user generated content for MyStory, a YourStory initiative to enable its community to contribute and have their voices heard. The views and writings here reflect that of the author and not of YourStory.
How to make a superb multilingual website
This is a user generated content for MyStory, a YourStory initiative to enable its community to contribute and have their voices heard. The views and writings here reflect that of the author and not of YourStory.
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.
Multilingual user experience
Start with translation
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.
Localize
Source: Localizejs.com
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.
Localize features include:
- 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
CapSource: Bablic.com
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.
Crowdin
Source: Crowdin.com
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.
- management and organization constitutes a set of features for taking care of translation files and teams. It also offers analytical reports and automated budget calculations;
- localization for developers is a set of features for integrating translation into the development process. Crowdin offers a free open-source command line interface, a RESTful API, and a number of supporting plugins and integrations;
- translation and proofreading is a service that automates and simplifies the translation process. Crowdin’s online editor offers collaboration features, translation integrity, machine translation engines, translation memory, glossaries, and many other tools;
Transifex
Source: Transifex.com
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
Source: Smartling.com
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
Source: Poeditor.com
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
Think about navigation
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.
Drop-down or a separate page?
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:
Source: 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:
Source: 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:
Source: Fujitsu.com
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:
Source: Nintendo.com
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.
Flags or words?
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:
Source: British-airways.esky.com
And opt for a variant with languages or country names written out:
Source: Nike.com
Beware of Left-to-Right and Right-to-Left differences
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.
Source: Facebook.com
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.)
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.
Make adaptive UI elements
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:
Source: Adidas.com
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.
Remember about encoding and fonts
Use UTF-8 encoding to make sure that special characters are displayed properly regardless of the language. This is achieved by placing
<meta charset=”utf-8″>
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.
Source: Fonts.google.com
Choose appropriate URLs
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
Don't duplicate content
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.
Offer multilingual customer service
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.
Finally, don’t forget
There are a couple of smaller yet very important things to keep in mind when creating a website for more than one language.
Dates, time zones and orthography
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).
Captchas
Go for numeric captchas as they can be understood universally, regardless of the website language.
Source: public domain
Phone numbers
Adding country codes to phone numbers makes for a more pleasant experience. You can find a list of all country codes here.
Develop a multilingual website with our help
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.