Multilingual Website Layout: 7 Patterns and Design Rules

Summarize this post with: 11 min read

ChatGPT Perplexity Grok Google AI

A good multilingual website layout does three things: it puts a language switcher in the same visible place on every page (usually the top-right of the header, repeated in the footer), it labels each language in its own name rather than with a flag, and it leaves room for translated text, which can be two or three times longer than English in short labels. Everything else, from navigation to hero images, should be built so it survives longer words, other scripts and right-to-left reading.

Key takeaways

• Put the switcher in the header on every page and repeat it in the footer. Users look for it top-right on desktop and in the menu on mobile.
• Write language names in their own language (“Deutsch”, “Español”, “日本語”). The W3C recommends against using flags for languages.
• Suggest a language, don’t force one. Google advises against automatically redirecting users based on what you think their language is.
• Design for expansion: IBM’s guidelines, quoted by the W3C, put the average growth of English strings of up to 10 characters at 200-300% in European languages.
• Keep each page in one language, give each language its own URL, and keep text out of images.

Seven layout patterns for multilingual sites

These are the patterns that work in practice. Most sites combine two or three of them.

1. Header switcher, top-right

The most common layout places a compact switcher at the end of the main navigation. Shoppers and readers look there because that’s where account, cart and search controls sit. Keep it in exactly the same place on every template, including checkout, help pages and blog posts. The W3C’s guidance is that it is “always best to add links to alternate language versions, and to do so on every page”, and that “the easier it is to discover those links, the better” (W3C Internationalization).

Good details:

• Show the current language as the button label (“English ▾”), not a generic globe icon alone.
• Open the list on click, not only on hover, so it works on touch screens and with a keyboard.
• If you have more than about eight languages, use a scrollable list or a searchable panel instead of a long dropdown.

2. Footer switcher as a backup

A second switcher in the footer catches people who scroll to the bottom looking for it, which is also where many sites have trained them to look. It costs nothing and reduces “I can’t find the language menu” complaints. The footer is also a good home for the full list when the header only shows the most popular languages.

3. Mobile menu entry

On phones, the header rarely has space for a switcher. Put the language option at the top of the slide-out menu, not buried at the bottom after twenty links, and consider a small language code (EN, DE) next to the menu icon so the current language stays visible.

4. Suggestion banner instead of a redirect

It is tempting to detect the visitor’s browser language and send them straight to the matching version. Google warns against this: “Avoid automatically redirecting users from one language version of a site to a different language version,” because redirects based on a guess “could prevent users (and search engines) from viewing all the versions of your site” (Google Search Central). Googlebot usually crawls from the US and sends no Accept-Language header, so a forced redirect can hide your translations from search.

A polite alternative is a slim banner at the top of the page, in the suggested language: “Diese Seite ist auch auf Deutsch verfügbar. [Wechseln]”. The visitor chooses, and the choice is remembered.

5. Language gateway page

Some brands open with a full-page selector: pick your language (and sometimes your country) before entering. It suits sites where languages differ a lot in content or pricing. The downside is an extra click for everyone, so use it only on the root URL, never as a barrier on deep links. If you use one, point hreflang x-default at it; Google says x-default “was designed for language selector pages” (Google Search Central).

6. Country plus language selector

Retailers selling in several markets often need two choices: where you are (for currency, shipping and legal terms) and which language you read. Show them as two clear fields, or as combined entries like “Canada (Français)”. Here flags are acceptable, because they represent countries, not languages. The W3C makes the same distinction: flags may suit “geographically tailored versions of a page”, but “are not appropriate for linking to pages that are simply translations”.

7. In-content language links

For documentation, help centres and blogs where not every article is translated, a small line at the top of each translated article (“Also available in: Español, Français”) tells readers what exists, and doesn’t promise a translation that isn’t there.

Designing the switcher itself

Use native names. A Persian speaker faced with a page in English shouldn’t have to find “Persian” to escape it; they look for “فارسی”. The W3C recommends writing links “in the language of the page they point to”, and optionally adding the current page’s language in brackets or a tooltip: “français (French)”.

Drop flags for languages. “Some countries have more than one language, and some languages are spoken in more than one country,” the W3C notes. A Spanish flag for Spanish-language content looks odd to readers in Mexico, Argentina or Colombia; a US flag for English does the same to the UK, Canada and Australia.

Mark the current language. Bold it, add a checkmark, or show it as the button label. Users need to know which version they’re on before they decide to switch.

Keep it accessible. Use a real <button> to open the menu and real links for each language, add lang attributes to each option (<a lang="de" hreflang="de" href="/de/">Deutsch</a>) so screen readers pronounce the names correctly, and make sure it can be operated with the keyboard.

Remember the choice. When someone picks a language, keep them in it as they navigate. Every internal link on the German site should point to German URLs.

Leave room for text expansion

Translated text rarely fits the space designed for English. The W3C’s article on text size quotes IBM’s average expansion rates for English into European languages (W3C):

The shorter the string, the worse it gets. That hits exactly the elements designers make tight: buttons, tabs, menu items, form labels and badges. The W3C’s own example: the Flickr label for “views” becomes “visualizzazioni” in Italian, three times longer.

Layout rules that absorb it:

• No fixed widths on text containers. Let buttons and tabs grow; set min-width rather than width.
• Allow navigation to wrap or collapse. Test the main menu in a long-word language such as German or Finnish, and have a plan (a “More” menu, smaller gaps, or a hamburger breakpoint that depends on content, not a fixed pixel width).
• Avoid text on one line by design. Headlines that must fit one line in English will break in other languages. Let them wrap and check the hero still looks balanced.
• Watch vertical space too. The W3C notes that many non-Latin scripts need taller lines, and that Chinese, Japanese and Korean characters can take more horizontal space each even when there are fewer of them.
• Don’t forget contraction. Some languages come out shorter, which can leave awkward white space in layouts tuned for English.

Plan for different scripts and directions

Fonts. Check that your web font covers every script you add. Where it doesn’t, the browser falls back to a system font mid-page, which looks broken. Pair each script with a font designed for it and similar in weight and size.

Right-to-left languages. Arabic, Hebrew, Persian and Urdu pages need dir="rtl", a mirrored layout and a decision about which icons flip. Our RTL design guide covers the rules in detail.

Images with text. Text baked into images can’t be translated by any tool, so either keep text in HTML layered over the image, or produce a version of the image per language.

Keep each page in one language

Google determines a page’s language from its visible content and recommends “using a single language for content and navigation on each page, and by avoiding side-by-side translations” (Google Search Central). Layouts that show English and Spanish in two columns, or translate only the menu while leaving the body in English, confuse both readers and search engines.

Give each language its own URL, such as /de/ subfolders or de. subdomains, and link the versions with hreflang. Google recommends separate URLs over switching content with cookies or browser settings. If you’re choosing a structure, see subdirectories vs subdomains for multilingual SEO.

Localize the details the layout carries

Layouts also hold data that changes by market:

• Dates and numbers: 03/04 is 3 April in the UK and March 4 in the US.
• Currency and prices: show the currency symbol or code clearly; don’t imply a price is local when it isn’t.
• Addresses and phone fields: forms built for US addresses (state, ZIP) frustrate everyone else. Make fields optional or adapt them per country.
• Legal and trust content: cookie notices, returns policies and contact details should match the market the language serves.

How ConveyThis fits into your layout

ConveyThis adds a language switcher to your site that you can style from the dashboard: rounded or square corners, your own background, hover and text colours, and custom CSS. By default it lists languages by their native names, and it can be shown without flags; if you do use flags for regional versions, you can change the flag shown for a language, for example to use a UK flag for English. Each language is published on its own subfolder or subdomain URL with hreflang added automatically.

If you want to guide visitors to their language, the automatic redirection setting uses the visitor’s browser language rather than their IP address, and it is off unless you enable it. Keep the switcher visible either way, so people can change their mind. To check how translated text fits your design, use the visual editor to review and shorten strings in place, and set up a glossary for terms that must stay consistent. The features page lists everything available, and our examples of multilingual website layouts show how other sites arrange their switchers.

Frequently asked questions

Where should the language switcher go on a website?

In the header, usually top-right, on every page, with a second copy in the footer. On mobile, put it at the top of the menu and keep the current language visible next to the menu icon.

Should I use flags in a language switcher?

Not for languages. The W3C recommends against it because many countries have several languages and many languages are spoken in several countries. Flags are fine for choosing a country or regional store.

Should my site redirect visitors to their language automatically?

Google advises against automatic redirects based on a guess about the user’s language, because they can stop users and search engines from reaching other versions. Suggest the language with a banner or remember the visitor’s choice instead.

How much space should I leave for translated text?

Much more for short strings than long ones. IBM’s guidance, cited by the W3C, puts average expansion at 200-300% for English strings up to 10 characters and about 130% for strings over 70 characters.

Should a multilingual website use separate URLs for each language?

Yes. Google recommends different URLs for each language version rather than switching content with cookies or browser settings, and using hreflang to connect them.

Try it on your own layout

The fastest way to see how your design copes with other languages is to translate it. You can create a ConveyThis account, add a language, and review the translated pages with the switcher in place.