The Internet has pervaded far beyond language barriers and is like a ubiquitous modern utility. Most websites focus on a single language but larger websites try to service international audiences with multi-lingual solutions.
This can be a difficult task and there are many different techniques for doing so. In this post I’d like to look into multilingual web design and how it can be done properly in the modern era. Multilingual support is crucial for content accessibility in the current era for any website big or small.
Any website running multiple languages typically has a specific architecture for the content. This can reside on a separate subdomain, page/directory, or can be controlled by a cookie or session.
But most of the website’s code remains the same which runs on UTF-8. This character encoding supports many languages and it’s the most popular choice for western languages like English, French, German, and Italian(among others).
The actual process of translating is easiest when done dynamically. But you can manually translate content if you have the patience to do so.
This translation process involves the actual letters themselves, but also deals with the correct translation of individual words and sentences. If possible you’ll also want to correct for minor details like currency symbols and numeric formatting for prices & dates.
I also want to clarify a very common question: what’s the difference between localization vs. internationalization? The terms seem very similar but this thread covers the subtle differences.
The internationalization(I18N) process “upgrades” a website with tech specs for supporting other languages. Then the process of localization(L10N) lets you follow this process for any language(s) you want to support.
You may have noticed the abbreviations I18N and L10N. These are shorthand phrases using numbers to represent the letters elided in each word. These phrases are very common in web development because they save time and they’re much more direct. If you go searching for plugins try using these keywords to get better results.
Also if you’re looking for a broader intro to these terms check out some of these related links:
- 9 Tips for Website Localization
- Localization vs. Internationalization – W3C
- Design Multilingual Website: A Beginner’s Guide
Structuring A Site For I18N
Many sites rely on a subdomain for each language. Others like Amazon have a different TLD such as .fr for France or .it for Italian.
But you can also do custom query parameters like myurl.com?lang=fr. There is no single right or wrong answer so the technical structure really depends on the size of the website and how many languages you plan to support.
But how you setup a localization URL structure can vastly affect a site’s SEO. In this article you’ll find pros and cons for all the different options, the best for beginners seemingly being the subdomain.
I personally recommend the subdomain method because it’s just the easiest choice for most websites. But the URL parameter with a cookie or session is also valid if you feel comfortable working with code.
Many web developers avoid cookies because they’re not as reliable and they’re not indexable for different translation searches. Check out this Stack thread to learn a bit more about why custom URLs are generally a better option.
Most backend languages like PHP, Python, and Ruby have their own internationalization libraries. You can use simple strings for text like nav menu links that run through backend libraries and quickly convert into any language you need.
Here are some of the best backend resources for I18N:
- Internationalization Functions in PHP
- Internationalization(i18n) library for Ruby
- Python gettext Library
Multilingual Page Design
The design aspect of a multilingual site is just as tricky as the technical side.
You’ll need to plan where the alternate languages appear and how users should change the language, or how to detect which language to deliver. For example, you might deliver a default language based on the IP address. This works well for a country like Japan but what about a multilingual country like Switzerland?
It’s best to default to one language and then offer alternatives on the page. These alternate languages can be links in the header or footer that let visitors change the language based on their preferences.
The Amazon.com footer is an excellent example of this technique in action.
They actually use different country code TLDs since they’re running a large international corporation. But the language links are placed in the same spots across all sites so users have an easier time finding them.
But instead of individual hyperlinks you might instead try a dropdown menu with all the available languages.
Check out the IBM homepage that uses a select menu in the footer offering 5 different languages to choose from.
I like this style a bit more because it takes up less space on the page. Visitors can clearly tell there’s a dropdown menu and it’s labeled for switching to a different language.
The tricky part is guiding users to find this select box down in the footer. Granted some companies don’t find multilingual support important enough to cram into the header.
But with a select menu like this it’s a lot easier to put it anywhere and still get results.
Airbnb uses a select menu too and it’s featured much more prominently in the footer.
Their language system uses the subdomain method so you select whatever language you want and the entire URL changes. It’s still on the same domain, just a different subdomain which can be indexed separately from Google.
How you design this on your own site will depend heavily on the audience and your goals. If you only support a couple languages then you might place flags in the top-right corner of the screen. But if you’re trying to support most languages then you should go with a select menu like on Airbnb’s homepage.
Try a few different styles and placements to see which feel best.
Translation Tools & Resources
To wrap up I want to share a small handful of translation resources for web developers.
Some cost money while others are free so there’s a mix to choose from. But they’re all made for internationalization on the web to speed up the development process and make it easier for you to complete a new projects.
In a past article we covered how to perform i18n with WordPress but we focused mostly on theme development. Using a plugin like WordPress WPML can save lots of time and headaches in the translation process.
If you need to run a multilingual site on WordPress there’s really no better option. The plugin is insanely cheap and it’s one of the best premium WP plugins considering everything you get with it.
The newer Localize.js library is really handy for professional corporations who want to offload the translation process. It does cost money for the higher tiers but you can try Localize on a demo site for a free trial.
Because of the pricing tier this probably won’t be the best solution for most users. But it’s an option and it can be viable if you’re willing to pay for a translation service.
Every developer should know about gettext because it’s been around for ages. This project is supported by GNU and the GNU Translation Project which aims to build a wider scope for developers who want translated content for their projects.
This is a big library because it works for almost any language and goes beyond the web environment. But it’s completely free and it’s one of the most popular translation libraries you can get. If you need high octane translations then gettext is the tool for the job.
There is no foolproof method to translations on the web. Technology has come a long way but there’s still a ways to go, especially with a growing population and ever-advancing devices connected to the Internet.
I hope this post can shed some light onto the multilingual aspects of web design. If you can plan how to architect, design, and technically translate content, then you’ll be able to handle this task for any sized web project.
And if you’re looking for related web design content we’ve got ya covered: