Eine mehrsprachige Website entwickeln, die überall funktioniert
Jazmie JamaludinStellen Sie sich vor, Sie haben die perfekte Willkommensnachricht für Ihre Website verfasst. Sie ist herzlich, klar und genau lang genug, um gut unter Ihrem Logo zu sitzen. Dann übersetzen Sie sie in eine andere Sprache, und der gleiche Satz bläht sich um ein Drittel auf, erstreckt sich über eine zweite Zeile und schiebt Ihren Button vom Bildschirm. Plötzlich sieht das Design, das in einer Sprache mühelos wirkte, in einer anderen kaputt aus. Dies ist die stille, faszinierende Herausforderung beim Aufbau einer Website, die Menschen in mehr als einer Sprache begrüßen muss.
Das Design für mehrere Sprachen ist nicht einfach eine Frage der Übersetzung Ihrer Worte durch ein Übersetzungstool und des Besten hoffen. Es betrifft Layout, Typografie, Navigation, Bilder und sogar die Reihenfolge, in der Dinge auf der Seite erscheinen. In diesem Leitfaden gehen wir durch, was es wirklich braucht, um eine mehrsprachige Website zu erstellen, die sich für jeden Besucher, wo auch immer er sich befindet und was auch immer er liest, nativ anfühlt. Sie lernen den Unterschied zwischen zwei ähnlich klingenden, aber nicht identischen Ideen, die Designentscheidungen, die das Erlebnis ausmachen oder zerstören, und die Fehler, die selbst große, gut finanzierte Teams machen.
Zwei Begriffe, die es sich lohnt, zuerst zu entwirren
Es gibt zwei Begriffe, die hier oft verwendet werden und die leicht zu verwechseln sind. Der erste ist Internationalisierung, manchmal als i18n abgekürzt, weil es achtzehn Buchstaben zwischen dem ersten und letzten gibt. Es bedeutet, Ihre Website so zu gestalten, dass sie mehrere Sprachen und Regionen unterstützen kann – die „Infrastruktur“, wenn Sie so wollen. Der zweite ist Lokalisierung oder l10n, was die eigentliche Anpassung von Inhalten, Bildern und Konventionen für ein bestimmtes Publikum ist.
Stellen Sie sich die Internationalisierung vor, als würden Sie Ihr Haus mit Steckdosen ausstatten, die jeden Stecker aufnehmen können, und die Lokalisierung als die Auswahl der richtigen Geräte für die Familie, die dort wohnen wird. Wenn die Infrastruktur von Anfang an stimmt, wird das Hinzufügen jeder neuen Sprache später viel reibungsloser. Wenn Sie es überspringen, wird jede neue Sprache zu einem schmerzhaften nachträglichen Einbau. Diese Fundamentarbeit steht in engem Zusammenhang mit dem breiteren Denken hinter responsivem Webdesign, bei dem Flexibilität von Anfang an eingebaut und nicht nachträglich angefügt wird.
Warum übersetzter Text Layouts sprengt
Die größte Überraschung für Neulinge ist, wie stark sich die Textlänge zwischen den Sprachen ändert. Eine kurze, prägnante Zeile in einer Sprache kann in einer anderen merklich länger werden, und einige Sprachen sind kürzer. Wenn Ihre Buttons, Menüs und Überschriften so bemessen sind, dass sie genau zu einer Sprache passen, werden sie angespannt oder brechen zusammen, sobald Sie eine andere Sprache einfügen.
Gestalten Sie für die längste Version, nicht die kürzeste
Die Lösung ist ein Umdenken: Gestalten Sie flexible Container anstelle von starren Boxen. Buttons sollten anmutig mit ihrem Label wachsen. Menüs sollten umbrechen oder neu anordnen, ohne sich zu überlappen. Überschriften sollten keine feste Zeichenanzahl annehmen. Dies ist derselbe großzügige Einsatz von Leerraum und Freiraum, der jede Website ruhig wirken lässt – es wird einfach unerlässlich, wenn die Textlänge unvorhersehbar ist.
Wenn die Seite selbst die Richtung wechselt
Einige der weltweit am häufigsten gelesenen Sprachen werden von rechts nach links und nicht von links nach rechts geschrieben. Sie zu unterstützen, ist nicht so einfach wie die Wörter zu übersetzen – das gesamte Layout spiegelt sich wider. Ihr Menü wandert auf die andere Seite, Ihre Symbole spiegeln sich, die Leserichtung kehrt sich um, und Elemente, die in eine Richtung zeigten, zeigen jetzt in die andere. Ein Zurück-Pfeil zum Beispiel sollte in die entgegengesetzte Richtung zeigen.
Das klingt beängstigend, aber moderne Web-Tools erledigen vieles davon automatisch, wenn Sie von Anfang an richtig bauen. Der Schlüssel ist, dies frühzeitig zu planen, anstatt mitten im Prozess festzustellen, dass Ihr sorgfältig erstelltes Layout nur in eine Richtung funktioniert. Es ist eine lebhafte Erinnerung daran, dass eine gute Struktur, wie eine solide visuelle Hierarchie, auch gespiegelt überleben muss.
| Element | Was sich ändern kann | Design-Reaktion |
|---|---|---|
| Textlänge | Wächst oder schrumpft deutlich | Flexible Container, keine festen Breiten |
| Richtung | Links-nach-rechts oder Rechts-nach-links | Layout spiegeln, Richtungssymbole drehen |
| Datum & Zahlen | Formate und Trennzeichen unterscheiden sich | Regionale Formatierungsregeln verwenden |
| Bilder | Bedeutung und Eignung variieren | Kulturell spezifische Visuals austauschen |
| Schriftarten | Nicht jede Schriftart deckt jedes Skript ab | Schriftarten mit breiter Abdeckung wählen |
Besuchern beim Sprachwechsel helfen
Sobald Ihre Website mehrere Sprachen spricht, benötigen Besucher eine offensichtliche, würdige Möglichkeit, ihre Sprache auszuwählen. Der Sprachwechsler ist ein kleines Element mit einer überdimensionierten Wirkung, und es ist überraschend einfach, es falsch zu machen.
Sprachen in ihrer eigenen Schreibweise anzeigen
Ein häufiger Fehler ist, alle Sprachen in Ihrer eigenen Sprache aufzulisten. Wenn Ihre Standardsprache beispielsweise Englisch ist, beschriften Sie die anderen nicht auf Englisch – beschriften Sie jede Sprache in ihrer eigenen Schrift, damit ein Leser seine Sprache sofort erkennt. Flaggen sind eine verlockende, aber schlechte Abkürzung, da eine einzelne Flagge selten einer einzelnen Sprache entspricht und viele Sprachen an vielen Orten gesprochen werden. Klartext in der nativen Schrift ist klarer und respektvoller.
Den Sprachwechsler dort platzieren, wo die Leute ihn erwarten
Die Konvention platziert den Sprachwechsler oben auf der Seite, oft in einer Ecke des Headers oder im Footer für den sekundären Zugriff. Wo auch immer Sie ihn platzieren, halten Sie ihn auf jeder Seite konsistent, damit ein Besucher, der tief in Ihre Website gelangt, immer noch die Sprache ändern kann, ohne suchen zu müssen. Diese Vorhersehbarkeit ist Teil einer guten Navigation im Allgemeinen.
Jenseits der Worte: die kulturelle Ebene
Die Übersetzung kümmert sich um die Worte, aber eine wirklich lokalisierte Website geht weiter. Farben haben an verschiedenen Orten unterschiedliche Assoziationen. Ein Bild, das einem Publikum freundlich erscheint, kann einem anderen seltsam oder unpassend vorkommen. Daten, Zeiten, Adressen und Zahlenformate folgen alle lokalen Konventionen. Sogar der Ton Ihrer Schreibe – wie formell oder leger er sein sollte – verschiebt sich von einer Kultur zur nächsten.
Sie müssen nicht alles für jedes Publikum neu gestalten, aber Sie sollten aufmerksam sein, wo eine gedankenlose Standardeinstellung stören könnte. Die Wahl von Bildern, die lokal Anklang finden, gehört zum selben Handwerk wie die Auswahl von Visuals, die eine Website von vornherein professionell aussehen lassen – es fügt lediglich eine kulturelle Dimension hinzu.
Die technische Seite, in einfachen Worten
Man muss kein Entwickler sein, um die wenigen technischen Ideen zu verstehen, die eine mehrsprachige Website gut funktionieren lassen. Am wichtigsten ist es, sowohl Browsern als auch Suchmaschinen mitzuteilen, in welcher Sprache sich jede Seite befindet und welche alternativen Versionen existieren. Dies geschieht mit kleinen, unsichtbaren Codestücken, die wie Wegweiser wirken. Richtig gemacht, stellen sie sicher, dass einem Leser, der in seiner eigenen Sprache sucht, die richtige Version angezeigt wird und nicht eine falsch zugeordnete.
Dies ist für die Auffindbarkeit von enormer Bedeutung. Wenn die Wegweiser korrekt sind, können Suchmaschinen der richtigen Person zuverlässig die richtige Sprache anbieten, was ein Eckpfeiler der internationalen Suchmaschinenoptimierung ist. Wenn sie falsch sind, können Sie am Ende gegen Ihre eigenen übersetzten Seiten konkurrieren oder die falsche Sprache vollständig anzeigen.
Automatische Übersetzung: hilfreich, aber nicht magisch
Die maschinelle Übersetzung hat große Fortschritte gemacht und kann ein nützlicher Ausgangspunkt sein, aber sich allein darauf zu verlassen, ist für alles, was kundenorientiert ist, riskant. Sie kann Nuancen übersehen, Redewendungen falsch übersetzen und gelegentlich etwas Peinliches produzieren. Ein vernünftiger Ansatz ist es, Technologie zur Beschleunigung der Arbeit einzusetzen und einen Menschen, der die Sprache und Kultur kennt, um alles zu überprüfen, was Ihre Marke repräsentiert.
Performance und Seiten nicht vergessen
Das Anbieten mehrerer Sprachen kann Ihrer Website Gewicht verleihen, wenn Sie nicht vorsichtig sind – mehr Bilder, mehr Schriftarten, mehr Variationen. Jede Sprachversion schlank zu halten, schützt Ihre Ladezeiten, was für jeden wichtig ist, aber besonders für Besucher mit langsameren Verbindungen in verschiedenen Teilen der Welt. Die gleiche Disziplin, die hinter einer guten Website-Geschwindigkeit steckt, gilt auch hier, mit der zusätzlichen Schwierigkeit, mehrere Versionen schlank zu halten.
Es zahlt sich auch aus zu entscheiden, welche Seiten tatsächlich übersetzt werden müssen. Nicht jede Seite hat das gleiche Gewicht, und Sie können sich entscheiden, Ihre Kernseiten zuerst zu übersetzen und später zu erweitern. Das Nachdenken über Ihre wesentlichen Seiten hilft Ihnen, den Übersetzungsaufwand dort zu priorisieren, wo er am wichtigsten ist. Wenn der Umfang überwältigend erscheint, kann die Planung der Einführung mit erfahrener Hilfe viel Nacharbeit ersparen – zögern Sie nicht, Kontakt aufzunehmen, um dies zu planen.
Häufig gestellte Fragen
Sollte ich die Sprache eines Besuchers automatisch erkennen?+
Ist maschinelle Übersetzung allein gut genug?+
Brauche ich für jede Sprache eine separate Website?+
Welche Sprachen sollte ich zuerst hinzufügen?+
Referenzen
- W3C. „Internationalization Techniques and Best Practices.“ w3.org.
- Nielsen Norman Group. „Designing for International Users.“ nngroup.com.
- Google. „Managing Multi-Regional and Multilingual Sites.“ developers.google.com.