Mehrsprachige Websites – Leserichtung, Fonts und andere Besonderheiten

Erstellt am: 12.Mai 2016 | Letztes Update: 13.Mai 2016 | von: | Kategorie(n): Content Management, Projektmanagement, SEO

Multilanguage-Websites sind eine große Herausforderung für die tägliche redaktionelle Arbeit in Unternehmen. Ein mehrsprachiges Web-CM-System will gut konfiguriert sein. Dazu muss man einige grundlegende Punkte beachten, die ich hier kurz vorstelle.

Was zunächst simple erscheint, ist ein größeres konzeptionelles Problem – vor allem, wenn man die „Mehrsprachigkeit“ nicht beim Projektstart bereits berücksichtigt hat. Neben Konzept, Workflow und Technik müssen grundsätzliche individuelle Eigenschaften der Sprachen berücksichtigt werden.

Grundsätzliches

In einzelnen muss man folgende Punkte beachten:

  1. Die Leserichtung
  2. Die Fonts
  3. Die Inhalte
  4. Der Sprachschalter
  5. Die Lesbarkeit der Pfade
  6. Das System

Die Leserichtung

man unterscheidet zwischen den beiden Hauptleserichtungen von-link-nach-rechts kurz ltr für englisch left-to-right und umgekehrt von-rechts-nach-links kurz rtl für englisch right-to-left. Durch westliche Einflüsse hat sich die Laufrichtung in den großen asiatischen Sprachen verändert, zumindest in den Online-Medien. China, Korea und Japan benutzen „left-to-right“ anstelle einer bspw. vertikalen Leserichtung. Per Standard interpretieren Browser die Leserichtung durch die Standardeinstellung des Systems/Browsers oder wenn das Element-Attribut dir="ltr" in einem HTML-Dokument vergeben wurde.

Bei semitischen Sprachen wie Arabisch oder Hebräisch muss die Laufrichtung zu rtl verändert werden. Das ist etwas aufwändiger, da alle HTML -Elemente überprüft werden müssen und CSS-Anpassungen vorgenommen werden müssen. Es empfiehlt sich das gesamte Layout an die abweichende Laufrichtung anzupassen. Eine puntktuelle Anpassung ist aber möglich. Bei auschließlich punktueller Anpassung sind Floats und Listen besonders betroffen.

Die Fonts

Bei Verwendung von Webfonts muss auf den Zeichensatz und die im Font zur Verfügung stehenden Schriftschnitte achten. Die Verwendung von Google-Fonts ist unkritisch. Bei anderen Anbietern jedoch lohnt sich ein genauer Blick, denn nicht jeder erhältliche Font ist als Unicode-Font erhältlich, noch sind dort alle Schnitte definiert. Sind die Schnitte nicht definiert werden unschöne nicht lesbare Zeichen angezeigt. Es gibt per Standard in Browsern keine Fallback-Lösung, sodass man das CSS um Font-Styles abhängig von der ausgegebenen Sprache erweitern muss. Helfen kann hier eine Sprache-Basis-Klasse die je nach Sprache im Body-Tag platziert wird.

Die Inhalte

Übersetzungen können heute von den meisten CM-Systemen komfortabel  verwaltet werden. In der Spanne der unterschiedlichen Konzepte ist der direkte Bezug von Ausgangssprache zu Übersetzung, bis zu einer völlig unabhängigen anderssprachigen Seite möglich. In Typo3 reicht die Umsetzung bis in die Versionierung hinein. Typo3 bietet eine gute Übersicht und Kontrollmöglichkeit für Inhalte, Seitenbezeichnungen und Pfade. Auch WordPress hat in den letzten Jahren nachgelegt. So kann dort mit einem Plugin ein Bezug zu anderssprachigen Versionen einer Seite hergestellt werden. Ein Beispiel für ein Multi-Language-Konzept kann man auf dieser Seite nachlesen.

Innerhalb gewöhnlicher Inhalte muss folgendes beachtet werden:

  • Je nach Land sind unterschiedliche Datumsformate üblich (24.12. vs. 12/24)
  • Manchmal unterscheiden sich Einheiten (von °C/°F über cm/inch bis hin zu Schuhgrößen)
  • Währungsangaben sind nicht für alle Besucher sinnvoll
  • Lieferzeiten, Versandkosten, Zahlungsarten können sich unterscheiden
  • Begriffe haben teilweise deutlich unterschiedliche Längen, vgl. deutsch Suche mit französisch Recherche innerhalb der Navigation
  • deutsche Texte haben meist deutlich mehr Buchstaben haben als die übersetzten Gegenstücke. Die englische Übersetzung kommt normalerweise mit etwa 75 Prozent Platz aus, spanische und französische Texte brauchen um die 90 Prozent. Daher passen die übersetzten Texte meist gut in unsere Gestaltungsraster.

Siehe auch Informationen dazu bei Google https://support.google.com/webmasters/answer/182192?hl=de&ref_topic=2370587

Zu den Inhalten gehören auch die verschiedenen Plugins und Extensions mit Front-End, die zu großem Teil, zumindest teilweise übersetzt, ausgeliefert werden. Ggf kann man dort eigene Templates anlegen oder per Textdomain (WordPress) übersetzen.

Man könnte zusätzlich überlegen die Error 404-Seiten entsprechend zu übersetzen, um für missglückte Aufrufe auf Landessprache angepasste Meldungen auszugeben.

Der Sprachschalter

Die Flagge ist das typische Piktogramm für die Sprachauswahl. Wirklich passend jedoch ist eine Flagge keineswegs. Sprachen werden in meist in mehreren Ländern gesprochen oder es gibt Länder, in denen mehrere Sprachen gesprochen werden.

Wenn es also ein Symbol sein muss, dann ist die Weltkugel oder eine neutrale Flagge besser geeignet, um den Sprach-Button zu kennzeichnen. Ich möchte empfehlen einen Text neben den Schalter in der jeweiligen Sprache als Text-Link zu verwenden. Also z.B. nicht „Englisch“, sondern „English“ und bei Pulldowns nicht „Sprache wählen“, sondern die derzeitige Sprache ergänzt durch das Symbol. Durch das Symbol wir klar, was dort aufgerufen werden kann. Dem Sprachumschalter widme ich mich unter Usability-Aspekten in einem zukünftigen Beitrag.

Die Lesbarkeit der Pfade

Die Pfade werden wegen technischer Limitierungen nicht in Koreanisch übersetzt, es werden die deutschen Titel (default) verwendet  (mit entsprechenden Präfix), oder… man kann bei der Pflege der Seiten überlegen, jeder Seite einen vom deutschen abweichenden Titel zu vergeben, siehe mein Link unten. Das erhöht den Pflegeaufwand etwas, ist aber bei Verwendung von englischen Pfadbezeichnungen internationaler. Auch SEO-Überlegungen sollten sich hier niederschlagen.

Man kann prinzipiell Pfade URL-Codiert direkt vom Seitentitel ausgeben, dadurch sind sie aber in asiatischen Sprachen nicht mehr lesbar. In Typo3 ist Konvertierung der Pfade mit RealURL möglich, festgestellt habe ich die automatisch Konvertierung aber für die deutschen Umlaute und die kyrillischen Zeichen. RealURL konvertiert nicht nach URL-Encoding-Tabelle sondern sinngemäß. Aus ä wird ae aus ф wird F.

Das System

Auf meiner Corporate-Website nutze ich neben den Sprachen Deutsch (default), Englisch und Französisch auch nicht lateinisch buchstabierbare Sprachen wie Russisch, Chinesisch und Japanisch in einer Typo3-Umgebung. Die letzteren drei Sprachen können in der Datenbank nicht mit dem normalen ISO-8859-Zeichensatz gespeichert werden. Deswegen ist es unbedingt erforderlich, das System auf den internationalen Unicode-Zeichensatz UTF-8 umzustellen. In aktuellen Systemen wird UTF-8 per Standard eingesetzt. Für die Umstellung gibt es Point-and-Click-Tools und zahlreiche Anleitungen, z.B. zur Konvertierung der Datenbank und der Datensätze, die ich hier nicht wiederholen möchte. Eine Konvertierung geht nicht ganz ohne Fallstricke vonstatten.

Grundsätzliches: wirklich international ist nur der Unicode-Zeichensatz, eingeführt 1991, Latin beschränkt sich je nach Tabelle auf Deutschland und die europäischen Nachbarländer mit 15 verschiedenen Zeichenkodierungen zur Abdeckung aller europäischen Sprachen sowie arabisch, hebräisch, thailändisch und türkisch (1986).

Die Konfiguration muss in Typo3 entsprechend ergänzt werden, das hinzufügen der Sprach-Records ist ja kein Problem, jedoch muss die Konfiguration um die entsprechenden Locales erweitert werden. Einmal erweitert, kann man fortan die Nutzung terminieren.

Man kann das Typo3-Backend auch auf diese Sprachen aufrüsten, aber mglw. nicht durchweg. Praktisch ist das evtl. für Übersetzer.

Fazit

Welche Erfahrungen haben Sie? Wie kommen die Nutzer mit der Sprachwahl auf Ihrer oder anderen Sites klar – oder eben nicht?

Nach oben

Diese Beiträge könnten Sie ebenfalls interessieren

Beiträge aus der gleichen Kategorie

Über den Autor

Hier schreibt Ingo Förster, UX-Professional und -Stratege über User Experience-Design. User-Interface-Design, Web-Design & Programmierung, manchmal auch über Online-Marketing und alles was zum täglichen Brot eines UXlers gehört.

Ingo hat durch seine selbständige Tätigkeit viel Erfahrung in zwei Hauptbereichen sammeln können. Zum einen in im weiteren Sinne Interaction Design mit allen Disziplinen, angefangen mit Grafischer Gestaltung für Web, Programmierung von Internet-Auftritten mit Typo3, Wordpress oder Magento eCommerce und Usability-Konzepten für Touch-Bedienung. Randbereiche wie SEO und Online-Marketing wurden regelmäßig bearbeitet.

Ingo interessiert sich für Webtechnologien, Touch-UIDs und erleichterte Bedienverhältnisse in Software. Ingo ist im Bereich Multimedia lehrend tätig gewesen.