As a web developer or web designer, you make sure the layout of a website looks tiptop. Images that get bigger or smaller depending on the device you’re looking at. A powerful version that is excellent for mobile. But what about website translations? Have you thought about how to deal with text expansion? We’d like to give you 2 handy translation tips for web developers.
Shifts in your layout
Not every language structure is the same as the Italian, Dutch or English language. Languages vary, characters are different and writing style is also not the same in any language. Often web designers and web developers assume that the translated web texts fit perfectly in the designed templates. If you don’t take this into account, you have a chance of turning the layout upside down by adding the translations. Shifts in the layout can cost you a lot of extra work and money.
Translations are often longer than the original
hen a text is translated into another language, the translation is usually longer than the original. And so this translation takes up more space on the website. For example, French translations are about 15% longer than the original texts. Do you have a customer who wants his website translated into Japanese? Then keep in mind that Japanese texts need more vertical space.
1. Design a flexible layout
A flexible layout is a must for website projects where translations are added. The layout must move with the content. More content? The layout expands. Less content? The layout shrinks. By keeping the content and the layout separate, you create more flexibility in terms of font size and line height.
2. Provide extra space around containers
When designing text block containers, keep in mind that you build in extra space. This way you know for sure that you have calculated enough space in case the text is translated and therefore longer than the original texts. Also make sure to include extra space on buttons and in tables.