We Design in German to Catch What English Hides

English is a compact language. Its words are short, its sentences are fairly brief and its common interface labels, such as "Save", "Next" and "Buy", are among the shortest anywhere. That makes it a flattering language to design with. Buttons look neat, menus fit easily and headings sit on one line.

Then the site is translated. Buttons overflow, menu items wrap and carefully balanced headings break into three lines.

How much text grows

Translated text is usually longer than English, and short strings grow the most. A common rule of thumb is to allow around 30 per cent more space for longer passages and much more for short labels, where a single English word can double or triple in length. German is well known for this, partly because it joins words together into long compounds that can't easily be broken across lines.

Other languages bring their own challenges. Some read right to left, which mirrors the whole layout. Some need taller lines to fit accents or scripts. Some are shorter than English, which can leave a layout looking sparse.

Designing with the long version

On projects that will be translated, we test our designs with German text from early on. Navigation, buttons, form labels and headings all get checked with longer words in place. Problems that would otherwise show up late in development, after translation, show up while they're still cheap to fix.

Even on English-only sites, we find this useful. Content changes over time. A client renames a service, adds a longer product name or writes a heading that's twice as long as the one in the design. A layout that copes with German copes with whatever English comes along later.

Layouts that stretch

Designs that survive translation share a few traits. Buttons grow with their text rather than having a fixed width. Navigation has room to spare, or a plan for when it runs out. Text isn't squeezed on top of images where a longer line would cover something important. Labels sit above fields rather than beside them, because a side label that fits in English might not fit in German.

We also avoid putting text inside images. It can't be translated without recreating the image, and it can't be read by screen readers or search engines.

Words that break

Long compound words create a specific problem: they don't wrap. A single German word can be wider than a narrow mobile column. We set up automatic hyphenation where the language supports it, and we check headings on small screens to catch words that overflow.

Beyond length

Translation affects more than length. Dates, numbers and currencies are written differently in different countries. Some phrases that work in English don't translate at all, especially jokes and puns. Writing clear, plain copy in the first place makes translation easier and more accurate, which is why we think about it in our content writing too.

A multilingual site also has search implications, such as telling search engines which version is for which language and region. That's part of our SEO work on international projects.

Fixing it before it ships

The cost of catching text expansion early is a few hours of testing. The cost of catching it after translation is redesigning components, chasing layout bugs across languages and sometimes asking translators to find shorter words, which rarely ends well.

If your site is going into other languages, or might one day, we can help you build it to stretch. Get in touch.