Language switcher and navigation design

Signs the navigation needs work

• The switcher is only in the footer, or hidden inside a collapsed mobile menu.
• Languages are shown as flags, or as codes such as DE, FR and IT with no full names.
• Choosing a language sends readers to the home page instead of the matching page.
• Visitors are redirected automatically by IP address or browser language.
• Menu labels in German or French wrap onto two lines or are cut off.
• Some pages exist in only one language, and links to them give no warning.

Any one of these makes the site harder to use for the readers a multilingual site exists to serve.

What we look at

The switcher itself

Its position on every template, its labels and its markup. We follow the principles in our switcher guide: each language named in itself, no flags for languages, lang and hreflang on each option so screen readers pronounce it correctly ¹, and the same position across pages, as WCAG 2.2 asks for repeated navigation ².

Page-to-page switching

Whether the site knows which pages are translations of each other, and whether the switcher uses that knowledge. The Government of Canada's design system describes the purpose of its toggle as letting people switch languages without losing track of where they were ³; we apply the same test to every template.

Missing translations

What happens when a page has no counterpart in the chosen language. Options include hiding the option, linking to the nearest section index with a short note, or showing the page in another language with a clear message. Each has trade-offs, and the right one depends on how much of the site is translated.

Redirects and the root address

Whether anything on the server, in a plugin or in a content delivery network redirects visitors by location or browser language. Google's guidance asks sites not to redirect people automatically by a guessed language ⁴, so we replace such redirects with a switcher, hreflang and, if wanted, a dismissible suggestion.

Menu labels per language

Whether the navigation still fits once translated, and whether labels are consistent across versions. A label that is "Leistungen" in the menu and "Angebot" in the heading of the same page confuses readers; we list such mismatches for your translators.

What you receive

1. A short written assessment of the current navigation, with screenshots.
2. A design for the switcher and navigation on desktop and mobile, shown in each of your languages.
3. Implementation on your site, or detailed instructions for your developer if they prefer to build it.
4. Removal or replacement of automatic language redirects, where present.
5. A test pass: keyboard, screen reader pronunciation of each option, deep-page switching and narrow screens.

How it fits with other work

Language navigation and hreflang share the same underlying data: the record of which pages belong together. If that record is missing or incomplete, we fix it once and use it for both, which is why this service pairs well with hreflang set-up.

On a new site, navigation design is part of multilingual website design and does not need to be booked separately.

Platforms

We work on WordPress with its multilingual plugins, on other content systems, and on custom-built sites. If your platform limits what a switcher can do, such as always linking to the home page of each language, the assessment names that limit and the nearest workable alternative.

Price

From CHF 2,200 for the assessment, design and implementation on an existing site with up to four languages, plus VAT where applicable. Sites with many templates or custom platforms are quoted individually after a first look. See pricing for the other services.