Share
Durch das Angebot von Inhalten in mehreren Sprachen kann das Webdesign um viele neue Komplexitätsstufen erweitert werden. Artikel zu übersetzen ist nur die erste Hürde; Die Strukturierung einer mehrsprachigen Website kann ziemlich schwierig sein. Um Ihnen zu helfen, es richtig zu machen, werde ich ein paar Tipps geben und einige unserer Erfahrungen bei Tuts + teilen, um mehrsprachig zu sein.
Der erste Tipp hat nichts mit Webdesign zu tun, ist aber dennoch wichtig. Wenn Sie Inhalte in mehreren Sprachen anbieten, sollten Sie sich nicht auf Übersetzungssoftware verlassen. Verstehen Sie mich nicht falsch, Tools wie Google Translate sind einfach zu bedienen und verbessern sich ständig, aber die Genauigkeit des übersetzten Textes ist unterschiedlich (bei Tuts + haben wir dies manchmal sogar versaut!)
Initiativen wie die Google Translate Community verfeinern die Art und Weise, wie Übersetzungen gemacht werdenAus diesem Grund ist es eine gute Idee, einen menschlichen Übersetzer zu bekommen. Entscheiden Sie sich für einen kostenpflichtigen Service wie Fliplingo oder verwenden Sie (abhängig von Ihrem Projekt) Community-basierte Übersetzungsplattformen wie Native. Der Mensch kennt das lokale Vokabular und die subtilen Nuancen der Sprache besser. Zum Zeitpunkt des Schreibens hat automatisierte Software diesen Punkt noch nicht erreicht.
Bei Tuts + möchten wir uns bei unseren Lesern für die Übersetzung unserer Tutorials bedanken.
Eine mehrsprachige Website ist ohne die Möglichkeit, die Sprache zu wechseln, unbrauchbar. Oft finden Sie mehrsprachige Websites mit einer Dropdown-Liste, die sich rechts oben auf der Seite befindet (für Links-nach-Rechts-Inhalte ist die obere linke Ecke besser geeignet). Möglicherweise finden Sie auch Umschalter in der Fußzeile (der von IBM.com gewählte Ansatz). Unabhängig davon, für welches Muster Sie sich entscheiden, stellen Sie sicher, dass das Dropdown-Menü leicht zu sehen und zugänglich ist.
Bei Tuts + verwenden wir a wählen Element innerhalb der Post-Meta-Details sowie eine Liste in der Seitenleiste, um sicherzustellen, dass die Basen abgedeckt sind:
Wenn Sie sich für ein select-Element entscheiden, empfiehlt das W3C hilfreiche Richtlinien.
Flaggen werden sehr oft verwendet, um eine Sprache anzuzeigen. Ich stimme jedoch mit Gunnar Bittersmann darin überein, dass ich kein großer Fan von Sprachumschaltern bin. Betrachten Sie die folgenden Gründe:
Zum Beispiel:
https://www.duolingo.comDuolingo verteidigt die Verwendung der brasilianischen Flagge, weil sie brasilianisches Portugiesisch unterrichten. Ihre spanische Variante ist jedoch eher lateinamerikanisches Spanisch als Castellano (traditionelles Spanisch), daher ist die Verwendung von Flaggen hier inkonsistent und verwirrend.
Es ist am besten, sich auf eine Sprache in ihrer eigenen Sprache zu beziehen, z. B. "Deutsch" anstelle von "Deutsch". Auch die alphabetische Bestellung von Sprachen hilft, so dass Benutzer leicht die richtige Version finden können. Schauen Sie sich die Seitenleiste von Wikipedia an, um sich zu inspirieren.
Bestimmte Websites leiten Benutzer auf die Startseite um, wenn sie die Sprache wechseln. Dies kann verwirrend sein, da Benutzer die Seite erneut finden müssen. Um Ihre Besucher glücklich zu machen, stellen Sie nach Möglichkeit sicher, dass ihnen beim Wechseln der Sprache dieselbe (übersetzte) Seite angezeigt wird.
Möchten Sie eine Standardsprache für Erstbesucher festlegen? Es ist möglich, die Sprache des Benutzers zu erkennen und die Seite automatisch in der bevorzugten Sprache des Benutzers anzuzeigen. Verbergen Sie jedoch nicht die anderen Optionen, falls der Benutzer wechseln möchte.
Lesen Sie mehr über das Smashing Magazine: Sollten Sie den Benutzer oder seinen Browser fragen?
Ihr Inhalt muss lesbar sein. Stellen Sie daher sicher, dass die Zeichenkodierung im Kopf der Seite richtig eingestellt ist:
Aus dem W3C:
"Eine Unicode-basierte Kodierung wie UTF-8 unterstützt viele Sprachen und kann Seiten und Formulare in beliebigen Kombinationen dieser Sprachen aufnehmen."
Berücksichtigen Sie dann die tatsächlichen Schriftarten: Ihre Webschriftart muss mit allen von Ihnen unterstützten Sprachen kompatibel sein, insbesondere für nicht auf Latein basierende Sprachen. Dies bedeutet, dass die verwendete Schriftart alle Zeichen und Glyphen enthalten muss, die Sie normalerweise benötigen. Einige Sprachen umfassen Hunderte von Zeichen, wodurch die Schriftdateien selbst sehr schwer werden. Überlegen Sie sich daher, die in den Dateien enthaltenen Zeichengruppen zu verfeinern.
Es gibt mehrere Websites, die nicht lateinische Zeichensätze anbieten, z. B. typebank.co.jp. Eine schnelle Google-Suche hilft Ihnen dabei, weitere Alternativen zu finden.
https://www.typebank.co.jpEs gibt auch andere typografische Überlegungen. Vergessen Sie nicht, dass bestimmte Sprachen „wortwörtlicher“ sind und daher mehr Platz benötigen. Ein Button "zum Warenkorb hinzufügen" könnte auf Niederländisch in "aan winkelwagen toevoegen" übersetzt werden. Die englische Version besteht aus 11 Zeichen, die niederländische Version 25, die doppelt so viel Platz beansprucht. Wenn der Platz knapp ist, können Sie eine andere, weniger wörtliche Übersetzung ausprobieren oder die Schriftgröße je nach Sprache ändern.
Andere nicht-lateinische Schriftarten benötigen möglicherweise eine andere Zeilenhöhe oder Zeichengröße als Ihre lateinische Standardeinstellung. Chinesische Schriftzeichen sind zum Beispiel visuell komplexer als lateinische Schriftzeichen, dh sie müssen groß genug sein, um klar zu unterscheiden. Diese Faktoren können das Erscheinungsbild der Seite erheblich verändern. Denken Sie also daran.
Hier ist etwas, das Sie möglicherweise nicht kennen: Sprachen haben keine Richtung, aber die Skript sie sind in do geschrieben. Zum Beispiel kann Azeri (von den Aserbaidschanern gesprochen) mit lateinischen oder kyrillischen Skripten geschrieben werden. In diesem Fall wird LTR (von links nach rechts) geschrieben. Alternativ kann es in arabischer Schrift geschrieben werden. In diesem Fall wird RTL (von rechts nach links) geschrieben..
Die meisten Sprachen verwenden Skripts, die von links nach rechts geschrieben und gelesen werden. Ist dies nicht der Fall, ist es hilfreich, das Layout der gesamten Webseite zu spiegeln. Ja, das gesamte Layout. Text, Bilder, Navigation, Seitenleisten, Schaltflächen, Dropdown-Listen, Bildlaufleisten usw. sollten alle gespiegelt sein.
Tom Maslen erklärt, wie das BBC-Team Sass verwendet, um sie bei bidirektionalen Layouts zu unterstützen:
Geben Sie für den Inhalt die Richtung des Textes über die an dir = "rtl" Attribut. Dieses Attribut wird von allen gängigen Browsern unterstützt. Hier ist ein HTML-Beispiel:
Oder verwenden Sie CSS:
.Inhalt Richtung: RTL; /* Rechts nach links */
Ein Problem, dem wir bei Tuts + begegnet sind, war das Einbetten von Inline-Code-Snippets innerhalb RTL-Text (z. B. in arabischer, farsischer und hebräischer Übersetzung). Der Text liest RTL, der Inline-Code muss jedoch LTR bleiben. In diesem Beispiel muss der Inline-Code immer gelesen werden HTML, Körper Breite: 100%; :
Nach dem englischen Original sehen Sie im zweiten Beispiel, was mit dem Inline-Code passiert. In Beispiel 3 wird versucht, dies zu überschreiben, indem Folgendes angegeben wird:
.arabischer Code Richtung: Ltr;
Aber wie Sie sehen, hat es wenig bis keine Wirkung. Dies ist, wo die Unicode-Bidi Eigenschaft kommt rein. Gepaart mit der einbetten Dies hilft uns dabei, die berechnete Richtung des Browsers für eingebettete Elemente zu überschreiben. Beispiel 4 zeigt, dass dies funktioniert hat:
.arabischer Code Richtung: Ltr; Unicode-Bidi: Einbettung;
Es gibt mehrere Möglichkeiten, die URLs mehrsprachiger Websites zu strukturieren. Jede Option hat Vor- und Nachteile.
Eine Ländercode-Top-Level-Domain (ccTLD) ist mit einem bestimmten Land verbunden, z. B. .fr für Frankreich und .es für Spanien.
ccTLDs sind ein klares Signal für Suchmaschinen, dass eine Website Nutzer in diesem Land anspricht. Der Serverstandort ist irrelevant und Websites können leicht getrennt werden. Die größten Nachteile sind die Verfügbarkeit von Domains und die zusätzlichen Kosten.
Bestimmte Domain-Erweiterungen sind nicht an ein Land oder eine Region gebunden. Die beliebteste ist .com, aber es gibt auch andere häufig verwendete generische Top-Level-Domains wie .net und .org.
Diese gTLDs können in Kombination mit einer Subdomain verwendet werden, z. B. fr.website.com. Es ist einfach einzurichten und die meisten Suchmaschinen verstehen diese Art von Geotargeting. Benutzer erkennen jedoch möglicherweise nicht immer die Sprache des Inhalts anhand der URL.
Unterverzeichnisse sind das Gegenstück der Subdomains. Sie werden häufig zur Strukturierung von Inhalten verwendet (z. B. website.com/blog oder website.com/tshirts), können jedoch auch für Geotargeting-Zwecke verwendet werden. In diesem Fall verwenden wir website.com/fr, um unsere URLs zu strukturieren.
Mit dieser Technik kann alles auf demselben Server gehostet werden. Die Einrichtung ist sehr einfach und Sie können die Google Search Console verwenden, um die verschiedenen Sprachen zu ermitteln. Ein Nachteil besteht darin, dass Benutzer das Geotargeting möglicherweise nicht nur an der URL erkennen (z. B. webshop.com/de/ auf Deutsch oder nicht?).
Schließlich gibt es URL-Parameter, zum Beispiel website.com?country=it. URL-Parameter werden nicht empfohlen, da sie für Suchmaschinen schwer zu interpretieren sind.
Ich persönlich benutze gerne Unterverzeichnisse in Kombination mit einer gTLD. Subdomains werden meistens dazu verwendet, Inhalte zu trennen, die völlig unterschiedlich sind. Da mehrsprachige Websites im Wesentlichen Übersetzungen desselben Inhalts sind (meistens), sind Unterverzeichnisse eine naheliegende Lösung.
Sie können die Sprache in der URL verwenden, zum Beispiel:
Oder kombinieren Sie Sprache und Ort:
Um doppelte Inhaltsprobleme zu vermeiden, empfiehlt es sich, für jede Sprache / jeden Ort eine bevorzugte Version anzugeben. Wir können dazu ein einfaches HTML-Link-Element verwenden rel = "alternate" hreflang = "x". Mehrere Hreflang Tags sollten auf einer Seite verwendet werden. eine, die auf sich selbst verweist und einen Link zu jeder Alternative.
Auf einer Webseite könnte der Code folgendermaßen aussehen:
Dieser Code teilt den Suchmaschinen mit, dass example.com sich an englische Sprecher in Großbritannien richtet. Es heißt auch, dass es zwei Variationen desselben Inhalts gibt, nämlich eine für die USA und eine für Australien.
Beim Entwerfen mehrsprachiger Websites müssen Sie Folgendes beachten:
Nicht jedes Land verwendet das gleiche Datumsformat. Manchmal müssen Sie Datumsangaben aus dem gregorianischen Kalender in beispielsweise den persischen Kalender konvertieren.
Länder haben unterschiedliche ethische Ansichten. Es gibt eine kulturspezifische Natur von Sexualität, Humor, Symbolik usw., die bei der Übersetzung einer Website leicht übersehen wird. Zum Beispiel: In bestimmten Ländern ist es durchaus akzeptabel, ein Foto eines schwulen Paares zu zeigen, während andere Länder dies als anstößig empfinden könnten.
Verwenden Sie ein Captcha auf Ihrer Website? Stellen Sie sicher, dass es in derselben Sprache wie der Seiteninhalt ist. Als britischer Besucher ist es unwahrscheinlich, dass Sie ein russisches Captcha lösen möchten.
Weil sie nicht schon schwer genug sind… Helfen Sie Ihren Besuchern mit Telefonnummern auf Ihrer Website, indem Sie die Landesvorwahl angeben. Auf dieser Seite finden Sie eine Liste aller Ländercodes.
Es gibt viele weitere Überlegungen, wenn Sie eine Website für die vollständige Internationalisierung vorbereiten, aber diese Hinweise sollten Ihnen eine gute Basis für die Arbeit geben. Teilen Sie uns in den Kommentaren mit, welche weiteren Tipps Sie für mehrsprachiges Webdesign haben, und melden Sie sich für den Newsletter des Tuts + Translation Project an, wenn Sie wissen möchten, was wir vorhaben!
Accentsconagua