What a Second Language Does to Your Layout

Text does not translate to the same length

The same meaning in French typically takes between a fifth and a third more space than in English.

Short strings expand proportionally more than long ones, because a single word has nowhere to absorb the difference.

Which means the elements that break are the short ones: buttons, menu items, labels, and headings.

A paragraph reflows and is fine, and a four-item menu becomes a five-line menu.

Where it shows first

• Menu items wrapping onto two lines.
• Buttons with text broken mid-word.
• Headings that no longer fit one line.
• Table headers in narrow columns.
• Form labels beside their fields.
• Anything in a fixed-width box.

The last is the real cause of most of it. A design that assigns exact widths to elements works only for the text it was designed around, and translation is the first thing that reveals that.

Design with the longer version

The approach that avoids the whole problem.

Where a site will be bilingual, lay it out using the French text rather than the English, since a layout that fits the longer version fits both.

Where the translation does not exist yet, add roughly a third to your English strings and check the layout survives.

That means a menu item of one word being tested as though it were three, and a button label being tested at half again its length.

Doing that during design is minutes, and doing it after the translation arrives is a redesign.

It also improves the English version, since a layout with slack in it survives content changes generally.

A worked example

A business added a French version of a site designed in English.

The header menu had five items sized to fit exactly across the available width.

In French the same five items needed about a third more room, so they wrapped onto a second line, which pushed the header taller and broke the fixed layout beneath it.

Two buttons had text that hyphenated awkwardly, and one heading overlapped an image.

The fix was to let the header wrap gracefully, allow buttons to grow with their content, and shorten three labels in both languages.

The shortened English labels were an improvement in themselves, which is the common outcome.

Shorten rather than shrink

The instinct when something does not fit is to reduce the type size, and it is the wrong answer.

Smaller text in one language and larger in another produces an inconsistent site and pushes the smaller version below comfortable reading size.

Shortening the label solves it in both languages and usually produces a better label.

Where a menu item is three words in English it is probably one concept described loosely, and naming the concept is shorter and clearer.

Do that work in the original language first, since a shorter English source produces a shorter translation.

Things that are not text but behave like it

Worth listing, since they are missed.

Text inside an image cannot be translated at all without producing a second image, which is why any text that matters should be real text.

Dates, which are written differently and are ambiguous when abbreviated.

Numbers and currency, where the separator and the position of the symbol differ.

Accented characters, which some older typefaces render badly or not at all.

And the language attribute on the page itself, which tells browsers and screen readers which language to use and is frequently left as English on the French pages.

Switching between them

A practical point that gets designed carelessly.

The switch should be visible without opening a menu, since somebody who cannot read the current page cannot navigate to find it.

Label it in the target language rather than the current one: the French link should say Français.

And switching should stay on the same page rather than returning to the home page, which is the most common implementation and the most annoying.

Where a translation of that page does not exist, say so and offer the closest equivalent rather than silently redirecting.

Half a translation is worse than none

Since this is where bilingual sites usually end up.

A site with translated navigation and English content underneath tells somebody the language is available and then fails them one click in.

Decide what is genuinely being translated: everything, the main pages only, or nothing.

Translating the main pages only is a legitimate choice if the untranslated ones are marked, and an unmarked mixture is not.

The same applies to forms, error messages, and confirmation emails, which are almost always missed and are where somebody is most reliant on understanding.

Search treats them as separate sites

Worth knowing, since the layout question is the visible half and this is the one that affects whether anybody arrives.

Each language version needs its own addresses rather than swapping the text on the same page, so that each can be found for searches in that language.

The two versions should also declare that they are alternatives of each other, which tells a search engine to show the right one rather than treating them as duplicates.

Ask whoever builds it to handle both, since a bilingual site done as a single page that switches text is invisible in the second language.

That also makes the analytics readable, since you can then see which language people actually arrive in rather than guessing.

The counter-case

Most small businesses do not need this.

A local trade whose customers all operate in one language is spending effort on a problem it does not have, and a poorly maintained second version is worse than one good one.

Machine translation also produces something readable now, and for some businesses a browser doing that is sufficient.

And translation is an ongoing cost, since every content change has to happen twice.

If you are bilingual or may become so, design with the longer text and keep the layout flexible, which costs nothing today.

What to check

1. Add a third to your English labels and look.
2. Check menus, buttons, and headings first.
3. Remove fixed widths from text elements.
4. Shorten labels rather than shrinking type.
5. Get text out of images.
6. Set the language attribute correctly.
7. Keep the switch on the same page.

Step one is the whole test and it takes ten minutes, since everything that will break under translation breaks under a third more English too.

The general version of this constraint is covered in a layout that survives a long business name.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.