Tipps zum mehrsprachigen Website-Design mit ConveyThis

Zahlreiche Websites verfügen mittlerweile über viele Sprachoptionen, sodass ihre Besucher aus der ganzen Welt bequem surfen können. Das Internet hat dazu beigetragen, den Marktplatz zu einem globalen Erlebnis zu machen. Mit einer Website haben Sie die Türen zu Ihrem Unternehmen für alle geöffnet, die über eine Internetverbindung verfügen. Wenn sie die Sprache jedoch nicht verstehen, bleiben sie nicht. Eine mehrsprachige Website ist ganz einfach.

Glücklicherweise ist es ziemlich einfach, Ihre Website mehrsprachig zu machen. ConveyThis kann in wenigen Minuten eine übersetzte Version Ihrer Site erstellen und dann das Erscheinungsbild und die Platzierung Ihres Sprachumschalters anpassen, einige Layoutänderungen vornehmen, um wortreichere oder von rechts nach links geschriebene Sprachen zu berücksichtigen, und Farben und Bilder in den Fällen ändern, in denen die Originale für die Zielkultur ungeeignet sind.

Der Prozess ist nicht vollständig automatisiert, Sie müssen vorher einige Recherchen durchführen. In diesem Leitfaden werden einige Aspekte des Website-Designs erläutert, damit Sie bequem in die Welt mehrsprachiger Websites und großartigem Design einsteigen können.

Konsistentes Branding

Die Benutzererfahrung muss unabhängig von der besuchten Sprachversion konsistent sein. Das Erscheinungsbild sollte in allen Versionen sehr ähnlich sein. Aufgrund von Sprach- oder Kulturunterschieden können einige Unterschiede erforderlich sein. Wenn Sie jedoch zwischen den Sprachen wechseln, sollten Sie nicht das Gefühl haben, auf eine völlig andere Website weitergeleitet worden zu sein.

Daher sollten Designelemente wie das Layout und der besondere Markenstil Ihres Unternehmens in allen Sprachen gleich bleiben.

This is super easy to do in WordPress with ConveyThis, that perfectly identifies text regardless of the theme you have chosen (even if it’s customized!) and automatically translates it, even if you are working with other plugins.

Dadurch erhalten Sie eine globale Vorlage mit dem gleichen Thema für alle Sprachen und somit die gleiche Benutzererfahrung.

Die Homepage von Airbnb funktioniert als Beispiel hervorragend, schauen wir uns die australische Version an:

Und hier ist die japanische Version:

Zweifellos ist dies dieselbe Website. Der Hintergrund ist derselbe, ebenso die Suchfunktion. Ein einheitliches Design unterstützt Ihre Markenidentität und spart Zeit und Aufwand beim Hinzufügen neuer Sprachen oder bei Aktualisierungen.

Klare Sprachumschalter

Wählen Sie einen prominenten Ort für den Sprachumschalter, beispielsweise eine der vier Ecken Ihrer Website, und platzieren Sie ihn auf jeder Seite, nicht nur auf der Startseite. Es muss leicht zu finden sein, niemand möchte jemals nach einem versteckten Knopf suchen.

Es wird dringend empfohlen, dass die Sprachnamen in ihrer eigenen Sprache angegeben werden. „Español“ statt „Spanisch“ zum Beispiel wird Wunder bewirken. Asana macht dies, ihre Website verfügt über ein Dropdown-Feld mit den verfügbaren Sprachoptionen.

Auf diese Weise fühlen sich Besucher willkommen. Wenn Ihre Website übersetzt ist, sollte dies in der Sprachenliste widergespiegelt werden. Das Lesen von „Deutsch, Französisch, Japanisch“ auf einer englischsprachigen Website erleichtert die Navigation nicht und es entsteht der Eindruck, dass die englische Version die wichtigste ist.

‘Languages’ is better than ‘Regions’

Bei vielen großen internationalen Marken müssen Sie die Region wechseln, um die Website in Ihrer Sprache lesen zu können. Das ist eine schreckliche Idee, die das Surfen für Besucher erschwert. Diese Websites gehen davon aus, dass Sie in der Region surfen, in der die Sprache gesprochen wird. Sie erhalten also den Text in Ihrer Sprache, aber möglicherweise nicht den Inhalt für die Region, an der Sie interessiert sind.

Das folgende Bild stammt von der Adobe-Website:

Sprachen sollten nicht untrennbar mit ihren Regionen verbunden sein. Nehmen Sie zum Beispiel all die kosmopolitischen Städte wie New York, London und Paris. Vielleicht möchte ein im Vereinigten Königreich lebender Belgier auf der britischen Website einkaufen, aber auf Französisch stöbern. Sie müssen sich entscheiden, ob sie auf der belgischen Website in ihrer Sprache oder auf der britischen Website auf Englisch kaufen möchten, und wollen keines von beiden tun. Sie haben also versehentlich eine Barriere geschaffen. Werfen wir einen Blick auf eine Website, auf der Sie Sprache und Region separat angeben können: die Uber-Website.

Das ist ausgezeichnetes Design. In diesem Fall wurde die Option zur Sprachumschaltung in der Fußzeile links platziert und Sie haben aufgrund der zahlreichen Optionen anstelle einer Dropdown-Box ein Modal. Die Sprachnamen werden auch in ihrer eigenen Sprache bezeichnet.

Als Bonus können Sie sich „merken“, welche Sprache der Benutzer gewählt hat, sodass er vom ersten Besuch an nicht mehr wechseln muss.

Standort automatisch erkennen

Diese Funktion ist äußerst nützlich, damit Ihre Besucher nicht in der falschen Sprache darauf zugreifen. Und um dem Benutzer Zeit zu sparen, damit er nicht nach dem Sprachumschalter suchen muss. So funktioniert es: Die Website erkennt die Sprache, in der sich der Browser befindet, oder ihren Standort.

Seien Sie jedoch vorsichtig, wenn der Benutzer ein Tourist ist und die Landessprache nicht beherrscht, da er die Sprachtaste benötigt, um wechseln zu können. Aus diesem Grund ist das Tool nicht immer genau.

Wählen Sie beim Entwerfen Ihrer mehrsprachigen Website nicht zwischen der automatischen Spracherkennung und dem Sprachumschalter. Letzterer ist obligatorisch, während ersterer optional ist.

Flags sind kein geeigneter Ersatz für einen Sprachnamen

Es gibt 21 spanischsprachige Länder und 18 englischsprachige Länder, und in China gibt es 8 Hauptdialekte, daher sind Flaggen kein guter Ersatz für Sprachnamen. Darüber hinaus sind Flaggen möglicherweise keine nützlichen Indikatoren, da sie diejenigen verwirren könnten, die sie nicht erkennen.

Seien Sie flexibel mit dem Textraum

Das kann eine Herausforderung sein, aber es lässt sich nicht leugnen, dass Übersetzungen nicht den gleichen Platz einnehmen wie der Originaltext, einige können kürzer sein, andere länger, manche benötigen möglicherweise sogar mehr vertikalen Platz!

Chinese characters contain lots of information so not much space is needed, while Italian and Greek are wordier and need twice as many lines. A good rule of thumb is to assume that some translations may require more than 30% extra space so be flexible with the layout and assign ample spaces for text. Those tight squeezes in the original website may not have enough space at all for the translation, English is a particularly compact language, and if you find the need to abbreviate in English so the content will fit, you’ll definitely encounter some trouble when it’s time to translate.

Neben dem Spielraum für die Textdehnung ist es auch eine gute Idee, adaptive UI-Elemente zu haben, damit Schaltflächen und Eingabefelder ebenfalls wachsen können. Sie können auch die Schriftgröße verringern, aber nicht zu sehr.

Die Flickr-Website ist mehrsprachig. Werfen wir einen Blick auf die ursprüngliche Schaltfläche „Ansichten“:

Es sieht fantastisch aus, alles ist großartig, aber „Ansichten“ erweist sich in anderen Sprachen als längeres Wort, das mehr Platz benötigt.

Auf Italienisch benötigt es dreimal so viel Platz!

Viele nicht-lateinische Schriften, wie zum Beispiel Arabisch, erfordern eine größere Höhe, damit die Übersetzung passt. Zusammenfassend lässt sich sagen, dass das Layout Ihrer Website flexibel genug sein sollte, um sich an unterschiedliche Sprachanforderungen anzupassen, damit bei der Umstellung das elegante Erscheinungsbild des Originals nicht verloren geht.

Web-Font-Kompatibilität und Website-Kodierung

According to the W3C it’s highly recommended that you encode your webpage using UTF-8, which allows for special characters.

Es ist ziemlich einfach, die UTF-Deklaration sieht so aus

Also make sure that the fonts are compatible with the different languages, otherwise the text may end up looking illegible. Basically, before deciding on any font, check its compatibility with all the scripts you need. If you want to enter the Russian market, check that the Cyrillic script is supported.

Das folgende Bild wurde von Google Fonts übernommen. Wie Sie sehen, können Sie die von Ihnen benötigten Skriptversionen herunterladen. Sprachen mit größeren Zeichenmengen führen zu größeren Schriftdateien. Berücksichtigen Sie dies also bei der Auswahl und Mischung von Schriftarten.

In Bezug auf Sprachen von rechts nach links

Da der Markt im Nahen Osten wächst, können Sie erwägen, eine Version Ihrer Website zu erstellen, die Besucher aus dieser Region anzieht. Das bedeutet, dass Sie das Layout so anpassen müssen, dass es mit deren Sprache kompatibel ist. Ein charakteristisches Merkmal der meisten Sprachen des Nahen Ostens ist, dass sie von rechts nach links gelesen werden! Das ist eine große Herausforderung und die Lösung beginnt mit der Spiegelung der Schnittstelle.

Dies ist das Design von Facebook für Sprachen, die von links nach rechts verlaufen, beispielsweise Englisch.

Und dies ist das umgedrehte Design für Sprachen, die von rechts nach links verlaufen, beispielsweise Arabisch.

Schauen Sie genau hin, die Platzierung aller Elemente im Design wurde gespiegelt.

Check out Robert Dodis’ article on design for Right to Left languages for further information on how to do this.

Some Right To Left languages are Arabic, Hebrew, Persian and Urdu and ConveyThis has no trouble adapting your website to accommodate for their language requirements and ensure a great user experience. And the best thing is you can customize the look of each language and make changes to the type of font or its size, and if necessary, edit the line height.

Wählen Sie geeignete Symbole und Bilder

Visuelle Elemente haben eine sehr starke kulturelle Komponente und sind Schlüsselelemente für das richtige Website-Design. Jede Kultur weist unterschiedlichen Bildern und Symbolen eine Bedeutung zu, einige Interpretationen sind positiv und andere das komplette Gegenteil. Manche Bilder spiegeln die Erfahrungen mit den Idealen einer Kultur wider, in einem anderen Kontext werden sie jedoch bei den Benutzern ein Gefühl der Entfremdung hervorrufen.

Hier ist ein Beispiel für ein Bild, das ersetzt werden musste, weil es kulturell nicht angemessen war. Bitte beachten Sie, dass nicht alle Bilder für andere anstößig sein werden. Möglicherweise wird dadurch nur Apathie erzeugt, wenn Sie möchten, dass die Leute neugierig und interessiert an Ihrem Produkt sind.

Dies ist die Homepage von Clarin für die französische Sprache mit einer kaukasischen Frau. Und hier ist die koreanische Version mit einer Koreanerin als Markenbotschafterin.

The kind of visuals that may offend are those that may seem innocent to some cultures, but, in the eyes of a different culture, they are displaying behaviours that are illegal or taboo, for example, depictions of homosexuality or female empowerment.

Dies gilt auch für Ikonen: Während in den USA eine Ikone mit zwei anstoßenden Champagnergläsern ein Fest darstellt, ist es in Saudi-Arabien illegal, Alkohol zu trinken, sodass diese Ikone durch eine kulturell angemessene ersetzt werden muss.

Daher ist eine Recherche erforderlich, um sicherzustellen, dass die von Ihnen ausgewählten Symbole für den Zielmarkt geeignet sind. Wenn Sie sich nicht sicher sind, können Sie immer auf Nummer sicher gehen.

Diese drei Ikonen zum Beispiel zeigen die Erde. Das erste Bild wurde für das australische Publikum entworfen; der zweite für afrikanisches Publikum; Letzteres ist für ein größeres und globales Publikum geeignet, da kein bestimmter Bereich vorgestellt wird.

Und zu guter Letzt: ConveyThis kann jeden Text übersetzen, solange er nicht in ein Bild eingebettet ist. Die Software kann nicht erkennen, was darauf steht, sodass die Originalsprache erhalten bleibt. Vermeiden Sie also das Einbetten von Text.

Auswahl an Farben

Wie im vorherigen Abschnitt erwähnt, interpretieren Kulturen Bilder unterschiedlich und das Gleiche gilt für Farben. Ihre Bedeutung ist subjektiv.

In manchen Kulturen ist Weiß zum Beispiel die Farbe der Unschuld, aber andere würden dem nicht zustimmen, es ist die Farbe des Todes. Das Gleiche gilt für Rot. In asiatischen Kulturen wird es bei Feierlichkeiten verwendet, in einigen afrikanischen Ländern hat es jedoch keine so positive Konnotation, da es mit Gewalt in Verbindung gebracht wird.

Es scheint jedoch, dass Blau die sicherste aller Farben ist und häufig mit positiven Bedeutungen wie Ruhe und Frieden in Verbindung gebracht wird. Viele Banken verwenden Blau in ihren Logos, weil es auch Vertrauen und Sicherheit bedeuten kann.

This article shows the differences in color meanings all over the world, very useful for starting your research on what are the best colors for your multilingual site.

Formatanpassungen

Vermeiden Sie es, beim Schreiben von Datumsangaben ausschließlich Zahlen zu verwenden, da es viele verschiedene Schreibweisen gibt. In den USA ist das offizielle Format mm/tt/jjjj, und wenn Sie nur die Zahlen sehen, könnten einige Benutzer aus anderen Ländern, die andere Systeme verwenden (wie z. B. tt/mm/jjjj), verwirrt werden. Sie haben also folgende Optionen: Stellen Sie sicher, dass das Datumsformat in den übersetzten Versionen angepasst ist, oder schreiben Sie den Monat in Buchstaben, damit ConveyThis immer das richtige Datum schreibt.

Darüber hinaus wird in den USA das imperiale System verwendet, während in den meisten Ländern das metrische System verwendet wird. Sie müssen also entscheiden, ob es für Ihren Standort geeignet wäre, die Maße umzuwandeln.

Das beste Übersetzungs-Plugin für WordPress

Es gibt so viele Möglichkeiten, Ihrer WordPress-Website ein Übersetzungs-Plugin hinzuzufügen, und nicht alle funktionieren auf die gleiche Weise, die Ergebnisse können unterschiedlich ausfallen. Mit ConveyThis ist Ihnen eine perfekte Integration garantiert, unabhängig vom Design Ihrer Website.

ConveyThis ist mit 92 verfügbaren Sprachen die beste Wahl für die Übersetzung von Websites. Es ist ein zuverlässiges WordPress-Plugin, mit dem Sie schnell eine solide mehrsprachige Version Ihrer Website erstellen können. Es kann das Layout der Site verstehen, den gesamten Text erkennen und übersetzen. ConveyThis enthält außerdem einen intuitiven Editor zur Textanpassung.

ConveyThis enthält eine universelle Schaltfläche zum Umschalten der Sprache, die standardmäßig mit jeder Site funktioniert, die Sie aber auch beliebig bearbeiten können. Wir befolgen auch die in diesem Artikel genannten Designprinzipien:

• Konsistentes Branding in allen Sprachversionen der Website.
• Übersichtlicher Sprachumschalter und die Möglichkeit, eine bevorzugte Sprache auszuwählen.
• Websites werden automatisch mit UTF-8 kodiert.
• Richtige Schnittstellen für Rechts-nach-Links-Sprachen

ConveyThis: eine mehrsprachige Website-Lösung, der Sie vertrauen können

It is commonly believed that website translation is a complex process. But there is no need to postpone it because you don’t want to deal with the headaches. It’s not daunting at all! With ConveyThis, it becomes a straightforward conversion. It is seamless and fast.

Nach einer schnellen Installation können nun alle Ihre Inhalte übersetzt werden, ohne die Formatierung zu beeinträchtigen. Dies schließt von anderen Apps und dem Checkout-Prozess generierte Inhalte ein. ConveyThis ist ein einfaches Tool für die Übersetzung mehrsprachiger Websites, das Ihren Code nicht durcheinanderbringt, wie dies bei anderen der Fall ist.

The option to order professional translations of your site is also available! They will help you completely transform your multi language website into a multi cultural one, drastically improving your clients’ experience. Remember that if you translate a website, you must also have customer support available in your new client’s language. Consider investing in content localization and adaptation to guarantee a superb user experience for your visitors.