Best Practices für die Softwarelokalisierung: Vollständiger Leitfaden für Entwickler

Vermeiden Sie Übersetzungsfehler in Ihrem Softwarelokalisierungsprozess. Lernen Sie Codestruktur, Placeholder-Syntax und UI-Muster kennen. Inklusive kostenlosem KI-Übersetzungstool.

Wenn Sie die Softwarelokalisierung nicht vorbereiten, sehen Ihre französischen Benutzer möglicherweise Folgendes:

Der Grund? Weil Ihr Code ungefähr so aussieht:

<button style="width: 120px">Änderungen speichern</button>

<button style="width: 120px">Save Changes</button>

Dieser Leitfaden zeigt Ihnen, wie Sie Ihren Code von Anfang an für die Lokalisierung strukturieren. Jeder Abschnitt enthält anschauliche Beispiele und hebt hervor, was den größten Unterschied für die Übersetzungsqualität ausmacht.

Was Sie lernen werden:

• Wie man separate Dateien für lokalisierbare Inhalte verwendet
• Best Practices für den Umgang mit Placeholdern und dynamischen Inhalten
• UI-Designmuster für die Texterweiterung
• So laden Sie die richtige Sprache für Ihre Benutzer
• So richten Sie automatische Übersetzungen ein

Tipp Nr. 1: Verwenden Sie separate Dateien für lokalisierbare Inhalte

Translation tools can’t detect hard-coded strings in your source code. Move all user-facing text into resource files. This includes:

• UI-Beschriftungen, Schaltflächen und Menüpunkte
• Fehlermeldungen und Validierungstext
• E-Mail-Vorlagen und Benachrichtigungen
• Hilfetext, Tooltips und Placeholder-Text
• Erfolgs-/Bestätigungsnachrichten

Verwenden Sie die Internationalisierungsfunktionen Ihres Frameworks, anstatt Zeichenketten fest zu codieren.

React Beispiel:

// Falsch - fest codiert
<button>Submit</button>

// Richtig - mit react-intl
<button>{t('submit_button')}</button>

// Wrong - hard-coded
<button>Submit</button>

// Right - using react-intl
<button>{t('submit_button')}</button>

WordPress Beispiel:

// Falsch - fest codiert
echo 'Submit';

// Richtig - mit WordPress i18n
echo __( 'Submit', 'your-textdomain' );

// Wrong - hard-coded
echo 'Submit';

// Right - using WordPress i18n
echo __( 'Submit', 'your-textdomain' );

Rails Beispiel:

# Falsch - fest codiert
flash[:notice] = "Profile updated successfully"

# Richtig - mit Rails I18n
flash[:notice] = t('profile.update_success')

# Wrong - hard-coded
flash[:notice] = "Profile updated successfully"

# Right - using Rails I18n
flash[:notice] = t('profile.update_success')

Wählen Sie das Ressourcendateiformat basierend auf Ihrem Framework aus:

• .json – JavaScript Frameworks (React, Vue, Angular)
• .po/.pot – WordPress, PHP, Python (gettext)
• .yaml/.yml – Ruby on Rails
• .xml – Android (strings.xml)
• .xcstrings – iOS/macOS

Tipp Nr. 2: Behandeln Sie Placeholder und dynamische Inhalte korrekt

Wenn Text dynamische Werte wie Benutzernamen, Zählungen oder Daten enthält, verwenden Sie Placeholder anstelle von String-Verkettung.

Verschiedene Sprachen haben unterschiedliche Wortreihenfolgen. Die Verkettung unterbricht dies, indem sie Sätze in Fragmente aufteilt, die nicht neu geordnet werden können.

Das folgende Beispiel erstellt drei separate Teile, die Übersetzer nicht neu anordnen können. In Sprachen wie Japanisch, in denen sich die Wortreihenfolge vom Englischen unterscheidet, wird die Übersetzung grammatikalisch falsch.

Falsches Beispiel (String-Verkettung)

const name = 'John';
const message = 'Hello, ' + name + '!';

const name = 'John';
const message = 'Hello, ' + name + '!';

Korrekte Beispiele

msgid "Hello, %s!"
msgstr ""

msgid "Hello, %s!"
msgstr ""

{
 "greeting": "Hello, {name}!"
}

{
  "greeting": "Hello, {name}!"
}

greeting: "Hello, %{name}!"

greeting: "Hello, %{name}!"

Stellen Sie sicher, dass Sie eine Placeholder-Syntax verwenden, die mit Ihrem Framework funktioniert:

Tipp Nr. 3: Entwerfen Sie die Benutzeroberfläche für die Texterweiterung

Die Textlänge ändert sich in verschiedenen Sprachen dramatisch. Layouts, Schaltflächen und Navigationsmenüs mit fester Breite werden unterbrochen, wenn sich der Text erweitert oder wenn Sie Sprachen unterstützen, die von rechts nach links geschrieben werden, wie z. B. Arabisch.

• Deutscher Text ist typischerweise 30 % länger als Englisch
• Französisch ist etwa 20 % länger
• Asiatische Sprachen wie Chinesisch und Japanisch sind oft kürzer

Bevor Sie mit dem Programmieren beginnen, überlegen Sie, wie sich verschiedene Sprachen während der Entwurfsphase auf den Platz auswirken. Dies spart Zeit beim Debuggen von Layoutproblemen später.

Einzelheiten zur Implementierung und Codebeispiele finden Sie unter So verhindern Sie Layoutprobleme bei langen Übersetzungen.

Tipp Nr. 4: Schreiben Sie Inhalte, die sich gut übersetzen lassen

Klares, einfaches Schreiben führt zu besseren Übersetzungen. Komplexe Sprache erfordert nach der Übersetzung mehr Bearbeitung.

✓ Schreiben Sie vollständige Sätze mit klaren Subjekten und Handlungen.

Korrekte Beispiele

"Sie haben keine gespeicherten Artikel in Ihrem Warenkorb."

"You have no saved items in your cart."

Dies gibt klar an, was leer ist (Warenkorb) und was er enthalten soll (gespeicherte Artikel).

Falsche Beispiele

"Keine Artikel im Warenkorb."

"No cart items."

In dem obigen Beispiel fehlen das Subjekt („Sie“) und die Handlung („haben“). Diese Fragmente könnten je nach Interpretation „Es gibt keinen Warenkorb“ oder „Artikel nicht im Warenkorb“ bedeuten.

✓ Halten Sie es einfach. Kurze, klare Wörter erzeugen bessere Übersetzungen als komplexes Vokabular.

Korrekte Beispiele

"Artikel aus dem Warenkorb entfernen"

"Remove item from cart"

Falsche Beispiele

"Diesen Artikel aus Ihrem Warenkorb entfernen"

"Eliminate this article from your shopping cart"

✓ Vermeiden Sie Redewendungen und kulturelle Bezüge.

Sätze wie “piece of cake” oder “hit a home run” lassen sich nicht wörtlich übersetzen und sind in anderen Kulturen möglicherweise nicht sinnvoll.

Tipp Nr. 5: Konfigurieren Sie die Spracherkennung und das Laden von Dateien

Richten Sie Ihre Anwendung so ein, dass sie die Sprache des Benutzers erkennt und die entsprechende Übersetzungsdatei lädt. Die meisten modernen Frameworks enthalten i18n-Bibliotheken, die dies automatisch erledigen.

• React mit react-i18next

React enthält standardmäßig keine i18n. Installieren Sie react-i18next mit npm und konfigurieren Sie es dann so, dass es die Browsersprache erkennt und Ihre Übersetzungsdateien lädt.

• Ruby on Rails

Rails enthält I18n standardmäßig. Konfigurieren Sie es in config/application.rb. Erkennen Sie dann die Sprache des Benutzers in Ihrem ApplicationController.

• WordPress

WordPress übernimmt die Spracherkennung automatisch. Benutzer legen ihre Website-Sprache unter Einstellungen → Allgemein fest, und WordPress lädt die entsprechende .mo-Datei aus wp-content/languages/. Für mehrsprachige Websites, auf denen verschiedene Benutzer unterschiedliche Sprachen benötigen, benötigen Sie ein Plugin wie WPML, um die Sprachauswahl pro Benutzer zu verwalten.

Behandeln fehlender Übersetzungen

Legen Sie Ihre Fallbacksprache auf Ihre Primärsprache fest. Wenn eine Übersetzungsdatei nicht existiert oder Strings fehlen, sehen Benutzer den Fallback anstelle von fehlerhaftem Text oder Übersetzungsschlüsseln.

Fügen Sie einen Sprachumschalter hinzu (falls erforderlich)

Die meisten Anwendungen sollten die Browser- oder Gerätespracheeinstellungen des Benutzers automatisch berücksichtigen. Wenn Sie jedoch zulassen möchten, dass Benutzer dies manuell überschreiben – was bei Webanwendungen üblich ist – fügen Sie einen Sprachumschalter hinzu und speichern Sie deren Auswahl:

// Speichern der manuellen Sprachauswahl des Benutzers
localStorage.setItem('userLanguage', selectedLanguage);

// Zuerst auf manuelle Auswahl prüfen, dann Browser-Standard verwenden
const userLanguage = localStorage.getItem('userLanguage') || navigator.language;

// Save user's manual language selection
localStorage.setItem('userLanguage', selectedLanguage);

// Check for manual selection first, then use browser default
const userLanguage = localStorage.getItem('userLanguage') || navigator.language;

Mobile Apps enthalten in der Regel keine Sprachumschalter, da Benutzer erwarten, dass Apps ihren Geräteeinstellungen folgen.

Tipp Nr. 6: Automatisieren Sie Ihren Softwareübersetzungsprozess

Manuelle Übersetzungsabläufe verlangsamen jede Version. Wenn Sie Zeichenketten aktualisieren, müssen Übersetzungen automatisch erfolgen.

PTC ist ein KI-Übersetzungstool, das diesen Prozess automatisiert. Sie können es in Ihr GitHub-, GitLab– oder Bitbucket-Repository integrieren oder die API für die CI/CD-Integration verwenden. Wenn Sie Strings aktualisieren, erfolgen Übersetzungen automatisch.

Die Erstellung eines Kontos ist kostenlos und Sie können 2.500 Wörter in 2 Sprachen kostenlos übersetzen. Danach fallen keine Abonnementgebühren an – Sie zahlen nur für das, was Sie übersetzen.

Tipp Nr. 7: Testen Sie lokalisierte Versionen vor der Veröffentlichung

Tests stellen sicher, dass Ihre Übersetzungen korrekt angezeigt werden und Ihre Benutzeroberfläche in verschiedenen Sprachen funktioniert. Testen Sie sowohl die Anzeige als auch die Funktionalität.

• Layout: Text passt ohne Kürzung, kein Überlauf, Navigation funktioniert
• Funktionalität: Formulare werden gesendet, Fehlermeldungen werden korrekt angezeigt, Suche verarbeitet Sonderzeichen (é, ñ, ü)
• Formatierung: Daten (TT/MM vs. MM/TT), Zahlen (1.000,00 vs. 1.000,00), Währungspositionen (€100 vs. 100€)