Mehrsprachiges Website-Layout: 7 Muster und Designregeln

Fassen Sie diesen Beitrag zusammen mit: 11 Minuten Lesezeit

ChatGPT Ratlosigkeit Grok Google AI

Ein gutes mehrsprachiges Website-Layout bewirkt drei Dinge: Es platziert auf jeder Seite ein Sprachumschalter an derselben sichtbaren Stelle (normalerweise oben rechts in der Kopfzeile, wiederholt in der Fußzeile), es beschriftet jede Sprache mit ihrem eigenen Namen und nicht mit einer Flagge und es lässt Platz für übersetzten Text, der in kurzen Beschriftungen zwei- bis dreimal länger sein kann als Englisch. Alles andere, von der Navigation bis zu Heldenbildern, sollte so aufgebaut sein, dass es längere Wörter, andere Skripte und das Lesen von rechts nach links übersteht.

Wichtige Erkenntnisse

• Setzen Sie den Umschalter in die Kopfzeile jeder Seite und wiederholen Sie ihn in der Fußzeile. Benutzer suchen oben rechts auf dem Desktop und im Menü auf dem Handy danach.
• Schreiben Sie Sprachnamen in ihrer eigenen Sprache („Deutsch“, „Español“, „日本語“). Das W3C empfiehlt, keine Flaggen für Sprachen zu verwenden.
• Schlagen Sie eine Sprache vor, erzwingen Sie keine. Google rät davon ab, Benutzer automatisch auf der Grundlage ihrer Meinung nach Sprache umzuleiten.
• Design für die Erweiterung: Die vom W3C zitierten Richtlinien von IBM beziffern das durchschnittliche Wachstum englischer Zeichenfolgen mit bis zu 10 Zeichen in europäischen Sprachen auf 200–300 %.
• Behalten Sie jede Seite in einer Sprache, geben Sie jeder Sprache eine eigene URL und halten Sie Text aus Bildern heraus.

Sieben Layoutmuster für mehrsprachige Websites

Dies sind die Muster, die in der Praxis funktionieren. Die meisten Websites kombinieren zwei oder drei davon.

1. Header-Umschalter, oben rechts

Das gebräuchlichste Layout platziert einen kompakten Umschalter am Ende der Hauptnavigation. Käufer und Leser schauen dort hin, denn dort befinden sich Konto-, Warenkorb- und Suchsteuerelemente. Bewahren Sie es auf jeder Vorlage, einschließlich Checkout, Hilfeseiten und Blogbeiträgen, an genau derselben Stelle auf. Die Leitlinien des W3C lauten, dass es “immer am besten ist, Links zu alternativen Sprachversionen hinzuzufügen, und zwar auf jeder Seite”, und dass “je einfacher es ist, diese Links zu entdecken, desto besser” (W3C-Internationalisierung).

Gute Details:

• Zeigen Sie die aktuelle Sprache als Schaltflächenbeschriftung an (“Englisch ▾”), nicht nur als generisches Globussymbol.
• Öffnen Sie die Liste per Klick, nicht nur beim Hovern, sodass sie auf Touchscreens und mit einer Tastatur funktioniert.
• Wenn Sie mehr als etwa acht Sprachen haben, verwenden Sie anstelle eines langen Dropdowns eine scrollbare Liste oder ein durchsuchbares Panel.

2. Fußzeilenumschalter als Backup

Ein zweiter Umschalter in der Fußzeile erwischt Leute, die nach unten scrollen und danach suchen. Viele Websites haben ihnen auch beigebracht, dort zu suchen. Es kostet nichts und reduziert “ich finde das Sprachmenü nicht” Beschwerden. Die Fußzeile ist auch ein guter Ausgangspunkt für die vollständige Liste, wenn in der Kopfzeile nur die gängigsten Sprachen angezeigt werden.

3. Mobiler Menüeintrag

Bei Telefonen ist im Header selten Platz für einen Umschalter. Platzieren Sie die Sprachoption oben im Slide-Out-Menü, nicht unten nach zwanzig Links vergraben, und betrachten Sie einen kleinen Sprachcode (EN, DE) neben dem Menüsymbol, damit die aktuelle Sprache sichtbar bleibt.

4. Vorschlagsbanner anstelle einer Weiterleitung

Es ist verlockend, die Browsersprache des Besuchers zu erkennen und ihn direkt an die passende Version zu senden. Google warnt davor: “Vermeiden Sie es, Benutzer automatisch von einer Sprachversion einer Website auf eine andere Sprachversion umzuleiten,” da Weiterleitungen, die auf einer Vermutung basieren “, Benutzer (und Suchmaschinen) daran hindern könnten, alle Versionen Ihrer Website anzuzeigen” (Google Search Central). Googlebot crawlt normalerweise aus den USA und sendet keine Accept-Language Header, sodass eine erzwungene Weiterleitung Ihre Übersetzungen vor der Suche verbergen kann.

Eine höfliche Alternative ist ein schlankes Banner oben auf der Seite, in der vorgeschlagenen Sprache: “Diese Seite ist auch auf Deutsch verfügbar. [Wechseln]”. Der Besucher wählt und die Wahl bleibt in Erinnerung.

5. Sprachgateway-Seite

Einige Marken öffnen mit einer ganzseitigen Auswahl: Wählen Sie vor der Eingabe Ihre Sprache (und manchmal auch Ihr Land) aus. Es eignet sich für Websites, bei denen sich die Sprachen inhaltlich oder preislich stark unterscheiden. Der Nachteil ist ein zusätzlicher Klick für alle. Verwenden Sie ihn daher nur auf der Stamm-URL und niemals als Barriere für Deep Links. Wenn Sie eines verwenden, zeigen Sie hreflang x-default dabei; Google sagt, x-default “wurde für Sprachauswahlseiten entwickelt” (Google Search Central).

6. Länder- und Sprachauswahl

Einzelhändler, die in mehreren Märkten verkaufen, müssen oft zwei Möglichkeiten haben: wo Sie sich befinden (für Währung, Versand und rechtliche Begriffe) und welche Sprache Sie lesen. Zeigen Sie sie als zwei klare Felder oder als kombinierte Einträge wie “Kanada (Français)” an. Hier sind Flaggen akzeptabel, da sie Länder und keine Sprachen repräsentieren. Das W3C macht die gleiche Unterscheidung: Flaggen können “geografisch zugeschnittene Versionen einer Seite” passen, “sind jedoch nicht für die Verlinkung auf Seiten geeignet, bei denen es sich lediglich um Übersetzungen handelt”.

7. Inhaltssprachliche Links

Für Dokumentationen, Hilfezentren und Blogs, in denen nicht jeder Artikel übersetzt ist, teilt eine kleine Zeile oben in jedem übersetzten Artikel (“Auch verfügbar in: Español, Français”) den Lesern mit, was existiert, und verspricht keine Übersetzung, die nicht vorhanden ist.

Entwerfen des Umschalters selbst

Verwenden Sie einheimische Namen. Ein persischsprachiger Sprecher, der mit einer Seite auf Englisch konfrontiert wird, sollte nicht nach „Persian“ suchen müssen, um sie zu verlassen; er sucht nach „فارسی“. Das W3C empfiehlt, Links „in der Sprache der Seite, auf die sie verweisen“, zu schreiben und optional die Sprache der aktuellen Seite in Klammern oder einem Tooltip hinzuzufügen: „français (French)“.

Lassen Sie Flaggen für Sprachen fallen. “Einige Länder haben mehr als eine Sprache und einige Sprachen werden in mehr als einem Land gesprochen,” stellt das W3C fest. Eine spanische Flagge für spanischsprachige Inhalte sieht für Leser in Mexiko, Argentinien oder Kolumbien seltsam aus; Eine US-Flagge für Englisch tut dasselbe mit Großbritannien, Kanada und Australien.

Markieren Sie die aktuelle Sprache. Fettgedruckt, mit einem Häkchen versehen oder als Schaltflächenbeschriftung anzeigen. Benutzer müssen wissen, auf welcher Version sie sich befinden, bevor sie sich für einen Wechsel entscheiden.

Halten Sie es zugänglich. Verwenden Sie ein echtes <button> Um das Menü und echte Links für jede Sprache zu öffnen, fügen Sie hinzu lang Attribute zu jeder Option (<a lang="de" hreflang="de" href="/de/">Deutsch</a>) damit Bildschirmleseprogramme die Namen richtig aussprechen und sicherstellen, dass es mit der Tastatur bedient werden kann.

Denken Sie an die Wahl. Wenn jemand eine Sprache auswählt, behalten Sie ihn bei der Navigation darin. Jeder interne Link auf der deutschen Seite sollte auf deutsche URLs verweisen.

Lassen Sie Platz für die Texterweiterung

Übersetzter Text passt selten in den für Englisch vorgesehenen Raum. Der Artikel des W3C zur Textgröße zitiert IBMs durchschnittliche Expansionsraten für Englisch in europäische Sprachen (W3C):

Je kürzer die Saite, desto schlechter wird es. Das trifft genau die Elemente, die Designer eng machen: Schaltflächen, Registerkarten, Menüpunkte, Formularbeschriftungen und Abzeichen. Das eigene Beispiel des W3C: Das Flickr-Label für “views” wird auf Italienisch dreimal länger zu “visualizzazioni”.

Layoutregeln, die es aufnehmen:

• Keine festen Breiten auf Textcontainern. Lassen Sie Schaltflächen und Registerkarten wachsen; einstellen min-width anstatt width.
• Erlauben Sie das Umschließen oder Zusammenklappen der Navigation. Testen Sie das Hauptmenü in einer Langwortsprache wie Deutsch oder Finnisch und haben Sie einen Plan (ein “Mehr” Menü, kleinere Lücken oder einen Hamburger-Breakpoint, der vom Inhalt abhängt, nicht von einer festen Pixelbreite).
• Vermeiden Sie Text in einer Zeile absichtlich. Überschriften, die im Englischen in eine Zeile passen müssen, werden in anderen Sprachen unterbrochen. Lassen Sie sie einpacken und überprüfen Sie, ob der Held noch ausgeglichen aussieht.
• Achten Sie auch auf den vertikalen Raum. Das W3C weist darauf hin, dass viele nicht-lateinische Schriften höhere Zeilen benötigen und dass chinesische, japanische und koreanische Schriftzeichen jeweils mehr horizontalen Raum einnehmen können, selbst wenn es weniger davon gibt.
• Vergessen Sie die Kontraktion nicht. Einige Sprachen sind kürzer, was zu ungünstigen Leerräumen in auf Englisch abgestimmten Layouts führen kann.

Planen Sie verschiedene Skripte und Anweisungen ein

Schriftarten. Überprüfen Sie, ob Ihre Webschriftart jedes hinzugefügte Skript abdeckt. Wo dies nicht der Fall ist, greift der Browser auf eine Systemschriftart in der Mitte der Seite zurück, die defekt aussieht. Kombinieren Sie jedes Skript mit einer dafür entwickelten Schriftart mit ähnlichem Gewicht und ähnlicher Größe.

Sprachen von rechts nach links. Arabische, hebräische, persische und Urdu-Seiten benötigen dir="rtl", ein gespiegeltes Layout und eine Entscheidung darüber, welche Symbole umgedreht werden. Unser RTL-Designleitfaden behandelt die Regeln im Detail.

Bilder mit Text. In Bilder eingebauter Text kann von keinem Tool übersetzt werden. Bewahren Sie daher entweder den Text in HTML über dem Bild auf oder erstellen Sie eine Version des Bildes pro Sprache.

Behalten Sie jede Seite in einer Sprache

Google ermittelt die Sprache einer Seite anhand ihres sichtbaren Inhalts und empfiehlt “die Verwendung einer einzigen Sprache für Inhalt und Navigation auf jeder Seite und die Vermeidung von nebeneinander liegenden Übersetzungen” (Google Search Central). Layouts, die Englisch und Spanisch in zwei Spalten anzeigen oder nur das Menü übersetzen, während der Textkörper auf Englisch bleibt, verwirren sowohl Leser als auch Suchmaschinen.

Geben Sie jeder Sprache eine eigene URL, z. B /de/ Unterordner oder de. Subdomänen und verknüpfen Sie die Versionen mit hreflang. Google empfiehlt separate URLs gegenüber dem Wechseln von Inhalten mit Cookies oder Browsereinstellungen. Wenn Sie eine Struktur auswählen, siehe Unterverzeichnisse vs. Subdomains für mehrsprachige SEO.

Lokalisieren Sie die Details, die das Layout enthält

Layouts enthalten auch Daten, die sich je nach Markt ändern:

• Termine und Nummern: 03/04 ist der 3. April in Großbritannien und der 4. März in den USA.
• Währung und Preise: Zeigen Sie das Währungssymbol oder den Währungscode deutlich an. Bedeuten Sie nicht, dass ein Preis lokal ist, wenn dies nicht der Fall ist.
• Adressen und Telefonfelder: Formulare, die für US-Adressen (Bundesland, Postleitzahl) erstellt wurden, frustrieren alle anderen. Machen Sie Felder optional oder passen Sie sie pro Land an.
• Rechtliche und vertrauenswürdige Inhalte: Cookie-Hinweise, Rückgaberichtlinien und Kontaktdaten sollten mit dem Markt übereinstimmen, den die Sprache bedient.

Wie ConveyThis in Ihr Layout passt

ConveyThis fügt Ihrer Site ein Sprachumschalter hinzu, das Sie über das Dashboard formatieren können: abgerundete oder quadratische Ecken, Ihren eigenen Hintergrund, Hover- und Textfarben sowie benutzerdefiniertes CSS. Standardmäßig werden Sprachen nach ihren nativen Namen aufgelistet und können ohne Flags angezeigt werden. Wenn Sie Flags für regionale Versionen verwenden, können Sie Ändern Sie die Flagge für eine Sprache angezeigt, beispielsweise um eine britische Flagge für Englisch zu verwenden. Jede Sprache wird in einem eigenen Unterordner oder einer eigenen Subdomänen-URL veröffentlicht, wobei hreflang automatisch hinzugefügt wird.

Wenn Sie Besucher zu ihrer Sprache führen möchten, automatische Umleitungseinstellung verwendet die Browsersprache des Besuchers und nicht seine IP-Adresse und ist deaktiviert, sofern Sie sie nicht aktivieren. Halten Sie den Umschalter in beiden Fällen sichtbar, damit die Leute ihre Meinung ändern können. Um zu überprüfen, wie übersetzter Text zu Ihrem Design passt, verwenden Sie den visuellen Editor, um Zeichenfolgen an Ort und Stelle zu überprüfen und zu kürzen, und richten Sie ein Glossar für Begriffe ein, die konsistent bleiben müssen. Die Features-Seite listet alles Verfügbare auf, und unsere Beispiele für mehrsprachige Website-Layouts Zeigen Sie, wie andere Websites ihre Umschalter anordnen.

Häufig gestellte Fragen

Wohin soll das Sprachumschalter auf einer Website gehen?

In der Kopfzeile, normalerweise oben rechts, auf jeder Seite, mit einer zweiten Kopie in der Fußzeile. Platzieren Sie es auf Ihrem Mobiltelefon oben im Menü und lassen Sie die aktuelle Sprache neben dem Menüsymbol sichtbar.

Soll ich Flags in einem Sprachumschalter verwenden?

Nicht für Sprachen. Das W3C rät davon ab, da viele Länder mehrere Sprachen haben und in mehreren Ländern viele Sprachen gesprochen werden. Flaggen sind in Ordnung, um ein Land- oder Regionalladen auszuwählen.

Sollte meine Site Besucher automatisch auf ihre Sprache umleiten?

Google rät von automatischen Weiterleitungen ab, die auf einer Vermutung über die Sprache des Nutzers basieren, da sie Nutzer und Suchmaschinen daran hindern können, andere Versionen zu erreichen. Schlagen Sie die Sprache mit einem Banner vor oder merken Sie sich stattdessen die Wahl des Besuchers.

Wie viel Platz sollte ich für übersetzten Text lassen?

Bei kurzen Saiten ist das viel mehr der Fall als bei langen. Die vom W3C zitierten IBM-Richtlinien gehen von einer durchschnittlichen Erweiterung von 200–300 % für englische Zeichenfolgen bis zu 10 Zeichen und von etwa 130 % für Zeichenfolgen über 70 Zeichen aus.

Sollte eine mehrsprachige Website für jede Sprache separate URLs verwenden?

Ja. Google empfiehlt für jede Sprachversion unterschiedliche URLs, anstatt Inhalte durch Cookies oder Browsereinstellungen zu ersetzen und diese über hreflang zu verbinden.

Probieren Sie es auf Ihrem eigenen Layout aus

Der schnellste Weg, um zu sehen, wie Ihr Design mit anderen Sprachen zurechtkommt, besteht darin, es zu übersetzen. Du kannst Erstellen Sie ein ConveyThis-Konto, fügen Sie eine Sprache hinzu und überprüfen Sie die übersetzten Seiten mit aktiviertem Umschalter.