9 Tipps für das Erstellen einer mehrsprachigen Website

In einer zunehmend vernetzten Welt sind mehrsprachige Websites längst keine Seltenheit mehr. Eine mehrsprachige Website zu erstellen, ist jedoch oft anspruchsvoller, als es auf den ersten Blick scheint – besonders, wenn man an die notwendigen Anpassungen im Webdesign denkt, die eine mehrsprachige Seite mit sich bringt.

Die Grundlage ist schnell erstellt – mit Weglot kannst du in weniger als 5 Minuten verschiedene Sprachen zu deiner Website hinzufügen. Doch danach gilt es zu überlegen: wo du den Sprachwechsler platzierst; wie du das Layout anpasst, wenn Nutzer von Deutsch zu einer RTL-Sprache (rechts nach links) wechseln; und welche kulturell angepasste Farben, Bilder und Symbole verwendet werden sollen.

In diesem Leitfaden gehen wir auf die wichtigsten Designaspekte ein, damit du deine mehrsprachige Website optimal planen kannst.

1. Nutze universelle Vorlagen für ein konsistentes Branding

Wenn jemand auf deiner mehrsprachigen Website landet, sollte das Nutzererlebnis einheitlich sein – unabhängig davon, welche Sprachversion die Person aufruft. Besucher aus Indien sollten auf der englischen Seite das gleiche Branding und Design sehen wie auf der Hindi-Seite.

Du kannst nicht verhindern, dass zweisprachige oder mehrsprachige Besucher verschiedene Versionen deiner Website sehen. Aber du kannst sicherstellen, dass beim Wechsel von der Standardsprache in eine andere das gleiche Branding, Layout und dieselben Design-Elemente erhalten bleiben.

Wenn du ein Content-Management-System wie WordPress nutzt, macht Weglot es dir leicht, eine konsistente mehrsprachige Website zu erstellen. Weglot integriert sich nahtlos in das Theme deines Website-Builders und übersetzt deine Inhalte automatisch. Es arbeitet zudem problemlos mit anderen wichtigen Elementen deiner Website zusammen, wie z. B. E-Commerce-Plugins. Das bedeutet, dass du keine unterschiedlichen Themes oder Designs für die verschiedenen Sprachversionen deiner Website verwenden musst.

Ein Beispiel: Wenn du die Airbnb-Homepage in Australien besuchst ...

... und dann auf Japanisch umstellst, bleiben Design und Branding in beiden Sprachen einheitlich.

Ein einheitliches Design stärkt nicht nur dein Branding, sondern macht auch zukünftige Updates deiner mehrsprachigen Website einfacher. So hast du weniger Stress, wenn du die Benutzeroberfläche in den unterschiedlichen Sprachen anpassen musst.

2. Der Sprachwechsler muss leicht zu finden sein

Platziere das Dropdown-Menü für die Sprachauswahl gut sichtbar auf deiner Startseite und allen anderen Seiten deiner Website. Bei mehrsprachigen Websites findet sich der Sprachwechsler meist in der Kopf- oder Fußzeile.

Egal, für welche Option du dich bei deiner mehrsprachigen Website entscheidest – stelle sicher, dass die Option zur Auswahl der Sprache für Nutzer wirklich leicht zu finden ist.

Achte außerdem darauf, dass die Optionen verständlich sind. Am besten ist es, die Sprachen in ihrer eigenen Schreibweise anzugeben – also zum Beispiel „Français“ anstelle von „Französisch" und „日本語“ anstelle von „Japanisch“.

Asana zum Beispiel verwendet ein Dropdown-Menü mit den Eigennamen der verfügbaren Sprachen:

Gib den Besuchern deiner mehrsprachigen Website das Gefühl, willkommen zu sein – ganz egal, welche Sprache sie sprechen. Ein gut sichtbarer Sprachwechsler hilft dir dabei, genau das zu erreichen.

3. Lass Besucher ihre bevorzugte Sprache wählen

Man könnte meinen, es sei selbstverständlich, Nutzern die Wahl ihrer bevorzugten Sprache zu ermöglichen. Doch viele mehrsprachige Websites machen es ihnen unnötig schwer und zwingen sie stattdessen, die Region zu wechseln.

Das gilt besondes für große Marken. Häufig zwingen sie die Nutzer, die Region zu ändern (z.B. von www.adobe.com zu www.adobe.com/us/ zu wechseln), obwohl diese eigentlich nur die Sprache ändern möchten.

Nur weil jemand Hindi spricht, heißt das noch lange nicht, dass er die Website eines Unternehmens in der entsprechenden Region besuchen möchte. Was, wenn die Person in New York lebt, auf der US-Website einkaufen möchte, aber die Inhalte lieber auf Hindi liest? Mach den Kaufprozess auf deiner mehrsprachigen Website so einfach wie möglich und ermögliche es deinen Nutzern, die Inhalte in ihrer bevorzugten Sprache zu lesen.

Hier ein Beispiel eines Unternehmens, das seine Besucher die Sprache wählen lässt. Uber zeigt die Sprachauswahl in der Fußzeile an:

Wenn du auf „Englisch“ klickst, öffnet sich ein Fenster, in dem du zwischen Englisch und Französisch wählen kannst:

Das Tolle an der Sprachauswahl bei Uber ist, dass Besucher ihre bevorzugte Sprache wählen können, ohne dabei die Region ändern zu müssen.

Um die Benutzerfreundlichkeit für deine Besucher noch weiter zu verbessern, könntest du zusätzlich ihre bevorzugte Sprache speichern. So wird deine mehrsprachige Website beim nächsten Besuch der Person automatisch in der gewünschten Sprache angezeigt.

Automatische Erkennung von Sprachen

Viele mehrsprachige Websites erkennen die Spracheinstellungen des Webbrowsers und wählen automatisch die entsprechende Hauptsprache für den Nutzer.

Das spart den Nutzern zwar etwas Zeit, aber das automatische Ausspielen einer Übersetzung basierend auf Spracherkennung ist nicht immer perfekt. Es kann vorkommen, dass Nutzer auf der „falschen“ Version deiner mehrsprachigen Website landen.

Ein Besucher könnte sich gerade in Spanien aufhalten – und deine mehrsprachige Website erkennt das automatisch und stellt auf Spanisch um. Der Besucher ist aber vielleicht englischer Muttersprachler und kann gar kein Spanisch lesen.

Wenn du die automatische Standortbestimmung verwendest, solltest du unbedingt auch einen Sprachwechsler zur Verfügung stellen. So haben Besucher die Möglichkeit, selbst die gewünschte Sprache auszuwählen.

Weglot ermöglicht es dir, Besucher automatisch entsprechend ihrer Browsersprache auf die passende Sprachversion weiterzuleiten. Teste Weglot jetzt 10 Tage kostenlos und erlebe es direkt auf deiner Website in Aktion!

Flaggen vs. Sprachennamen

Oft werden Flaggen verwendet, um eine Sprache zu kennzeichnen. Dabei gibt es allerdings einige kontextbezogene Aspekte zu beachten:

• Flaggen repräsentieren Länder, nicht Sprachen
• In einem Land kann es mehrere Amtssprachen geben
• Manche Sprachen werden nicht nur in einem, sondern mehreren Ländern gesprochen
• Es kann sein, dass Besucher eine Flagge nicht erkennen (wegen der Größe des Symbols) oder sie mit ähnlichen Flaggen verwechseln.

Und schließlich sollten die Optionen für die Sprachauswahl in jeder Sprache leicht verständlich sein.

4. Berücksichtige die Textexpansion

Wenn ein Text von einer Sprache in eine andere übersetzt wird, z. B. mit Google Translate, kann die Länge der Übersetzung deutlich vom Original abweichen. Das stellt eine Herausforderung für das Design dar, da mehr Platz eingeplant werden muss, um die Lesbarkeit und das Layout in allen Sprachen zu gewährleisten.

Einige Schriftsysteme sind kompakter als andere. In Sprachen wie Japanisch und Chinesisch reichen oft ein oder zwei Zeichen, um Informationen zu vermitteln, während in anderen Sprachen dafür mehrere Wörter notwendig sind.

Sprachen wie Spanisch und Englisch sind recht wortreich und benötigen manchmal bis zu 30 % mehr Platz als andere, um denselben Inhalt auszudrücken.

Der Leitfaden des W3C zur Textgröße in der Übersetzung, den wir sehr empfehlen, vollständig zu lesen, bietet einige gute Ratschläge.

Das W3C hebt hervor, warum UI-Elemente wie Schaltflächen, Eingabefelder und beschreibender Text im Rahmen der maschinelle Übersetzung flexibel sein müssen.

Als Flickr zum Beispiel in verschiedene Sprachen übersetzt wurde, mussten die Designer den Text unter den Fotos anpassen, der die Anzahl der Aufrufe anzeigt.

Die folgende Tabelle zeigt die Länge des Wortes „view“ in verschiedenen Sprachen im Verhältnis zum englischen Original:

Vom Englischen ins Italienische ist das eine Expansion um 300 % !

Bedenke, dass sich Text bei Übersetzungen meist in der Breite ausdehnt oder zusammenzieht. Stelle daher sicher, dass deine mehrsprachige Website dafür ausgelegt ist. Je kürzer der Ausgangstext, desto wahrscheinlicher ist es, dass die Übersetzung länger wird. Wenn es zu Platzproblemen kommt, versuche es mit einer freieren Übersetzung oder passe die Schriftgröße an.

Auch die Zeichenhöhe und der Zeilenabstand sind wichtig. Nicht-lateinische Schriftzeichen sind oft höher als lateinische und Schriften wie Arabisch benötigen zusätzlich mehr vertikalen Abstand zwischen den Zeilen für eine gute Lesbarkeit.

5. Berücksichtige die Kompatibilität und das Encoding von Webfonts

Laut dem W3C solltest du immer das Encoding Website angeben. UTF-8 wird empfohlen, um sicherzustellen, dass Sonderzeichen in jeder Sprache korrekt dargestellt werden.

So fügst du die UTF-8-Deklaration im Header deiner Seite ein:

Die Webfonts, die du verwendest, müssen mit allen Sprachen kompatibel sein, die deine mehrsprachige WordPress-Website unterstützt – insbesondere bei nicht-lateinischen Schriften. Die gewählten Schriftarten müssen also alle benötigten Zeichen und Glyphen für diese Sprachen enthalten, damit deine Inhalte überall korrekt dargestellt werden.

Einige Schriftarten unterstützen zwar lateinische Schriftzeichen, aber keine RTL-Schriften oder kyrillischen Zeichen. Überprüfe deshalb unbedingt, ob die von dir benötigten Sprachen abgedeckt sind, bevor du dich für eine Schriftart entscheidest.

Bei Google Fonts kannst du beispielsweise vor dem Herunterladen eines Schriftpakets die gewünschten Sprachen auswählen:

Eine einzige Sprache kann Hunderte von Zeichen umfassen, was die Schriftdateien schnell sehr groß werden lässt – ein wichtiger Punkt, den du bei der Auswahl von Schriftarten für deine mehrsprachige Website berücksichtigen solltest.

6. Design für Rechts-nach-links-Sprachen

Das Design von Seiten für Rechts-nach-links-Sprachen (RTL) bringt einige Herausforderungen mit sich. Wie SteelKiwi-Entwickler Robert Dodis im Smashing Magazine schreibt, bedeutet RTL-Design, dass man „das Interface umdrehen muss“.

So sieht zum Beispiel das Links-nach-rechts-Design von Facebook aus:

Und so sieht das Rechts-nach-links-Design von Facebook auf Arabisch aus:

Beachte, dass auch die Scrollleiste ihre Position verändert!

Die Spiegelung des Designs ist ein Aspekt, den du berücksichtigen solltest, wenn du für sowohl LTR- (Links-nach-rechts) als auch RTL-Sprachen (Rechts-nach-links) anbieten möchtest.

Wir empfehlen die Lektüre von Roberts Smashing Magazine Artikel, in dem er detailliert erklärt, wie man für RTL designt. Wir wollen das Rad hier nicht neu erfinden, also lies sein Tutorial. Wir möchten dir zeigen, wie Weglot RTL-Sprachen unterstützt und den Übersetzungsprozess für deine mehrsprachige Webseite vereinfachen kann.

Weglots Übersetzungsdienst unterstützt RTL-Sprachen und du kannst das Layout deiner mehrsprachigen Website mit CSS-Regeln 
entsprechend anpassen. Hier sind einige der RTL-Sprachen, die verfügbar sind:

• Arabisch (ar)
• Hebräisch (er)
• Persisch (fa)
• Urdu (ur)

Sobald du mit Weglot eine RTL-Sprache zu deiner mehrsprachigen Website hinzugefügt hast, kannst du die Darstellung ganz einfach anpassen, indem du CSS-Regeln für dein Layout festlegst. Gehe dazu im WordPress-Admin-Bereich zu Weglot > Language button design (Optional) und scrolle runter zu Override CSS. Hier kannst du alle gewünschten CSS-Regeln in das Textfeld eingeben – passe z. B. Schriftart, Größe, Zeilenhöhe und vieles mehr an, um das Layout perfekt auf die Primärsprache und das Gesamt-Design deiner Website abzustimmen.

Das ist alles, was du tun musst, um RTL-Sprachen mit Weglot hinzuzufügen und zu gestalten! Erfahre mehr darüber, wie Weglot RTL-Sprachen unterstützt, in unserer Dokumentation.

7. Verwende kulturell angepasste Bilder und Icons

Bilder, Icons und andere Grafiken sind wesentliche Elemente einer jeden Webseite. Visuelle Darstellungen sind jedoch von Natur aus subjektiv und können in einem anderen kulturellen Kontext unterschiedlich interpretiert werden.

Auf der französischen Version der Clarins-Homepage ist zum Beispiel eine Frau europäischer Abstammung abgebildet:

Auf der japanischen Homepage des Unternehmens hingegen siehst du das Bild einer Frau asiatischer Herkunft:

Auch Bilder können verletzend wirken. Was in westlichen Ländern als unproblematisch gilt, kann in anderen Kulturen ein Tabu sein. So könnten Bilder, die gleichgeschlechtliche Paare oder die Gleichberechtigung der Geschlechter zeigen, in Ländern, in denen Homosexualität noch illegal ist oder Frauen weniger Rechte haben, auf Ablehnung stoßen.

Auch kleine Elemente wie Icons sollten bedacht werden, denn ihre Bedeutung kann je nach Kultur variieren. Ein Globus-Symbol, das für ein englischsprachiges Publikum in Australien gestaltet wurde, könnte beispielsweise für Nutzer in Afrika ganz anders aussehen:

Das dritte Symbol oben zeigt einen Globus, aber keine bestimmte Region, daher eignet es sich besser für eine mehrsprachige Website.

Bilder und andere grafische Elemente sollten unbedingt unter Berücksichtigung regionaler und kultureller Besonderheiten überprüft werden.

Vermeide Bilder und Grafiken mit eingebettetem Text. Eingebetteter Text kann mit Tools wie Weglot nicht übersetzt werden – also am besten ganz darauf verzichten.

8. Verwende kulturell angepasste Farben

Die Wahrnehmung und Bedeutung von Farben variiert weltweit stark zwischen verschiedenen Kulturen.

In westlichen Kulturen steht Rot oft für Liebe, Energie, Leidenschaft und Gefahr. In asiatischen Kulturen ist es eine auch eine wichtige Farbe, die aber Glück, Wohlstand, Feierlichkeiten und ein langes Leben symbolisiert. In einigen afrikanischen Ländern wiederum wird Rot mit Tod und Aggression verbunden.

Blau gilt als die unkomplizierteste und weltweit am ehesten akzeptierte Farbe im Design, da sie viele positive Assoziationen hervorruft. Sie wirkt beruhigend und friedlich, wird jedoch auch mit Traurigkeit und Depression verbunden. Für Banklogos ist Blau besonders beliebt, da es Vertrauen und Autorität vermittelt.

Wenn du Farben für das Design deiner internationalen Website auswählst, recherchiere vorher auf Google die mit den Farben verbundene Symbolik.

9. Achte auf Datum und Maßeinheiten

Nicht in allen Ländern wird das gleiche Datumsformat verwendet – auch nicht in der englischen Sprache. Im Vereinigten Königreich und in Europa ist die Formatierung Tag-Monat-Jahr üblich, während in den USA Monat-Tag-Jahr verwendet wird.

Je nach Zielgruppe kann es sinnvoll sein, Maßeinheiten anzupassen – auch im Hinblick auf die Suchmaschinenoptimierung. Während 90 % der Welt das metrische System verwenden, nutzen die USA, Liberia und Myanmar nach wie vor das imperiale System für Gewichte und Maße.

Die Wahl des richtigen WordPress-Übersetzungs-Plugins für dein Design

WordPress-Übersetzungsplugins gibt es in vielen Varianten und inwieweit sie mit deinem Design kompatibel sind, kann stark variieren. Eine Lösung, die sich garantiert nahtlos in deine mehrsprachige Website einfügt, ist Weglot.

Mit dem visuellen Editor von Weglot kannst du deine Inhalte direkt im Frontend deiner Website für alle Subdomains übersetzen. So siehst du gleich, wie alles im Kontext von Design und Layout wirkt – ähnlich wie bei Google Translate.

Mit Weglot kannst du Design und Position des Sprachwechslers frei wählen. Die Standardschaltfläche ist so gestaltet, dass sie zu jeder Website passt. Du kannst sie aber auch über benutzerdefiniertes CSS ganz nach deinen Vorstellungen gestalten und jedes gewünschte Format verwenden.

Darüber hinaus unterstützt Weglot die in diesem Beitrag vorgestellten Gestaltungsprinzipien, darunter:

• Die Verwendung einer universellen Vorlage für ein einheitliches Branding
• Eine leicht zugängliche Optionen für die Sprachauswahl
• Besuchern die Wahl der bevorzugten Sprache ermöglichen
• Automatisches UTF-Encoding
• Unterstützung von RTL-Sprachen

Schauen wir uns die wichtigste designbezogene Funktion von Weglot an: die Anpassung des Sprachwechslers.

Anpassen der Optionen zur Sprachauswahl mit Weglot

Nachdem du das Weglot-Plugin auf deiner mehrsprachigen Webseite installiert und eingerichtet hast, wirst du aufgefordert, deinen API-Schlüssel einzugeben, deine Standardsprache auszuwählen und die Sprachen festzulegen, in die deine Inhalte übersetzt werden sollen.

Falls du noch kein Weglot-Konto hast, musst du eines erstellen, um einen API-Schlüssel zu erhalten.

Sobald du deine Änderungen gespeichert hast, aktualisiere das Frontend deiner frisch gebackenen mehrsprachigen Website. Du wirst dann in der unteren rechten Ecke den Sprachwechsler entdecken. Wenn du darauf klickst, werden die verfügbaren Sprachen angezeigt und du kannst die gewünschte Übersetzung auswählen.

Um mit den grundlegenden Anpassungen zu beginnen, gehe zu Weglot > Language button design (Optional). Hier kannst du Folgendes auswählen:

• Ob ein Dropdown-Menü verwendet werden soll;
• Ob Flaggen verwendet werden sollen
• Welche Arten von Flaggen angezeigt werden
• Ob die Namen der Sprachen angenzeigt werden sollen
• Ob nur der Code einer Sprache angezeigt werden soll

Im Abschnitt Override CSS kannst du CSS-Regeln anwenden, um das Aussehen deines Sprachwechslers auf deiner mehrsprachigen Webseite zu gestalten. Du kannst du zum Beispiel Folgendes tun:

• Den Pfeil auf der Schaltfläche entfernen
• Ändern Sie die Hintergrundfarbe
• Eine Scrollleiste hinzufügen
• Den Rand entfernen
• Ein Padding hinzufügen

Einige Beispiele dazu findest du in diesem Artikel über die Anpassung des Designs der Sprachschaltflächen.

Wenn du im Konfigurationsbildschirm von Weglot nach unten scrollst, findest du eine Anleitung zur Positionierung des Sprachwechslers:

• Im Menü. Gehe zu Appearance -> Menus und ziehe den Weglot Translate Custom Link an die gewünschte Stelle.
• <strong wg-1="">Als Widget.</strong> Gehe zu Appearance -> Widgets und ziehe das Weglot Translate Widget per Drag & Drop an die gewünschte Stelle.
• Mit einem Shortcode. Verwende den Weglot Shortcode [ weglot_switcher ] (ohne Leerzeichen), um deinen Sprachwechsler dort zu platzieren, wo du ihn haben willst.
• Im Quellcode. Du kannst den folgenden Code an einer beliebigen Stelle im Quellcode der HTML-Seite einfügen:

<div id=”weglot_here”></div>

Um dir zu zeigen, wie der Sprachwechsler auf einer mehrsprachigen Website angepasst werden kann (egal, ob es sich um eine WordPress-, eine Shopify- oder eine andere Website handelt), siehst du unten ein Beispiel: Patyka zeigt den Sprachwechsler in der linken oberen Ecke der Seite an.

Die Sprachen werden mit ihren Namen angezeigt. Wenn du auf den Schalter klickst und eine Sprache auswählst, wird der Seiteninhalt aktualisiert und in die gewählte Sprache übersetzt.

Fallstudie: Maestrooo nutzt Weglot

Maestrooo ist eine 2013 gegründete Agentur für Webentwicklung mit Sitz in Frankreich, die unter anderem für Kunden wie From Future und Patyka arbeitet. Heute betreut Maestrooo die Mehrheit der Shopify-Plus-Kunden in Frankreich.

Maestrooo suchte nach einer soliden und zuverlässigen Lösung für mehrsprachige Websites, die sich flexibel an die Bedürfnisse ihrer Kunden anpassen lässt. Nachdem das Team zahlreiche Lösungen getestet hatte und dabei auf Probleme in Bezug auf SEO und der Verwendung von hreflang-Tags gestoßen war, entdeckte es Weglot.

Weglot übersetzt alle Inhalte auf den Websites der Maestrooo-Kunden – egal, ob es sich um dynamische Inhalte, von anderen Apps generierte Inhalte oder um den Checkout-Prozess handelt – und das ohne das Layout der mehrsprachigen Websites zu beeinträchtigen.

Maestrooo gestaltet nicht nur individuelle Websites für Kunden, sondern entwickelt auch die offiziellen Themes für den Shopify Theme Store. Während andere Lösungen für mehrsprachige Websites oft die Formatierung der Maestrooo-Themes beeinträchtigen, bietet Weglot eine Übersetzungslösung, die zuverlässig und nahtlos funktioniert.

Maestrooo unterstützt jedes Jahr zwischen 8.000 und 12.000 Kunden beim Einstieg in Shopify und setzt dabei auf Weglot für die Erstellung mehrsprachiger Websites.

Kulturelle Optimierung durch lokalisiertes Design

Die Designprinzipien, die wir in diesem Beitrag besprochen haben, helfen dir dabei, eine mehrsprachige Website zu erstellen, die toll aussieht und für eine positive Benutzererfahrung sorgt.

Um deinen Website-Besuchern und Kunden ein optimales Erlebnis in ihrer Sprache zu bieten, solltest du über die Website hinausdenken und eventuell auch deine Marketingmaterialien und den Kundensupport übersetzen.

Achte auch auf die Geschwindigkeit und Leistung deiner mehrsprachigen Website. In einigen Ländern mit geringerer Internetbandbreite kann das Laden großer Sprachpakete den Zugriff auf deine Inhalte erschweren.

Mit dem richtigen Plugin für die Übersetzung deiner mehrsprachigen Website und einem Design, das benutzerfreundliche Übersetzungsoptionen bietet, schaffst du eine visuell ansprechende UI und UX in der bevorzugten Sprache deiner Kunden. Probiere Weglot mit unserer 10-tägigen kostenlosen Testversion aus oder starte eine kostenlose Produkttour!