Most companies put off localizing their websites until the initial version is finalized. But multilingual websites are growing increasingly common as companies try to reach international consumers — and local ones who don’t use English as their primary language.
Localization is a term of art for the practice of translating a website from one language into secondary languages. Spencer Frasher, who works for Lokalise, a startup that specializes in enabling website translations, said the first step developers should take when approaching web translations is to think about the goals they are trying to achieve.
“I don’t think anybody undertakes all this just to do it,” Frasher said. “A lot of the customers we talked to, they’re trying to improve rankings and SEO, for instance.”
“I don’t think anybody undertakes all this just to do it.”
According to SEOblog, translating a website into different languages is a good way to improve overall SEO. If a visitor comes across a site that doesn’t support their language, they may choose to browse elsewhere instead. This makes translation especially important for companies trying to market products toward particular global markets, or whose products have proved popular among customers who use a different language.
Web developers may also pursue localization due to external pressures, such as government contractor sites needing to provide multilingual support, or pressure from competing websites that are providing better language support for customers.
A company’s reasons for localization can inform their methods for achieving it, such as whether to use human or machine translations.
Start Preparing for Localization During the Design Phase
It’s easier to localize a website if planning for the translations starts early.
“Ideally, developers should initially create applications with localization in mind,” said Ilya Bodrov-Krukowski, the lead for content and documentation at Lokalise. “But it’s not always the case, unfortunately.”
Translations don’t just change the words on a page — they can affect the page’s layout as well, especially if additional languages weren’t part of the design process from the beginning. It’s best to create the initial design with translations in mind, and even better to target the design to the exact secondary languages.
That’s because languages can be quite different. Translating a website into languages that use block characters, such as Chinese, requires different space adjustments than translating into languages such as German, which have long words consisting of many characters. Not accounting for this difference can lead to layout issues.
“It could create trouble because it doesn’t fit in the button properly, or maybe starts pushing against the padding in the CSS in a strange way, or creates unexpected line breaks,” Frasher said.
“Ideally, developers should initially create applications with localization in mind.”
It’s easier to prepare for the necessary layout adjustments when developers know the languages a site needs to be translated into before the design phase. Designers can play with the length and sizes of words to adjust how pages handle them.
But it’s not necessary to have all translations complete before designing — there are tools available that can mimic the look of different languages, allowing designers to use them as filler while laying out pages with different languages.
These pseudo-localization tools adjust the widths of text elements to match the look of different languages. For instance, Shopify’s pseudo-localization tool adds 42 percent more characters in French and 112 percent more characters in Spanish, compared to English.
When it’s not clear what languages a website will eventually be translated into, developers can focus on making the website as responsive as possible. Responsive pages are much more forgiving of layout changes and can more easily absorb word size variations.
Automated Tools Can Help With Extraction
The next step in the localization process is extracting out all text that needs translation. It’s easily the most work-intensive step for developers, because extraction involves locating and compiling a list of all the original text from a website. Extraction tools are available to help with the process, but planning ahead before coding up the website can still save developers plenty of time, even when using these tools.
For instance, the Angular i18n tool offers a package for Angular projects that looks for special “internationalization” tags within a website’s HTML — these tags serve as markers for the extraction tool, guiding it to the places on the document that needs translation.
The tool cuts down on a great deal of the manual work developers would otherwise have to do, but using it correctly requires labeling all the relevant text with the internationalization tag during development. Text elements that don’t have tags will get skipped.
“When I cut the text from the page, I might cut some part of the tag, which is going to result in a page that looks incorrect.”
Sometimes, parts of the page structure can be corrupted when using the extraction tools — for example, structural parts of the HTML might get cut off. This happens when extraction tools make parsing errors and cut an extra character or two off that isn’t part of the text.
“All the text on the websites are displayed to us in HTML tags,” Bodrov-Krukowski said. “And when I cut the text from the page, I might cut some part of the tag, which is going to result in a page that looks incorrect.”
The best way to catch these problems is by setting up automated tests to alert developers whenever this happens, so that developers can make corrections to make the page functional again.
“If we don’t have any automatic tests at all, developers are quite hesitant to change anything,” Bodrov-Krukowski said. “Because if it works, and then I change something, everything is going to break… But if I have tests that can be run very fast, then I’m going to be much more confident in my changes.”
Provide Translators With Additional Context
Lokalise was founded in 2016, but localization wasn’t the startup’s initial direction. Originally, developers were working on an entirely different project and needed to translate their website into other languages to reach more customers. But the team found using Excel spreadsheets to track translations cumbersome, and there wasn’t a good existing alternative.
“In Excel spreadsheets, they were creating translation keys along with the actual translations,” Bodrov-Krukowski said. “But it was really hard to keep track of everything that was happening. For example, if a translator changed some keys, we need some way to understand exactly what was changed, who changed it and where it was changed.”
On Excel, developers would put the phrases that needed translating — the “keys” — into the spreadsheet, and translators would write corresponding translations next to them. But it became difficult to track when changes were made, especially if teams had multiple translators working on the project. It also became difficult to organize all the translation keys as the website grew.
“It was really hard to keep track of everything that was happening.”
“For larger websites, we may have hundreds or even thousands of translation keys,” Bodrov-Krukowski said. “And if we support maybe two languages at the same time, that gives us thousands and thousands of translations.”
In addition to organizing translation keys, Lokalise has found it’s important to provide additional context to translators. Especially for highly technical industries, developers can add examples and glossaries, so translators know exactly what the phrases they are translating means. It’s also helpful to upload screenshots so translators can have visual context to better translate text that might be referring to images on a page.
Machine vs Human Translations Depend on the Project
There are currently two ways to translate — using machine translations or human translators — and each has pros and cons.
“It really depends on what the customer wants to achieve,” Bodrov-Krukowski said. “For smaller companies, maybe it makes sense to use machine translations to quickly gain more audience or expand their applications to different countries.”
But even the best machine translations tend to make more mistakes than good human translators. Machine translations work best on smaller and simpler texts, Bodrov-Krukowski said, but they aren’t able to use context as well to figure out complex texts, and also don’t perform as well within industries that use more specific technical terms.
“For smaller companies, maybe it makes sense to use machine translations to quickly gain more audience or expand their applications to different countries.”
The advantage of machine translations is that they are cheap and have almost instantaneous turnaround. Some companies use a hybrid approach, running initial machine translations, followed by human translators to proofread and edit the translations.
In the future, this approach might make more sense, because translations are largely not performed on long texts, but instead shorter snippets.
“A lot of people think about downloading huge blocks of texts and sending them to some other place to get them translated,” Frasher said. “Certainly, there is a use case for that, but increasingly the pace of innovation, the pace of development, and the pace of launching is so fast that it’s more and more just 10 words, or 15 words.”
A mixed machine and human translation method may be able to handle fragmented translations better, helping translation keep pace with development cycles. But while tools exist to aid developers in translating site content, they still require a lot of overhead — it’s still too early to expect news sites across the world to have options in your chosen language.
