Writing Content for Localization

Localization in any organization doesn’t limit only to translating and adapting source texts and other materials to a target market. A good and also cost-effective localization process starts earlier than in the moment when the developers send texts to translators. It naturally contains all necessary technical steps, but we’ll skip them this time and focus on the translatable texts themselves and what you can do to make them efficient from a localization point-of-view.

Many of these tips are quite general so they will help you improve your original texts too. They have been written especially with UI, help and support materials in mind – writing for your landing page might be a completely different ballgame but many of the rules apply there too.

Fluent and Correct

Would you trust a linguist to do code for you? I wouldn’t either (and I’m a linguist). Don’t put too much trust in your developer’s linguistic ability either.

Software and other web content are nowadays mostly written in English, which often is a good choice for localization and translation purposes, as the most translators around have English as one of their source languages. But other languages are used too.

Whichever your writing language of choice is, make sure the texts are well written. If your own or your developer’s English is not that good, have the texts edited by someone whose knowledge is more solid. “Engineering English” might create misunderstandings for your users, and those misunderstandings will get multiplied in localization.

Consistent Terminology

Stick to the terminology you choose and make everybody who is writing content also aware of it. This also means not using one term for several concepts. This might in many cases leave the translator wondering which of the concepts you’re referring to – and even get yourself in trouble when you want to mention those two concepts in the same sentence. Put a system in place to manage and spread terminology in your organization.

Reuse

At school, you learn that you shouldn’t be overly repetitive when writing, so you don’t make the reader bored. This is mostly true, I don’t want to argue with your elementary school teacher, but when writing software texts, repetition is your best friend. And this goes for basically any help and support texts too – or anything you write with localization in mind.  Identify parts of text that appear in many places and don’t rewrite them. The commonly used localization tools identify what has been translated earlier and you can usually have those parts translated automatically. The more similarities the new texts have with old ones, the less their translation costs. Repeated terms and structures are easy for the translators.

Using the same terms and structures also makes things easy for your user: they will be more familiar with different parts of the UI and have a more fluent experience.

Be Concise

Don’t write overly long texts unless you have a true motivation for that. English is often shorter than many other languages, e.g. German translations tend to be around 3o% longer than English texts, so don’t aim at filling all available space already in the English version. Other than that, concise texts are mostly user-friendly, too. You don’t want your users to leave your page because of texts that take ages to read and are difficult to understand, right?

Localization cost is almost always directly tied to text length, so this point is also directly linked to your bottom line.

Text in Graphics

If you want to make localization easy, embed as little text as possible into graphics. Each time you localize texts that you have as graphics means manual labor, which means more costs. Each time you add a language you need to update all graphics manually.

Cultural References

Funny slang words can nicely spice up a text, as will idiomatic expressions. And make you sound like someone who really masters the language. But at the same time, they make localization more difficult and might even be nearly impossible to translate. For translators, there are ways to get around that, but you don’t want to make translating more difficult and error-prone. The same goes rid of jargon and metaphors, you need to get rid of them.

A Final Pointer

Being customer centric pays off in localization too: if a text is optimal for a user in your own language area, it probably is easy to localize.

Photo by Thomas Lefevbre.

Improving SEO Rankings through Localization and Correct Use of Hreflang

Google needs a bit of help to detect your website’s localized language versions. To do this correctly, you need to be aware of the hreflang attribute and how to use it.

Let’s now assume that you have ordered professional translations from Get Localization for your site from English to Spanish. You define an alternative version of your site using the link tag and hreflang attribute like this in your English website:

<link rel="alternate" hreflang="es" href="http://es.example.com/" />

This means that your Spanish website will be found at http://es.example.com. But now, hold on! This is not the whole story, and some precautionary measures should be taken to do this correctly.

First and foremost, make sure that Google Search Console is tracking your website property (https://www.google.com/webmasters/). This is important as it lets you see whether your hreflang tags and international targeting are working properly.

Furthermore, you need to use these tags correctly – if you just go and add hreflang tags into your site, I bet your Search Console will show “Hreflang Tags with Errors”.

Most common hreflang error is “No return tags”. This happens because your English page links to Spanish page, but your Spanish page does not link back to your English page. Why must it do that? Well, Google uses this to verify that the content really is an alternative version of your site.

So, you also need to add this tag into your Spanish page:

<link rel="alternate" hreflang="en" href="http://www.example.com/" />

After this you’re good to go. Google will now process your site. However, it will take some time. Google’s indexing is otherwise fast, but not so much for international content.

The wrong language code is also a common error. You can find a list of language codes and region codes on Wikipedia. From us, you will receive the correct language codes along the translations.

How to Utilize SVG in Localization

SVG (Scalable Vector Graphics) is an XML-based file format for vector images. It’s also a great tool for creating responsive localized graphics for the web.

There are also several other methods for creating localized graphics, like our Get Localization for Photoshop plug-in. If you want to externalize all the texts from your images, you can also use HTML and CSS but it will get difficult if your site is responsive (it’s possible though).

SVG however, is a great alternative as you can use a single base background asset (bitmap or vector), externalize textual content and also leverage the scaling of the SVG image to create a responsive graphical asset. In our example, the background is a single bitmap and looks like this:

Following piece of XML is actually the SVG image and using the above PNG as a base background image.  You can also use full SVG background as well if you’d like. I’ll use the background bitmap image here just to keep the markup simple and easy.

In this example we use Django’s i18n framework for internalization so the texts will be translated the same way as the rest of the website. If you are using some other framework or CMS, the SVG can be embedded into your HTML code which let you employ the same process you have in place for localizing the HTML content.

	<svg height="100%" width="100%" viewBox="0 0 1200 598" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
	<image xlink:href="//dxuu1kmv6dm3n.cloudfront.net/frontpage/old_way_arrows.png" x="200" y="0" height="598px" width="800px"/>
	<text x="530" y="110" text-anchor="end" font-family="'Bad Script', cursive" font-size="35">
	{% trans "Cut'n'pasting" %}
	</text>
	<text x="320" y="275" text-anchor="end" font-family="'Bad Script', cursive" font-size="35">
	{% trans "Manual work" %}
	</text>
	<text x="360" y="480" text-anchor="end" font-family="'Bad Script', cursive" font-size="35">
	{% trans "Developers" %}
	</text>
	<text x="750" y="510" text-anchor="start" font-family="'Bad Script', cursive" font-size="35">
	{% trans "Plug-ins" %}
	</text>
	<text x="880" y="280" text-anchor="start" font-family="'Bad Script', cursive" font-size="35">
	{% trans "Time &amp; Money" %}
	</text>
	</svg>

view raw

example_svg.xml

hosted with ❤ by GitHub

When the SVG is rendered in a browser, this is how it looks like:

And this is how it looks in Japanese:

It is also fully responsive; image and text both scale correctly and keep their correct positions when you resize your browser.

There are also few important points which you should consider when creating localized assets. Text length varies in different languages, so make sure you have enough space for the translated text. Also, think how the lengthier or shorter text appears in your image. Ask yourself a question: if this text is longer or shorter, what is going to happen? Is it going to overlap the elements or will there be an ugly white space between the text and the element when text is actually shorter like in this example:

You need to make sure that text extends in the correct direction. Luckily SVG lets you define an anchor position for each text element. It’s used to align the text relative to a given point. For example, you may want to set the anchor point to middle if you want the text to always be centered, no matter how long it is. Or if you want to position the text based on the end coordinate, then the last character will always stay in the same position. This is how we can fix the problem in our example.

If you want to use Google Fonts or similar web fonts, make sure they support the languages you want to translate your site into. Google Fonts lets you search fonts by their supported languages.

So it’s not that hard, really! If you need help with your website translation & localization, let us know. Along with professional translation services, we also provide consultation and various tools for workflow management.

Get Localization offers professional translation services and managed translation & localization solutions for all kind of businesses. 

Cloud, Crowd, and Professional Translators

Stas Kalianov – Localization Manager at Schneider Electric – spoke at the GALA conference in New York in March about the role of translation agencies in software localization, and about who are the most important people in this workflow.

Through a mix of technology, their internal crowd, and professional translators Schneider Electric has achieved a safe and robust process that gives them both lower costs and more user-friendly translations.

Listen below to how they achieved this with the help of Get Localization and how they chose to leave unnecessary steps out of the process (this re-recording of the presentation has been previously published by Stas Kalianov).

Hidden Costs Of Localization

When you think about localization costs, what is the first thing that to your mind? Did you just say translation prices? You are not the only one who would say that. Sometimes that might even be true, but let’s consider a more likely alternative.

We have come across localization projects, where the actual translation cost is somewhere around 10% of the cost of the whole project (and no, I’m not exaggerating). It doesn’t take that advanced math to see where the possibilities for biggest cost savings lie in those cases.  To be honest the ratio of translation and other localization costs is usually not quite this extreme, but would most likely surprise you anyway.

What are those other 90% of costs then? Those costs can e.g. be related to various project management tasks and handling different file formats. Of course, you can’t take away all of that, but for sure some of it.

So here’s a short checklist for you. If you recognize some of the below tasks as something you or your colleagues often do in localization projects, then you have an idea of what hidden costs of localization are:

• Copy-pasting texts from your resource files to various file formats for translation and then again translations from various file formats to your resource files
• Sending emails to translators to check how much they have translated
• Converting your files to different formats
• Getting charged by translation agencies for converting your files to formats used by the translators
• Receiving several Excel worksheets with queries from translators

The key to getting rid of these hidden costs? To put it simply, a thought-out process and tools that are focused on you, not only the translation service provider. Lean localization is not a myth, but something most organizations can achieve by taking a critical look at their old habits.

Quick i18n Tip for Sublime Text Users

Do you hate wrapping your content with i18n tags? Yeah me too, however your editor might do this much easier for you. Here’s a quick tip on how you can create a shortcut to add e.g. a Django trans template tag around a string in Sublime Text:

1. Open your keymap preferences: Sublime Text → Preferences → Key Bindings (User)

2. Add the following snippet there:

{ 
 "keys" : ["ctrl+shift+g"], 
 "command" : "insert_snippet",
 "args": {
 "contents": "{% trans \"${0:$SELECTION}\" %}"
 }
}

Now when you select the text and hit ctrl+shift+g, it wraps the text with Django’s i18n template tag like this:

{% trans "Continue" %}

If you have any other  tips how to do i18n easily, let us know in the comments below.