Best practices for language switchers on a website

One of the questions that you have to ask yourself when you translate your website is: How do my website visitors discover the translated versions of my website?

Most websites solve the language discovery problem with a language switcher or automated redirects. In this blog post, we will explore the up-and downsides of these two approaches.

What is a language switcher or an automatic redirect even?

First of all, let's clarify what these two terms even mean and how they are different from each other. 

• A language switcher is a part of the website that shows the available languages. Website visitors can select their preferred language and then see the translated page.
• An automatic redirect automatically tries to guess the preferred language for the user and shows the translated page.

There are different approaches to implementing either a language switcher or an automatic redirect. Read on to learn about examples of these implementations on real-life websites.

Implementations of language switchers

There are many different ways of displaying a language switcher on a website. The following list is a sample of popular websites and how they implemented a language switcher.

Language switcher as a top banner on the first visit

With this approach, the language switcher is shown on the top of the page on the first visit. The website visitor has then the chance to select another language version and will be shown the translated version. If the website visitor dismisses the dialogue it won’t be shown again.

This is for example done by Apple on the apple.com website:

As you can see the website itself is the English version, but at the top the banner is being shown in German and automatically suggests visiting the German website. Apple recognizes that the visitor is from Germany based on their IP address.

Detecting the IP address is a good first step, but may cause issues with people that are traveling. An alternative here could be to look at the configured language of the visitor's browser. Browsers can tell websites which languages they are preferring using the Accept-Language HTTP header.

All in all, this approach is however very intuitive for most website visitors to find a translated version.

Language switcher as full-page interstitial

A different approach is to show a full page interstitial with available languages when a user visits the website for the first time. These interstitials are also sometimes implemented using a popup that lays over the webpage content.

This is yet again another approach used by Apple on their country-specific subdomains. When you visit for example “apple.ch”. They also change between the German and French versions of the call-to-action text every two seconds using JavaScript:This kind of interstitial is especially useful when you deal with a country-specific top level domain in a multilingual country. Surprisingly many European countries are multilingual as we already covered in an earlier blog post.

Language switcher as a menu entry

A very popular option is to embed language switchers as a menu entry. This enables quick discovery of the translated content for your website visitors.

One example of a website using a menu entry is the website of the Federal Swiss Government “admin.ch”. As you can see website visitors have the ability to change the language in the top right corner:There are several things that you should consider when you include a language switcher inside your menu:

• Using language abbreviations in a language switcher may be hard to understand. Especially when your website supports many languages this quickly becomes hard to understand.
• Showing country flags in a language switcher may be misunderstood. Some languages are spoken in several countries, and using one flag for all of them may be misunderstood or taken as offensive by some of your website visitors.

Language switchers on the bottom of every page

Having a language switcher in the footer of every page is an approach often combined with automatic redirects.

One example of this implementation is the IBM website “ibm.com”:This approach suffers from the fact that it is quite hard to discover for non-technical users. If you are a big enterprise and your website visitors are forced to use your tool this may work. As a small and upcoming brand, this will more likely result in your users dropping off your website.

Implementations of automatic redirects

Automatic redirects are generally always implemented the same way: The website tries to detect what language you are most likely to speak. Once this has been determined your browser will be shown this translated version.

While this approach reduces the amount of needed user interaction, there are some problems with it. First of all your detection may just be plain out incorrect and show the website in the wrong language. Second of all, this can in some cases result in search engines such as Google being unable to discover translated versions.

If you decide to go with an automatic redirect then we would recommend you consider the following tips:

• Don’t rely on the visitor IP for geolocation
• Your website visitors may be traveling or be using a VPN. In that case, they would be redirected to a website version they may be unable to understand.
• Query the visitor's browser for the preferred languages of the visitor
• Instead of using IP geolocation, this approach will allow you to get the preferred languages of the browser. This is usually the language that the browser is being used.
• Offer a language switcher in addition to an automatic redirect
• Offering an additional language switcher assures you that visitors can choose their preferred language when your detection goes wrong.

We don’t believe that automatic redirects are per definition a bad idea. It is however very easy to make grave mistakes when implementing one.

What should you use on your website?

No one panacea works best on every website. Depending on who you ask you may get many different answers.

We believe, however, that a language switcher as part of a menu or top banner is a good way for most websites. If you prefer an automated redirect, then combining the automated redirect with one of those two approaches is a good middle ground.

Note however that having a language switcher or automated redirect is not everything you need for a translated website. There are many other things to consider to make sure your translated website ranks high on search engines such as Google.

Ready to translate your website?

If you are ready to translate your website don't look further and try out Dilingual. Dilingual automatically scans your website for changes and translates them using industry-leading machine translation. You and your team can easily review and edit any translation using a web interface.

Dilingual takes away the hassle of translating websites. You can get started in seconds and our team will automatically apply all required optimizations and tips to your translated website. And the best? You can use Dilingual entirely for free. Get started now.