Web Design: How Translation Impacts Website Development

Contact us now for an accurate quote within 1 hour: info@kwintessential.co.uk Contact us

A common problem we find when working on website translation or especially with web designers is that many do not appreciate text expansion and contraction within the translation and design process. The common perception is that when you translate the text of a website, it will automatically fit into the existing website template and space. Unfortunately, this is not the way things work.

In this article, we will look at:

* why languages expand and contract when translated
* how this impacts website translation
* what can be done by web designers to be flexible with development

Why Do Languages Differ in Length?

Languages do not only differ in grammatical structure and sounds but in length as well. You might have come across this in the bilingual magazines that are often found in airplanes; the magazine’s content might be the same in the two or three languages that are used, but the space they take up on the page often differs.

This language characteristic poses problems for people all around the world – from web designers to graphic designers to social media localizers; everyone who uses computers on a regular basis has probably come across the challenges of contrasting language lengths. We will attempt to explain this phenomenon and will provide a few tips for web designers facing the task of allowing for multiple languages in one single website design.

website translation world languages

The main reason for the difference in lengths is the grammatical structure of a language.

Languages such as English are analytical, which means declensions are very uncommon and gender, prepositions etc have to be expressed via separate words. These words take up space, but more importantly, they have to be set apart from the word they are connected to with interspacing, which takes up space as well. Contrastingly, there are also synthetic languages that indicate possessions or gender in the noun, which means interspacing is unnecessary and the overall text is shorter. Turkish is an example of an synthetic language and is an agglutinative language to be exact. This means features such as gender and prepositions are ‘stuck onto’ the noun. ‘Dersten,’ for example, means ‘before class,’ (ders being the word for class) where the suffix ‘ten’ means ‘before.’ As you can see, this type of language uses up far less space.

In addition to the placement of grammatical features, some languages make great use of compound nouns which also influences word and sentence length. If you compare Dutch with French, you will find that Dutch is less lengthy because it simply merges words together instead of indicating their relationships with prepositions. Take the word ‘hondenriem,’ for example: this Dutch word for ‘dog leash’ consists of less characters than its French counterpart ‘laisse de chien.’

No matter what language a text is translated in or to, the translation is generally more lengthy than its original. The reason for this is that translations often have to be a little more explanatory than the source text. Without realising it, writers often incorporate ‘culture-specific elements’ in their texts, i.e. elements that are perfectly clear to the reader of the source culture, but which probably do not ring a bell at all to the reader of the translation version. These kinds of words, such as for example ‘the IRA’ or ‘oliebol’ (a Dutch treat eaten around New Year’s Day) require an explanation, thus resulting in a lengthier text. Explaining these types of words, or for example stating the gender of an object or person, can be seen as explicitation.

There are two types of explicitation: voluntary and obligatory explicitation.

According to Ana Frankenberg-Garcia, voluntary explicitation occurs when translators steer away from the source text without having any grammatical reason, but simply in order to make it easier to understand. Frankenberg-Garcia states it is one of the ‘universals of translation,’ as it occurs between every single language. She gives the example of the Portuguese sentence ‘Você também gosta dela?’ Its English translation will often be ‘So you like her too?’ even though the adverb ‘so’ cannot be found in the original sentence and the adverb is not prescribed by English grammar. It simply underlines the relationship between the sentence and the preceding one.

Frankenberg-Garcia states that obligatory explicitation is prescribed by the grammar of the target language. As an example, she gives the English sentence ‘Frances liked her doctor.’ To translate this sentence into proper Portuguese, the gender of the doctor has to be stated: ‘Frances gostava dessa médica.’ (Frances liked this female doctor.) For web designers, obligatory translation is the more interesting one of the two; as problems that arise due to text length often involve words or very short phrases, the chances are small that words that explain relations between sentences will pose major problems.

Text Expansion Problems for Web Designers

For web designers, creating a website that can be used in many different languages is a complicated process. Differing text lengths have a lot to do with this: if containers are designed in such a way that the English text snugly fits, this will probably pose problems for other languages.

By now, you of course know that this is because languages differ in length, but did you know that that the smaller the source message, the bigger the relative expansion? And with what kinds of context do web designers have to deal? Exactly, short phrases and sentences. A good example of this is the ‘like’ button on Facebook. This Engish word consists of only 4 characters, but its Dutch translation ‘vind ik leuk,’ takes up more than double its space.

Dutch Facebook Like Button

The previously mentioned compound nouns also challenge the website designer. W3C give a great example of this. The English ‘Input processing features’ can easily wrap into two lines if there are width restrictions, but this is a lot harder for its German translation, which reads ‘Eingabeverarbeitungsfunktionen.’ The web designer thus has to find a way to either fit this into the container, or to break up the word in a proper place.

In addition to compound nouns found in other European languages, more exotic languages pose challenges as well. In addition to the fact that there languages often take up more space (compare ‘desktop’ with the Japanese ‘デスクトップ’), there are also languages that aren’t longer than English, but higher vertically. Many non-Latin scripts take up more vertical space. An example of this is Thai as illustrated below:

W3C example translation web design expansion

According to W3C, there is one more issue about word length that needs to be tackled, and that is abbreviation. In English, it is very common to abbreviate words: in order to save space, ‘esp’ is often used for ‘especially,’ for example. However, this might not be such a good idea when designing a multilingual website. Many languages do not abbreviate words due to the style of the language or the fact that the language is so compact that abbreviations are virtually impossible.

Flexiblity in Web Design for Translation

According to the experts at W3C Localization, you must create a flexible layout to make sure the content in the various languages your website will employ will fit in its containers. Fixed-width (and fixed height) containers might be great for your English text, but its Georgian translation (approximately 40-50% longer) probably won’t fit in there. If content and layout are separated, this process is a whole lot easier. This way, features of your website such as font sizes and line heights can be altered per language.

Next to flexible boundaries, web designers should consider adding extra space to their containers in the first place as well. By doing so, container sizes do not have to be extremely flexible as expansion is already accounted for in the standard container. IBM has published a chart that indicates how many extra space is needed per ten English characters that must fit in the box.

Again, this shows that the smaller the content, the higher the relatively needed extra space:

IBM text expansion guide for web design

(Source: IBM)

This shows the percentage change in text space needed when translating from English into another language. It doesn’t cover all world languages but the main ones are there.

If you found this blog useful, please share it with others 🙂

Achieve Your Global Potential

Contact us now for your translation service needs, and we promise to respond within an hour. Call us on 01460 279900 or send us a message to get started.

Contact us