In diesem Beitrag
Wenn Sie eine mehrsprachige Website erstellen, gibt es einige Best Practices für das Design mehrsprachiger Websites, die Sie befolgen sollten, um sicherzustellen, dass Sie für Besucher in allen Sprachen eine großartige Erfahrung schaffen.
Was sind also diese wichtigen Best Practices? Nun, darum dreht sich im Grunde dieser gesamte Beitrag!
Nachfolgend werden acht Best Practices für das Design mehrsprachiger Websites erläutert, die Sie bei der Einrichtung einer mehrsprachigen Website berücksichtigen sollten.
Diese Tipps funktionieren unabhängig davon, wie Sie Ihre Website mehrsprachig machen. Wenn Sie jedoch WordPress verwenden, ist die Verwendung Das mehrsprachige TranslatePress-Plugin gibt Ihnen beim Design einen Vorsprung, da Sie alle Ihre Übersetzungen über eine visuelle Benutzeroberfläche verwalten können. Mehr dazu im Beitrag!
Ohne weiteres Vorwort widmen wir uns nun unseren Tipps für das Design mehrsprachiger Websites…
Acht Tipps und Best Practices für die Gestaltung mehrsprachiger Websites
Wenn Sie die Entwicklung Ihrer mehrsprachigen Website erfolgreich meistern und ein optimales Design sicherstellen möchten, befolgen Sie diese acht Tipps und Best Practices.
1. Platzieren Sie Ihren Sprachumschalter an einer gut sichtbaren Stelle
Wenn Sie auf Ihrer Website mehrere Sprachen anbieten, müssen Sie einen Sprachumschalter hinzufügen, damit Besucher ihre bevorzugte Sprache auswählen können.
Da dieser Sprachumschalter eine so wichtige Rolle für die Nutzererfahrung auf Ihrer Website spielen wird, ist es von entscheidender Bedeutung, dass Sie ihn an einem leicht auffindbaren Ort platzieren.
Das Letzte, was Sie wollen, ist, dass all die harte Arbeit, die Sie in die Übersetzung Ihrer Inhalte gesteckt haben, dadurch verschwendet wird, dass jemand Ihre Website verlässt, weil er nicht einmal merkt, dass sie mehrsprachig ist.
Es gibt zwei “Hauptplätze” für die Platzierung Ihres Sprachumschalters:
- Ein schwebender Sprachumschalter, typischerweise in der unteren rechten Ecke. Dieser Sprachumschalter bleibt immer sichtbar, selbst wenn der Nutzer nach unten scrollt. Das ist ein großartiger Ansatz, wenn Ihr Sprachumschalter absolut unübersehbar sein soll.
- Ein Menü-Sprachumschalter das ist Teil Ihres Hauptnavigationsmenüs, typischerweise im Kopfbereich Ihrer Website. Dies macht es für Besucher auch sehr einfach zu finden, da die meisten Besucher irgendwann Ihr primäres Navigationsmenü betrachten werden.
Hier ist ein Beispiel für den standardmäßigen schwebenden Sprachumschalter von TranslatePress:
Einige Websites platzieren den Sprachumschalter auch im Footer- oder Seitenbereich. Diese Bereiche können jedoch leichter übersehen werden (vor allem die Fußzeile), weshalb es in der Regel besser ist, sich für eine der ersten beiden Optionen zu entscheiden.
Wenn du Verwenden Sie TranslatePress, um Ihre WordPress-Website zu übersetzen, TranslatePress fügt standardmäßig automatisch einen schwebenden Sprachumschalter in der unteren rechten Ecke Ihrer Website ein.
Sie können es jedoch ganz einfach an einen anderen Ort verschieben, indem Sie es beispielsweise mit dem integrierten WordPress-Menüverwaltungstool als Menüpunkt hinzufügen.
Um mehr zu erfahren, schauen Sie sich unser Tutorial an zum Hinzufügen eines WordPress-Sprachwechslers.
2. Verwenden Sie in Ihrem Sprachumschalter nicht nur Flaggen
Wenn Sie den vorherigen Tipp befolgt haben, sollten Besucher kein Problem haben Befund Ihr Sprachumschalter. Lassen Sie uns nun über die Optimierung des Designs und der Benutzererfahrung des Sprachumschalters selbst sprechen.
Um es Besuchern zu erleichtern, ihre bevorzugte Sprache in Ihrem Sprachwechsler auszuwählen, sollten Sie sicherstellen, dass der eigentliche Sprachname im Sprachwechsler enthalten ist.
Während es in Ordnung ist, Flaggen in den Sprachumschalter einzubinden, wenn Sie der Sprachauswahl ein visuelles Element hinzufügen möchten, sollten Sie niemals verwenden nur Flaggen.
Als die Die Website “Flags are not languages” erinnert uns daran, Flaggen sind Symbole für Länder, nicht für Sprachen.
Nehmen wir zum Beispiel an, Sie möchten eine Flagge für die englische Sprache hinzufügen. Welche Flagge sollten Sie verwenden? Sollten Sie die englische Flagge verwenden, weil die Sprache von dort stammt? Die britische Flagge, weil sie bekannter ist als die englische Flagge? Die Flagge der USA, weil in den USA mehr Englischsprecher leben als im Vereinigten Königreich?
Und was ist mit der Flagge für Hindi? Sollte man die indische Flagge verwenden, weil es dort mehr als 400 Millionen Hindi-Sprecher gibt? Das macht irgendwie Sinn ... aber was macht man dann, wenn man auch Bengalisch für die 80 Millionen bengalischen Sprecher in Indien anbieten möchte? Man kann nicht schon wieder die indische Flagge verwenden.
Um jegliche Verwirrung zu vermeiden, ist es viel besser, den Namen der Sprache einfach als Klartext einzubinden, typischerweise so, wie er in dieser Sprache geschrieben wird. Sie würden zum Beispiel “Deutsch” und nicht “German” verwenden, da “Deutsch” der relevantere Begriff für einen deutschsprachigen Sprecher ist.
Wenn Sie wirklich die visuelle Darstellung einer Flagge wünschen, können Sie die Flagge dann hinzufügen neben der Text.
Flaggen können auch dazu beitragen, die Lokalisierung darzustellen. Wenn Sie beispielsweise verschiedene Versionen Ihrer Website für spanischsprachige Personen aus Spanien und spanischsprachige Personen aus Mexiko haben, kann das Hinzufügen der Flagge den Nutzern helfen, ihre lokale Version auszuwählen.
Wenn Sie TranslatePress verwenden, können Sie sowohl den Textnamen als auch die Flagge ganz einfach in Ihren Sprachumschalter integrieren. Alternativ können Sie die Länderflaggen auch ganz einfach deaktivieren, falls Sie diese nicht verwenden möchten.
Sie können auf diese Einstellungen zugreifen, indem Sie zu Einstellungen → TranslatePress → Sprachwechsler Registerkarte. Die Flaggenoptionen finden Sie in der Layout Abschnitt jedes Switch-Typs.
Für weitere Tipps haben wir einen vollständigen Leitfaden zur Optimierung Ihres Sprachumschalters.
3. Verwenden Sie eine mehrsprachige Website-Vorlage für ein konsistentes Design
Um ein konsistentes Erlebnis für verschiedene Sprachen auf Ihrer Website zu gewährleisten, sollten Sie sicherstellen, dass Sie für jede Sprache dieselbe grundlegende mehrsprachige Website-Vorlage verwenden.
Das heißt, Sie möchten nicht, dass Ihre Website je nach der von einer Person gewählten Sprache völlig anders aussieht.
Es ist gut zu Lokalisieren Sie Ihre Website. Zum Beispiel können Sie basierend auf der Sprache eines Benutzers Bilder, Symbole, Sekundärfarben und so weiter austauschenMehr dazu später).
Aber was das grundlegende Design Ihrer Website betrifft, möchten Sie nicht, dass es sich ändert, da dies für Besucher verwirrend sein kann, wenn sie nach dem Sprachwechsel etwas völlig anderes sehen.
Wenn Sie WordPress verwenden, ist dies ganz einfach zu bewerkstelligen. Wenn Sie beispielsweise TranslatePress zur Übersetzung Ihrer WordPress-Website nutzen, verwendet Ihre Website weiterhin dasselbe WordPress-Theme, ganz gleich, welche Sprache Sie auswählen.
Aber gleichzeitig haben Sie die Möglichkeit, kleinere Designdetails für die Lokalisierung anzupassen, wie zum Beispiel das Ändern von Bildern.
4. Überprüfen Sie Ihr Design in verschiedenen Sprachen, um Probleme zu erkennen
Als Sie Ihr Website-Design erstellt haben, haben Sie wahrscheinlich dafür gesorgt, dass alles aussieht gerade richtig mit Text in Ihrer Originalsprache.
Zum Beispiel haben Sie vielleicht ein paar Bearbeitungsrunden durchlaufen, nur um sicherzustellen, dass die Überschrift auf Ihrer Homepage auf Desktop-Geräten nur eine einzige Zeile einnimmt.
Leider kann sich die sorgfältige Arbeit, die Sie in die Optimierung des Abstands in Ihrem Design gesteckt haben, verändern, wenn Sie Ihre Website in eine neue Sprache übersetzen.
Der übersetzte Text kann länger oder kürzer sein als der Originaltext, was jeweils zu unschönen Effekten beim Abstand und Design Ihrer Website führen kann.
Um dem Rechnung zu tragen, sollten Sie Ihr Design in verschiedenen Sprachen überprüfen und bei Bedarf Anpassungen vornehmen.
Für den einfachsten Weg, dies zu erreichen, können Sie ein Übersetzungstool verwenden, das Ihnen eine visuelle Vorschau bietet.
Zum Beispiel, wenn Sie Verwende TranslatePress Um Ihre Website zu übersetzen, können Sie alle Ihre Übersetzungen über eine visuelle Benutzeroberfläche verwalten, die Ihnen eine Live-Vorschau davon bietet, wie Ihre Website für Besucher in verschiedenen Sprachen genau aussehen wird:
Auf diese Weise können Sie ganz einfach die erforderlichen Anpassungen vornehmen, um das perfekte Design zu erstellen, unabhängig davon, in welcher Sprache eine Person surft.
5. Auf Schriftartenkompatibilität und Codierungsprobleme prüfen
Ein weiteres Designdetail, das Sie unbedingt überprüfen sollten, sind mögliche Probleme mit der Schriftartenkompatibilität oder Kodierung.
Wenn alle Ihre Sprachen das lateinische Alphabet verwenden, werden Sie wahrscheinlich auf keine Probleme stoßen. Sobald Sie jedoch darüber hinausgehen, ist es wichtig sicherzustellen, dass Ihre Schriftart mit allen Sprachen auf Ihrer Website kompatibel ist.
Zum Beispiel unterstützen nicht alle Schriftarten das kyrillische Alphabet, was ein Problem sein kann, wenn Sie Ihre Inhalte in eine slavische Sprache übersetzen (wie zum Beispiel Russisch).
Sie finden eine Reihe nützlicher Tools, mit denen Sie die Kompatibilität einer Schriftartdatei überprüfen können. Hier sind einige gute Optionen:
- Underware.nl – zeigt Ihnen mithilfe einer Karte die Kompatibilität Ihrer Schriftart. Das ist nicht perfekt, da Länder, wie oben besprochen, keine Sprachen sind. Dennoch vermittelt es Ihnen auf einen Blick einen ziemlich guten Eindruck von der Abdeckung einer Schriftart. Darunter erhalten Sie einen wesentlich detaillierteren Einblick in deren Abdeckung.
- Alphabet-Zeichensatzprüfer – eine komplexere und konfigurierbare Option, mit der Sie bestimmte Sprachen überprüfen können.
Hier sind zum Beispiel die Ergebnisse für die beliebte Schriftart Roboto (fett) aus dem Tool von Underware.nl:
Einige Schriftarten-Marktplätze bieten Ihnen auch Tools an, um Schriftarten in verschiedenen Sprachen anzusehen oder herunterzuladen. Google Fonts lässt Sie zum Beispiel eine Sprache auswählen, um Schriftarten zu sehen, die diese Sprache unterstützen (und Vorschautext in dieser Sprache anzuzeigen):
Schließlich sollten Sie auch die UTF-8-Kodierung verwenden, was dazu beiträgt, dass die Sonderzeichen einer Sprache unter allen Umständen angezeigt werden.
Wenn Sie WordPress verwenden, sollte es automatisch die UTF-8-Codierung verwenden, ohne dass Sie etwas tun müssen. Bei selbst programmierten Websites müssen Sie UTF- jedoch möglicherweise manuell festlegen.
6. Bilder und Symbole für die Lokalisierung anpassen
Website-Lokalisierung ist eine wichtige Best Practice im Bereich des mehrsprachigen Website-Designs, um ein optimiertes Erlebnis für Besucher aus verschiedenen Regionen sicherzustellen.
Während es bei der Übersetzung darum geht, Ihre Inhalte in die neue Sprache zu übertragen, geht es bei der Lokalisierung darum, andere Designdetails entsprechend anzupassen.
Nehmen wir zum Beispiel an, Sie haben eine Seite, auf der Sie in jedem Land ein berühmtes Wahrzeichen anzeigen möchten. Für die englische/US-amerikanische Version der Seite haben Sie möglicherweise die Freiheitsstatue.
Wenn Sie jedoch Übersetze diese Seite ins Französische, macht es eigentlich keinen Sinn, dieses selbe Bild beizubehalten. Stattdessen könnten Sie es durch den Eiffelturm ersetzen. Dies würde für französische Besucher ein lokales Erlebnis schaffen.
Neben Bildern möchten Sie möglicherweise auch andere visuelle Elemente lokalisieren, wie zum Beispiel die Icons, die Ihre Website verwendet.
Denken Sie im Grunde über alle visuellen Elemente auf Ihrer Website nach und darüber, ob es die Benutzererfahrung verbessern könnte, wenn Sie diese Elemente basierend auf der Sprache des Nutzers ändern würden.
Wenn Sie TranslatePress verwenden, Hier erfahren Sie, wie Sie Bilder und andere visuelle Elemente übersetzen können.
7. Formate bei Bedarf anpassen (Datum, Uhrzeit usw.)
Für einen weiteren wichtigen Teil der Website-Design-Lokalisierung müssen Sie auch das Format verschiedener Inhalte auf Ihrer Website wie Datumsangaben, Uhrzeiten und so weiter anpassen.
Das häufigste Beispiel wären unterschiedliche Datumsformate – z. B. Monat/Tag/Jahr gegen /Tag/Monat/Jahr.
Einige Sprachen verwenden möglicherweise auch andere Zeitformate – z. B. das 12-Stunden-Format im Vergleich zum 24-Stunden-Format.
Wenn Sie eines dieser Formate in Ihrem Design verwenden, sollten Sie diese basierend auf der Sprache des Benutzers aktualisieren.
8. Bei Bedarf an Sprachen von rechts nach links anpassen
Dieser letzte Tipp für das Design mehrsprachiger Websites gilt nicht für alle Websites. Wenn Sie Ihre Website jedoch zusätzlich zu Links-nach-rechts-Sprachen auch in Rechts-nach-links-Sprachen anbieten möchten, erfordert dies natürlich einige Designanpassungen.
Hier sind einige gängige Design-Anpassungen, die Sie vornehmen müssen, um Sprachen von rechts nach links zu berücksichtigen:
- Text nach rechts statt nach links ausrichten.
- Spiegeln einiger Icons bei Bedarfnur wenn sich die Bedeutung des Symbols durch seine Richtung ändert).
- Aktualisierung von Bildern für die Leserichtung von rechts nach links, falls erforderlich.
- Ändern von Formularfeldern und Ausrichtung.
- Ändern des Layouts des Headers (Platzieren Sie zum Beispiel das Logo auf der rechten Seite anstelle der linken Seite, wie es bei von links nach rechts geschriebenen Sprachen üblich ist.).
- Breadcrumbs rechts statt links ausrichten.
Im Grunde müssen Sie viele Elemente auf Ihrer Website so anpassen, dass sie von Linksbündigkeit auf Rechtsbündigkeit umgestellt werden.
Erstellen Sie noch heute das perfekte mehrsprachige Website-Design
Die Erstellung einer mehrsprachigen Website ist eine großartige Möglichkeit, mehrsprachigen Besuchern ein besseres Benutzererlebnis zu bieten und mit mehr Besuchern in Kontakt treten zuallererst dank Mehrsprachige SEO.
Wenn Sie jedoch das Beste aus Ihren Übersetzungsbemühungen herausholen möchten, gibt es einige wichtige Best Practices für mehrsprachige Websites, die Sie beim Design beachten sollten.
Die Umsetzung dieser Praktiken stellt sicher, dass Ihre Besucher eine großartige Erfahrung auf Ihrer Website haben, unabhängig davon, in welcher Sprache sie surfen.
Wenn Sie Ihre Website mit WordPress erstellt haben, können Sie Nutzen Sie das kostenlose TranslatePress-Plugin um eine mehrsprachige Website zu erstellen, die all diesen Best Practices entspricht. Sie bietet Ihnen nicht nur alle Werkzeuge, die Sie benötigen, um Ihre Website vollständig zu übersetzen und zu lokalisieren, sondern verwendet auch eine visuelle Benutzeroberfläche, mit der Sie das Design Ihrer Website ganz einfach mit Ihren Übersetzungen verknüpfen können.
Wenn du anfangen möchtest, schau dir unseren Leitfaden an zu Wie man eine mehrsprachige WordPress-Seite erstellt.
Wenn Sie einen WooCommerce-Shop haben, haben wir auch eine Anleitung Wie man einen mehrsprachigen WooCommerce-Shop erstellt.
TranslatePress Mehrsprachig
Haben Sie noch Fragen zum mehrsprachigen Website-Design oder zu Best Practices für mehrsprachige Websites? Lassen Sie es uns in den Kommentaren wissen!
Wenn Sie diesen Beitrag hilfreich fanden, schauen Sie sich bitte unsere an YouTube-Kanal, wo wir ständig kurze und leicht verständliche Video-Tutorials hochladen. Sie können uns auch folgen auf Facebook und Twitter um der Erste zu sein, der jedes Mal Bescheid weiß, wenn wir etwas posten.
Danke! Es ist eine informative und dennoch einfache Beschreibung. Als Teil von Contenteam, den Leuten, die Websites lokalisieren, möchte ich hinzufügen, dass sich all die Mühe, die in Übersetzung und Design gesteckt wird, immer bezahlt macht. Und ja, das Problem mit der Sprachanzeige – für mich erscheint es logisch, sie oben in der Ecke zu platzieren. Und stellt sicher, dass sie funktioniert, da es manchmal unmöglich ist, sie aufzuklappen.