Designing Translation Ready Websites - MTM LinguaSoft · 2018-03-05 · Designing Translation Ready Websites. 2016 MTM LinguaSoft., Inc. ... Most, if not all, websites today are designed

Designing Translation Ready Websites

© 2016 MTM LinguaSoft., Inc. All rights reserved.

Web use in languages other than English has been growing much more rapidly than English

usage for well over a decade. Between 2000 and 2013, web usage in English grew by about

470%, but other languages saw much higher rates of growth: Chinese, Spanish, Portuguese,

Russian, and Malay have all seen growth rates of 1,000-3,000%; Arabic use has increased by well

over 5,000%. English language users have fallen to less than 30% of all users—still the largest

single bloc, but getting relatively smaller all the time.

The chances are good, then, that a website will be translated into other languages—to reach new

customers and audiences who already have a variety of choices in their own languages. If the

website you are designing or developing isn’t already multilingual, there is a good chance that

the client will decide on translation and localization in the future. In other words, it makes sense

to consider the possibility of translation right at the beginning of the design process.

Broadly speaking, there are three major aspects of any website design project: 1) choice of

platform, which will influence the overall design, 2) site organization, and 3) graphic design.

A good design should take translation and localization issues into account in all phases of the

process.

Growth in Internet Useby Language2000–2013

Arabic

Russian

Chinese

Portuguese

Malay

Spanish

English

Source: Internet World Stats


Choice of Platform

Most, if not all, websites today are designed using a content management system (CMS) so

that updates can be made quickly and content can be added without the need for technical

skills. When you choose a system, there are many things to consider such as costs, security, SEO

friendliness, and ease of use.

But another important factor—often overlooked—is the ability of the system to handle multiple

languages. Will the system allow you to create foreign-language sites, specify languages and

locales with the proper encoding, handle the many different scripts in use, and support right-to-

left languages like Arabic, Hebrew, Persian, and Urdu? You should also be able to assign specific

style sheets to each site so that adjustments can be made to things like font sizes and styles

depending upon the language involved. For example, a language like Chinese should use a font

size a couple of points larger than the size used for English, and Asian languages should have

italics removed, since they don’t use italics for emphasis.

Because of the changing web environment, most CMSs do have multilingual support. Popular

systems like WordPress, Drupal, Joomla, and Sitecore are likely also to incorporate mechanisms—

or have available plug-ins or extensions—to support the translation workflow. The more popular

systems are also usually easier to connect to outside translation management systems when the

time comes; various connectors have already been developed and just have to be hooked up to

your site.


Site Organization

If you know that the site you are designing will be bi- or multilingual, you should consider

what type of set-up you will use for administering the various sites. If it is a WordPress site, for

example, you might want to do a multisite installation from the beginning so that all the sites

can be administered from one dashboard and share assets and plug-ins. Or you might want to

install a plug-in to support multilingual translation (we recommend WPML) at the start. WPML

serves the same purpose as a multisite installation for administration purposes, while also

providing support for translation and automatically setting up language codes and language

menus. Installing WPML at the beginning will help avoid compatibility issues later. Another option

is simply to have a separate WordPress installation for each site. There will be similar options to

consider for other platforms.

You will want to be sure that your theme and plug-in allow the translation of all content (menus,

taxonomy, text strings). And, unless you know what the multilingual site domain structure will be,

you will want a plug-in that allows you to choose among structuring the foreign language sites as

subfolders, subdomains, or separate domains.

How will your sites

relate to each other?

DOMAIN

Subdomain Folders ExternalDomain


Site Organization (cont)

As you add other plug-ins and extensions for different purposes, such as forms, make sure that

they also support multiple languages and that the contents of fields such as names, dates, and

addresses can be adapted for international and local usages. If you incorporate a shopping cart,

make sure it can accommodate international payment methods and different currencies. And, of

course, allow multiple languages for the products database.

You also want to be ready for multilingual SEO. Even though Google no longer gives any weight

to meta keywords, it is a good practice to include them for each page that you are optimizing.

That way it will be easy to identify the keywords for later translation and multilingual keyword

research. If the site is to be multilingual from the start, you will also want to include Google

hreflang tags.


Graphic Design

Many of the issues involved in the graphic design of multilingual websites are the same as for

the graphic design of print materials. Our white paper “Tips on Graphic Design for Translation”

addresses many of the issues.

There are a few special points that are specific to, or especially important for, website design.


Use Responsive Web Design (RWD)

This has become the default option for many designers and developers. It is even more important

for a global design that will support translation and localization.

First of all, the spread of mobile devices, which is fueling the shift to RWD in this country, is

even more of a factor in other countries—particularly in regions that have historically had low

internet usage. In many countries a smartphone is the most likely device for people to use to

access the internet. eMarketer reports that over one-quarter of the world’s population will use

smartphones in 2015 and projects that, by 2018, the share will be over one-third. India will soon

have the second largest level of smartphone usage after the U.S., and Cisco predicts that sales

will continue to soar through the next few years. Throughout Asia, Africa, and the Middle East,

rising web use is fueled by the development of low-cost smartphones.

And we mustn’t forget the tablets and mini-tablets that are quickly becoming ubiquitous. A 2013

Forrester blog article predicted that, by 2017, 60% of American consumers will have tablets, in

Europe 42% will have them, and worldwide one in eight people will own

one.

Another reason that RWD is also great for multilingual websites, is that

it favors design practices that also help prepare sites for translation and

localization.

By 2018, one-third of the

world’s population will

be using smartphones.—eMarketer


Start with a simple template

Different cultures have different sensibilities, so it is best to start with a spare design without a

lot of clutter and a lot of design elements that are clearly aimed at a particular audience. Use

a color scheme that’s likely to be acceptable for most cultures (some shade of blue or green

is a common choice). Make use of web sources, like the color wheel in “Interactive Colours in

Culture,” that illustrate the different meanings and associations that colors have in different

cultures.

Simplification is also important because it is part of optimizing for speed. You always want

your site to load quickly, but this can be a particular problem on an international site where

connectivity may be a problem and where the user may be far removed from the actual web

server.

Your basic template should include (or allow for) the navigation links that will be needed for a

multilingual site. Ordinarily such links are near the top of the page, so that they are immediately

visible and accessible.

To the extent possible, any graphics incorporated into the template should be graphics that are

internationally acceptable, understandable, and appropriate for various cultures (see “Tips on

Graphic Design for Translation” for more details).

Use common unicode fonts. This will minimize the need for browsers to substitute fonts,

changing the look of your design in unexpected ways.


Allow for Text Expansion

When English text is translated into other languages, the length of the text often expands

substantially. For example, a translation from English into any of the major Western European

languages will normally result in text that is 20-30% longer. The use of fixed text areas, with no

room for expansion, should be avoided wherever possible.

The use of RWD discourages the use of fixed width text areas since sites are made up of modules

that have to be able to resize and text has to reflow according to the size of the user’s device.

But some text items can still be a problem. These include menu choices that have to fit across a

bar or text that has to fit within a graphic button. Even a single word can get significantly longer.

Consider, for instance, this simple translation:

English è Russian Welcome è Добропожаловать

Imagine how much menu phrases might expand in translation. IBM’s guidelines for translating

text for user interfaces into European languages uses this rule: the shorter the phrase, the

greater the likely expansion. Make sure that the space devoted to the menu bar, and the width of

any sidebar menus, is long enough to allow for plenty of text expansion.

# English Words

Add’l Space Needed

Up to 10 100% to 200%

11 to 20 80% to 100%

21 to 30 60% to 80%

31 to 50 40% to 60%

51 to 70 31% to 40%

Over 70 30%

—IBM “Guidelines to design global solutions”


Don’t Use Graphics with Embedded Text

We continue to see a lot of websites with banners, buttons, and other important images with text

embedded in them. In order to localize these graphics, we have to obtain or recreate the original

graphics with text layers in order to place the translated text. This means additional time and

expense, because the work must be done outside of the overall translation process and involves

working with professional graphic programs like PhotoShop and Illustrator.

Again, RWD pushes designers and developers in the same direction—to the use of graphics with

no embedded text. While images with embedded text may adjust their size to a small screen, the

embedded text will become smaller and smaller with the size of the user’s screen. In RWD, the

text on a graphic is usually a separate layer that resizes and re-flows independently of the graphic

itself. SEO considerations are also important here. Google penalizes sites on mobile searches

where the text embedded in graphics falls below a certain size on a mobile screen.

The best practice is not to embed text in images, especially if the images are important to the

user experience. Where you can’t avoid embedding text, make sure to save the original version

of the graphic in the native program (Photoshop, Illustrator) with the text on a separate editable

layer.

Special Note: Do not plan to use flags as graphic links to foreign language sites. Many designers

do this, but it can be misleading and may be offensive to some people since the same language

may be spoken in many different countries. The language links or menu should use the name of

each language in that language (español, français, deutsch).

The language menu

should have the name

of each language in that

language.


The Right Translation Partner

In the best of all possible situations, you know from the very beginning whether the website

will be translated and into what languages. You or your client already has a translation partner

lined up, and you are able to consult about issues that arise during the design and development

process. More often, the final translation decisions come after the site has been designed.

Whatever the situation, the website developer can and should play an important role in choosing

the right translation partner. Your translation partner needs to be knowledgeable about website

technology, as well as about language and culture issues. These days there are all kinds of tools

that can allow direct translation of the text in web file types, like HTML, XML, PHP and JS. There

are also tools that can automate much of the process of extracting and reinserting text. Be

aware, however, that not all translation services know how to use these tools, or how to use

them correctly. Furthermore, many other technical issues can arise during website translation,

and these will be easier to address in collaboration with a language service partner who

understands the issues and can contribute to their resolution.

The right language partner will combine technology savvy with cultural awareness and the use of

translators with the proper subject matter expertise.


Further Reading

“Tips on Writing for Translation,” MTM LinguaSoft White Paper

“Tips on Graphic Design for Translation,” MTM LinguaSoft White Paper

Internet World Usage by Language, Internet World Stats (2013)

J.P. Gownder, “Global Business And Consumer Tablet Forecast Update, 2013 To 2017,” (Aug 5

2013)

2 Billion Consumers Worldwide to Get Smart(phones) by 2016, EMarketer (Dec 11 2014)

India to have 651 million smartphones, 18.7 million tablets by 2019, The Economic Times (Feb

3 2015)

“Use hreflang for language and regional URLs, ” Google Webmasters

Philip Hodges, Interactive Colours In Culture, Zoho:Lab (Mar 23 2011)

+1 (215) 729-6765

www.mtmlinguasoft.com

Documents

Designing Translation Ready Websites - MTM LinguaSoft · 2018-03-05 · Designing Translation Ready Websites. 2016 MTM LinguaSoft., Inc. ... Most, if not all, websites today are designed