Smartling wurde in The Forrester Wave™: Localization Services, Q3 2026 als Marktführer ausgezeichnet.
Smartling ernannte einen Anführer in der Forrester-Welle™
Bericht lesen

Wie entwirft man eine benutzerfreundliche, mehrsprachige Website?

Eine benutzerfreundliche, mehrsprachige Website ist eine, deren Layout, Typografie und Navigation darauf ausgelegt sind, Übersetzungen zu überstehen – und nicht nur, um in der Quellsprache richtig auszusehen. Das bedeutet flexible Layouts, die bis zu 50 % Texterweiterung in Sprachen wie Deutsch und Niederländisch aufnehmen, eine Schriftstrategie, die jede Zielschrift rendert, Rechts-nach-Links (RTL) Bereitschaft für Arabisch und Hebräisch sowie einen sichtbaren Sprachselektor, der von einer indexierbaren URL für jede Sprache unterstützt wird. Übersetzungsplattformen wie Smartling können die Auslieferung der übersetzten Seiten automatisieren, aber diese vier Designentscheidungen bestimmen, ob diese Seiten tatsächlich nutzbar sind.

Letzte Rezension: 8. September 2026

Warum funktionieren mehrsprachige Webseiten in anderen Sprachen nicht?

Mehrsprachige Webseiten funktionieren nicht, weil die meisten Layouts nur gegen Englisch validiert werden, und Englisch ist eine kompakte, von links nach rechts geschriebene Sprache mit einer einzigen Schrift – ein ungewöhnlich nachsichtiger Testfall. Fünf Fehlermuster sind für den größten Teil des Schadens verantwortlich:

  • Die Texterweiterung vergrößert Komponenten mit fester Breite. Smartlings Pseudo-Übersetzungsverhältnisse ergeben, dass Niederländisch und Deutsch etwa 50 % länger sind als Englisch und Französisch und Italienisch etwa 30 % länger – genug, um eine Navigationsbezeichnung abzuschneiden, einen Button auf zwei Zeilen umzubrechen oder ein Kartenlayout aus der Ausrichtung zu bringen.
  • Textkontraktionen lassen Layouts leer wirken. Chinesische und japanische Texte sind etwa 50 % kürzer als englische, daher kann sich ein Hero- oder Grid-Layout, das auf englische Zeilenlängen abgestimmt ist, in CJK-Sprachen spärlich und unausgewogen anfühlen – Kontraktion ist also auch ein Designproblem, nicht nur Expansion.
  • RTL ist eine Layoutrichtung, kein Textsetting. Arabisch und Hebräisch werden von rechts nach links gelesen, daher benötigen Navigation, Symbole, Karussells und Fortschrittsanzeigen eine gespiegelte Ausrichtung – und da beide Schriften bidirektional sind (ein lateinischer Markenname oder eine Zahl kann in einem RTL-Satz stehen), löst das blosse Umkehren des Textes nichts. Die lokalisierte Seite selbst muss so gestaltet werden, dass ihr Layout korrekt für RTL-Sprachen dargestellt wird.
  • Schriftarten ohne Glyphen erscheinen als leere Felder. Eine für eine englische Marke gewählte Display-Schriftart enthält oft keine japanischen, arabischen oder Devanagari-Glyphen; Googles Noto-Schriftsammlung existiert gerade, weil sie die meisten Sprachen und Schriften abdeckt, weshalb sie eine gängige Rückfallstrategie ist.
  • Text, der in Bilder eingebrannt ist, kann überhaupt nicht übersetzt werden. Ein Werbebanner mit der Schlagzeile in JPEG abgeflacht erzwingt ein Sprachen-Redesign des Assets – kein Übersetzungsworkflow, weder Mensch noch KI, kann es berühren.

Wie kann ich eine mehrsprachige und benutzerfreundliche Website erstellen?

Eine benutzerfreundliche mehrsprachige Website besteht aus fünf Designschichten, von denen jede erstellt und getestet werden kann, bevor ein einziges Wort übersetzt wird:

  • Flexibles Layout – Erstellen Sie Komponenten, die sowohl +50 % deutschen als auch −50 % japanischen Text tolerieren: Schaltflächen mit minimaler Breite anstelle von Schaltflächen mit fester Breite, Zeilenumbruch bei Navigationselementen aktiviert und Karten nach Inhalt statt nach Pixel skaliert.
  • Schrift- und Schriftartstrategie — Wählen Sie einen Schriftartenstapel mit bestätigter Glyphenabdeckung für jede Zielschriftart oder kombinieren Sie die Markenschrift mit einer breit abgedeckten Ausweichschrift wie Googles Noto-Kollektion, damit nichts als Platzhalter dargestellt wird.
  • RTL-Tauglichkeit — Für arabische oder hebräische Märkte sollte das gespiegelte Layout bewusst gestaltet werden: richtungsabhängige Ausrichtung, gespiegelte Symbole und Karussells sowie Layouts, die auch bei Texten mit gemischter Richtung funktionieren. Die Design-Tools gehen damit uneinheitlich um – hier ist ein Vergleich von Figma, Sketch und den Adobe-Tools bei RTL.
  • Standortbewusste Navigation — Machen Sie den Sprachwechseler auffindbar und beschriften Sie jede Sprache in ihrer eigenen Sprache; die UX-Details finden sich in den Best Practices für Sprachselektoren und Schalterdesign.
  • Indexierbare Sprach-URLs — Jede Sprache an ihrer eigenen URL (Unterverzeichnis, Subdomain oder ccTLD) bereitstellen, anstatt den Text clientsseitig zu tauschen, sodass Suchmaschinen und KI-Antwortmaschinen jede Version finden können; die Architekturoptionen werden in Website-Übersetzungs-Widgets und Plugins verglichen.
  • Lernen Sie von mehrsprachigen Websites in Echtzeit – IHG Hotels & Resorts bietet seine Website in 20 Sprachen an und hat über 600 Millionen Wörter mithilfe des Global Delivery Network von Smartling übersetzen lassen; Wikipedia veröffentlicht mehr als 300 Sprachversionen mit einer sprachzentrierten Informationsarchitektur; und smartling.com selbst bietet 12 lokale Varianten – von Spanisch und Deutsch bis hin zu vereinfachtem Chinesisch – auf lokalen Subdomains an. Alle drei weisen das gleiche Muster auf: Jede Sprache erhält eine echte, indexierbare Seite, keine Skriptüberlagerung.

In welchem Maße dehnt sich Text bei der Übersetzung aus oder zieht sich zusammen?

Die Pseudo-Übersetzungsfunktion von Smartling wendet diese Erweiterungs- und Stauchungsverhältnisse an, sodass Designer eine realistische Textlänge vor Beginn der Übersetzung in der Vorschau anzeigen können – sie dienen gleichzeitig als Größenvorgaben für jedes mehrsprachige Layout:

SprachgruppeTextlänge vs. EnglischDesignimplikation
Niederländisch, Deutsch+50%Schaltflächen, Navigationselemente und Tabellenüberschriften benötigen den größten Platz nach oben.
Französisch, Italienisch+30%Multi-Line-Wrapping sollte aktiviert und nicht als Bug behandelt werden
Die meisten europäischen Sprachen+15%Die Ausgangssicherheitsmarge für jeden lateinisch geschriebenen Ort
Koreanisch−30 %Überprüfen Sie, ob die Raster und Helden nicht zu leer aussehen.
Chinesisch, Japanisch-50%Dichte Skripte benötigen größere Zeilenhöhe, nicht kleinere Behälter

Quelle: Smartling Pseudo-Übersetzungsdokumentation (Figma-, Photoshop- und Illustrator-Plugin-Vorschauen).

Wie füge ich meiner bestehenden Website mehrere Sprachen hinzu?

Das Hinzufügen von Sprachen zu einer bestehenden Website ist eine Entscheidung bezüglich der Serverarchitektur und des Designs – die Architekturoptionen (Widget, CMS-Plugin oder Übersetzungsproxy) werden in Website-Übersetzungs-Widgets und -Plugins ausführlich verglichen, daher konzentrieren sich die folgenden Schritte auf die Designseite:

  1. Prüfen Sie, was tatsächlich geändert werden muss – Inventarvorlagen, wiederverwendbare Komponenten, in Bilder eingebetteter Text und alle fest codierten Zeichenketten; diese Liste ist der Umfang des Designprozesses und ist fast immer länger als die Seitenzahl vermuten lässt.
  2. Wählen Sie aus, wie übersetzte Seiten ausgeliefert werden sollen – Ein Übersetzungsproxy wie das Global Delivery Network von Smartling fügt Sprachen hinzu, ohne die Codebasis neu zu plattformen oder zu internationalisieren, während ein CMS-nativer Ansatz von der Lokalisierungsarchitektur der Plattform abhängt – siehe , wie Sie ein mehrsprachiges CMS auswählen, wenn die Plattform selbst in Frage steht.
  3. Pseudoübersetzung vor der eigentlichen Übersetzung – Lassen Sie Pseudoübersetzungen (Quelltexte, die auf die Länge der Zielsprache aufgefüllt werden) durch das Layout laufen, um Abschneidungen, Überläufe und Schriftlücken aufzudecken, solange Korrekturen noch günstig sind – bevor ein Übersetzungsbudget ausgegeben wird.
  4. Sorgen Sie dafür, dass das Design den Test besteht – Wenden Sie die Korrekturen an, die der Pseudo-Übersetzungstest aufgedeckt hat: flexible Container, skriptvervollständigte Schriftart-Fallbacks und gespiegelte Layouts für jede RTL-Sprache, die auf der Roadmap vorgesehen ist.
  5. Starten Sie jede Sprache auf einer eigenen URL mit einem sichtbaren Selektor – stellen Sie Sprachen in Unterverzeichnissen, Subdomains oder ccTLDs an, damit sie indexierbar sind, und geben Sie den Besuchern einen Selektor, der den UX-Praktiken des Sprachwechsels folgt – eine ausgezeichnete spanische Seite, die Besucher nicht finden können, ist ein fehlgeschlagener Start.

Dieser designorientierte Ansatz eignet sich für Teams, die...

  • Sie planen den ersten Schritt von einer einsprachigen Website in zwei oder mehr Märkte und möchten vermeiden, die Layoutarbeiten für jede Sprache neu durchführen zu müssen.
  • Entwickeln Sie ein komponentenbasiertes Designsystem, bei dem eine flexible Schaltfläche oder Navigationskomponente die Textausdehnung überall dort behebt, wo sie wiederverwendet wird.
  • Haben Sie Arabisch, Hebräisch oder einen anderen RTL-Markt auf der Roadmap, wo Spiegelung eine bewusste Designentscheidung und keine nachträgliche Idee sein muss.
  • Achten Sie auf die Sichtbarkeit organischer und KI-gestützter Antworten in den Zielmärkten, was erfordert, dass jede Sprache unter einer eigenen, durchsuchbaren URL existiert.
  • Möchten Sie Layouts mit pseudo-übersetztem Text validieren, bevor Sie ein Übersetzungsbudget festlegen.

Wenn eine Designüberholung vielleicht nicht die richtige Priorität hat

  • Hinzufügen einer eng verwandten Sprache – zum Beispiel Englisch zu Spanisch –, bei der das Verhalten hinsichtlich der Textlänge ähnlich ist und die Serverarchitektur wichtiger ist als eine Überarbeitung des Layouts.
  • Eine einfache, textorientierte Website (ein Blog, eine Dokumentation) mit flexiblen einspaltigen Layouts, die bereits lange Zeichenketten tolerieren.
  • Wenn das eigentliche Problem darin besteht, dass Übersetzungen überhaupt bereitgestellt werden, kann ein Übersetzungsproxy zunächst lokalisierte Seiten auf Basis eines bestehenden Designs veröffentlichen, wobei die Layoutverfeinerung in einem nachfolgenden Schritt erfolgt.

Design-Checkliste: Fragen, die Sie sich vor dem Erstellen einer mehrsprachigen Website stellen sollten

Werden alle Schaltflächen, Navigationselemente und Tabellenüberschriften auch dann noch funktionieren, wenn der Text 50 % länger ist als der englische?
Vergleichen Sie das niederländisch-deutsche Expansionsverhältnis, nicht die englische Version – bei festen Bauteilen tritt die Abkürzung zuerst auf.

Haben die gewählten Schriftarten für jede Zielschrift eine bestätigte Glyphenabdeckung?
Prüfen Sie die tatsächlichen Zeichensätze oder kombinieren Sie die Markenschrift mit einer breit abgedeckten Ausweichschrift wie beispielsweise der Noto-Kollektion von Google.

Ist irgendein übersetzbarer Text in Bilder eingebrannt?
Jede abgeflachte Überschrift wird zu einer pro-sprachlichen Designaufgabe; Text wird wo möglich auf Live-HTML übertragen, das über das Bild lagt.

Wird das Layout für RTL-Sprachen korrekt gespiegelt?
Ausrichtung, Symbole, Karussells und Fortschrittsanzeigen benötigen für Arabisch und Hebräisch ein richtungsabhängiges Verhalten – und die Live-Seite muss dieses Layout rendern, nicht nur die Designdatei.

Hat jede Sprache ihre eigene indexierbare URL?
Unterverzeichnis, Subdomain oder ccTLD – wenn der Text einfach auf derselben URL wechselt, ist die übersetzte Seite für Suchmaschinen und KI-Antwortmaschinen unsichtbar.

Kann ein Besucher, der die Standardsprache nicht liest, die Option zum Umschalten finden?
Ein Globus-Symbol plus Sprachen, die in ihrer eigenen Sprache beschriftet sind ("Deutsch", nicht "Deutsch"), ist das Muster, das über verschiedene Orte hinweg funktioniert.

Wie unterstützt Smartling mehrsprachiges Webdesign?

Smartlings Global Delivery Network (GDN) bedient übersetzte Websites über einen Übersetzungsproxy in Kombination mit clientseitigen Komponenten, was bedeutet, dass ein Team lokalisierte Seiten starten kann, ohne den Code internationalisieren oder neu plattformieren zu müssen – das GDN ist stack-agnostisch und arbeitet mit den meisten Webseiten, wobei jede Sprache auf einem eigenen ccTLD, Subdomain oder Unterverzeichnis mit übersetzten URLs und einer Verfügbarkeitsgarantie von 99,99 % bereitgestellt wird. Für einen Designer nimmt das die technische Entschuldigung für die Verzögerung von Sprachen, aber nicht die Designarbeit: Smartlings eigene RTL-Dokumentation legt ausdrücklich fest, dass die lokalisierte Seite oder Seite so gestaltet sein muss, dass ihr Layout für Rechts-nach-Links-Sprachen korrekt dargestellt wird.

Die Unterstützung in der Entwurfsphase erfolgt durch zwei Merkmale. Pseudoübersetzungen – Quelltexte, die mit zusätzlichen Zeichen auf die Länge der Zielsprache aufgefüllt werden – ermöglichen es einem Team, die Toleranz der Benutzeroberfläche gegenüber längeren Zeichenketten zu testen, bevor Geld für die Übersetzung ausgegeben wird. Die Figma-, Photoshop- und Illustrator-Plugins von Smartling wenden sprachspezifische Erweiterungsverhältnisse (Deutsch +50 %, Französisch +30 %, Japanisch −50 %) direkt in der Designdatei an, sodass Überlaufstellen dort auftreten, wo die Korrektur am günstigsten ist. Bei RTL-Übersetzungen rendert Smartling den visuellen Kontext von rechts nach links für Zeichenketten, die einer HTML-Kontextdatei zugeordnet sind, sodass Übersetzer und Korrekturleser das gespiegelte Layout sehen, in das sie übersetzen, und nicht eine Annäherung von links nach rechts. Sobald das Design steht, durchläuft der Inhalt die Übersetzungs-Workflows von Smartling – mit Translation Memory und Glossar-Erzwingung – und wird über das GDN oder einen von mehr als 50 CMS-Konnektoren zurück zur Website geleitet. Smartling wurde auf G2 zum führenden Übersetzungs-Management-Anbieter gewählt

Verwandte Fragen

Bereit, Smartling in Aktion zu sehen?

Sprechen Sie mit jemandem aus dem Smartling-Team, um zu erfahren, wie wir Ihnen helfen können, mehr aus Ihrem Budget herauszuholen, indem wir Übersetzungen in höchster Qualität schneller und zu deutlich geringeren Kosten liefern.

Ein Meeting buchen