Internationalize Your Website

Angelika Zerbe

20.1.2020

Bei einer Website sind wir es gewohnt diese auf englisch oder deutsch anzusehen, demnach sind wir es gewohnt, dass Euro die ausgewählte Währung ist, das Deutschland das Zentrum einer Weltkarte ist oder auch, dass auf Fotos Europäer abgebildet sind. Nicht jeder sieht die Seite so. Ein Japaner sieht beispielsweise eine leicht veränderte Website.

‍

Auf der Website von Slack werden die Beispielscreenshots der Software angepasst an das entsprechende Land.

‍

Weder der Deutsche noch der Japaner weiß, dass es die Webseite des jeweils anderen gibt. Allerdings muss das Projekt-Team wissen, dass es beide Sprachen geben wird. Zusätzlich zu Spanisch, Italienisch und Russisch. Warum?

Schon in der Konzept- und Designphase sollten wir verschiedene Dinge, wie Textlängen berücksichtigen. Einige Punkte, die beachtet werden sollten, habe ich hier zusammengetragen.

‍

1. Lokale Einstellungen

Verschiedene Punkte sind relevant: Adresse, Telefonnummer, Währung, Maße, Nummern, Zeit, Datum und Sortierung/Filter. Lokale Einstellungen soll das gewählte CMS bestenfalls übernehmen können. Im folgenden Bild ist ein Beispiel für ein Formular zu sehen. Wir sehen, für Kanada erscheint ein weiteres Input Feld. In diesem kann der Nutzer die Provinz eingeben. Ein Deutscher kann mit diesem Feld nichts anfangen. Demnach braucht man es ihm nicht anzubieten.

‍

‍

2. Schriftzeichen

Gibt es die verwendete Schrift überhaupt in Kyrillisch? Einige Schriften, wie die bekannte Helvetica gibt es für mehrere Sprachen. Wenn nicht muss eventuell auf eine andere Schrift zurückgegriffen werden. Die nächste Frage ist, woran erkennt der Website-Tester, ob die richtigen Schriftzeichen geladen sind? Betrachte das Beispiel von Wikipedia. Könntest du feststellen, ob ein Zeichen falsch geladen ist?

‍

‍

Einige Schriften haben mehrere Alphabete, wie zum Beispiel das Japanische. Was muss hier geladen werden? Auch hier kommen wir nicht mit dem Google Translator alleine durch, sondern brauchen einen professionellen Übersetzer.

‍

3. Übersetzung

Wichtig ist es, dass Texte aus dem Code extrahierbar sind und somit nicht hartkodiert werden. Am besten werden die Worte früh in Dictionaries oder in einer anderen ausgelagerten Datei abgelegt. Vorsicht ist auch bei Audio, Video und Bildern auf einer Website geboten. Die Kollaborationssoftware Slack hat auf ihrer Website ein Bild. Betrachtet man es genauer, so sieht man, dass es kein Bild in einem Bildformat, wie .png ist. Stattdessen ist es programmiert. Dadurch können Elemente des „Bildes“ schnell ausgetauscht werden ohne, dass eine Bilddatei gesucht, geändert und abgespeichert werden muss.

‍

‍

4. Sprache

Ein Text, der in einer Sprache gut im Layout funktioniert, muss nicht in allen anderen Sprachen gut aussehen. Flickr benutzt im englischen das kurze Wort ‚Views‘. In der Italienischen heißt das übersetzt ‚visualizzazioni‘, dadurch wird der Text auf der Karte zweizeilig.

‍

‍

Grundsätzlich kann ein englisches Wort zwischen ein und zehn Buchstaben im spanischen oder italienischen dreimal so lang werden. Bei längeren Texten ist die Erweiterung weniger klein, ein Spanischer Text kann allerdings immer noch bis zu 40% länger werden. Gegenteilig ist es im chinesischen, dort werden die Texte bis zu 70% kürzer.

Wie kann ich das früh im Design herausfinden? Es gibt für Sketch Plug-ins, die eine Pseudolokalisierung durchführen. Das bedeutet ein Text wird um eine bestimmte Prozentzahl mit unsinnigen Buchstaben erweitert. Dadurch sehen wir direkt, ob das Layout noch funktionieren würde.

‍

5. Layout

Nicht nur die Länge der Wörter muss beachtet werden, auch Textumbrüche bei langen zusammengesetzten Wörtern kann Probleme mit sich bringen. Da führen warscheinlch wir Deutschen mit Wörtern wie ‚Oberdonaudampfschiffahrtsgesellschaftskapitän‘. Bei einigen Schriftzeichen muss man hingegen auf breitere oder höhere Schriftzeichen achten. Im folgenden Beispiel sieht man, dass die thailändischen Schriftzeichen sehr hoch sind:

Englisch: „A long text in two lines on the website.“
Thai: „ข้อความยสู่วสองบรรทัดในเว็บไซต์นื้อหา.“

‍

War das schon alles?

Jetzt bin ich vor allem auf Sprache eingegangen. Das ist aber nicht alles. Auch politische, religiöse und andere Aspekte eines anderen kulturelle Landes müssen bedacht werden. Nur um ein Beispiel zu nennen: Microsoft hatte in Windows 95 eine Weltkarte gezeigt. Diese hat auf acht Pixeln das Kashmir Territorium gezeigt. Der Fehler war, dass dieses als Nicht-Indien markiert war, woraufhin das Betriebssystem zunächst indiziert worden ist.

Natürlich gibt es auch viele erfolgreiche Beispiele, sei es Slack mit fünf Sprachen, facebook mit 49 Sprachen, Google mit 149 Sprachen oder naja die Zeugen Jehovas mit über 1000 Sprachen.

Nachdem wir in der Coeno im Rahmen eines Teamtags über Internationalisierung geredet haben, fanden wir vor allem spannend, was die Zukunft bringen wird. Werden die Übersetzungsprogramme so gut, dass man keine Sprachen lernen mehr muss oder geht es doch eher in die Richtung einfach alles in englisch zu gestalten?

Zu guter Letzt ein passendes Zitat:

The world is diverse. So if we’re not thinking about diversity, then we’re not thinking about people. If we’re not thinking about people then we’re not designers, we’re makers of stuff.

Jason Mayden (Designer, Accel Partners)

‍