Not every language structure is the same as English. As English speakers, it is easy to forget this seemingly common sense sounding fact. Languages differ, lettering characters differ, and writing styles differ from language to language. Most designers and developers do not keep this in mind and assume that once the text on their platform is translated, it will fit snugly into the templates they designed for their English version. Sadly, things do not always work this way. Texts contract and expand upon translation, and if you do not consider this, your entire design may crumble and fall apart.
Every language is unique
Each language is different. Even languages with common ancestries are different. When written, the length the words take up will differ. For example, if you grab any bilingual magazine and look at the space taken up by the words, you will realize that despite both texts saying the exact same thing, the space they take up is clearly different. Why is this? The reason is simple. Every language has a unique grammatical structure. For example, English has specific words that signify gender, prepositions, articles, etc. all of which take up space. Furthermore, these words cannot be joined with any other, so the sentence needs to be spaced out. Spacing also takes up space. There are other languages, for example, Swahili, where genders, prepositions, articles, etc. can be added directly onto the noun.
Furthermore, translations tend to be lengthier than original texts. Why? Some words do not have equivalents and have to be explained, or culture-specific elements may be incorporated that will make perfect sense to one who speaks the language, but the meaning is lost in translation and has to be elaborated.
These are just some of the reasons why translation will affect the length of your text. As a web development company, you need to keep this in mind as you design your containers. English may fit snugly, but anything else would collapse. For example, the English ‘Like’ translates to ‘vind ik leuk’ in Dutch, which posed challenges for Facebook and their famous Like Button. Exotic languages pose similar problems. Their characters take up more space than Latin scripts. Think Japanese, Chinese and Thai scripts, among others.
If you are developing a website that needs to be translated, it would be wise to remember that the translation process will impact your website in the ways outlined above. The resultant text could be significantly shorter or longer. If you are translating to non-latin text, the characters would also be larger. You can only shrink them down so far, you need to account for this possibility in the design itself.
So What Can Web Designers Do About It?
As a designer or a web development company, there are several things that you can do to counter the impacts that translation may have on your project.
Create a Flexible Layout
This is of vital importance. Your layout should be able to expand and contract with its content. You should try to keep your content and your layout separate so that when it comes to editing the content, the layout is not adversely affected. Separate content from the layout to allow you the flexibility to play with font sizes and line heights where necessary.
Leave Some Extra Space Around Your Containers
When you create that text box container, be sure to leave some space around it just in case the text is translated and that extra space needs to be utilized. This leaves you room for flexibility. Since for most similar Latin languages, expansion is minimal, the extra space could be enough to account for the addition.
Involve Reputable Translation Company In Your Project
Everyone needs a little pick me up sometimes. To get the best results, it is a good idea to seek the help of translation companies such as DayTranslation for that added layer of expertise. Do not use Google Translate to translate your pages.
A good rule of thumb for web development companies is to remember that the smaller your content, the larger the extra space its translation will need. The translation of a 10 character text would likely occupy an additional 100% to 200% of the current space the original text is occupying. 70 character text would likely only occupy 30% more. Plan accordingly.