Meilleures pratiques de localisation de logiciels : Guide complet du développeur

Évitez les bogues de traduction dans votre processus de localisation de logiciels. Découvrez la structure du code, la syntaxe des placeholders et les modèles d’interface utilisateur. Inclut un outil de traduction IA gratuit.

Lorsque vous ne vous préparez pas à la localisation de logiciels, vos utilisateurs français risquent de voir ceci :

La raison ? Parce que votre code ressemble à ceci :

<button style="width: 120px">Enregistrer les modifications</button>

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

Ce guide vous montre comment structurer votre code pour la localisation dès le premier jour. Chaque section comprend des exemples clairs et met en évidence ce qui fait la plus grande différence en matière de qualité de la traduction.

Ce que vous apprendrez :

• Comment utiliser des fichiers séparés pour le contenu localisable
• Meilleures pratiques pour la gestion des placeholders et du contenu dynamique
• Modèles de conception d’interface utilisateur pour l’expansion du texte
• Comment charger la bonne langue pour vos utilisateurs
• Comment configurer les traductions automatisées

Conseil n° 1 : Utilisez des fichiers séparés pour le contenu localisable

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

• Étiquettes d’interface utilisateur, boutons et éléments de menu
• Messages d’erreur et texte de validation
• Modèles d’e-mails et notifications
• Texte d’aide, info-bulles et placeholder
• Messages de succès/confirmation

Utilisez les fonctions d’internationalisation de votre framework au lieu de coder en dur les chaînes.

Exemple React :

// Incorrect - codé en dur
<button>Submit</button>

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

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

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

Exemple WordPress :

// Incorrect - codé en dur
echo 'Submit';

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

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

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

Exemple Rails :

# Incorrect - codé en dur
flash[:notice] = "Profile updated successfully"

# Correct - using 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')

Sélectionnez le format de fichier de ressources en fonction de votre framework :

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

Conseil n° 2 : Gérez correctement les placeholders et le contenu dynamique

Lorsque le texte inclut des valeurs dynamiques telles que les noms d’utilisateur, les nombres ou les dates, utilisez des placeholders au lieu de la concaténation de chaînes.

Différentes langues ont des ordres de mots différents. La concaténation brise cela en divisant les phrases en fragments qui ne peuvent pas être réorganisés.

L’exemple ci-dessous crée trois éléments distincts que les traducteurs ne peuvent pas réorganiser. Dans les langues comme le japonais où l’ordre des mots diffère de l’anglais, la traduction devient grammaticalement incorrecte.

Exemple incorrect (concaténation de chaînes)

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

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

Exemples corrects

msgid "Hello, %s!"
msgstr ""

msgid "Hello, %s!"
msgstr ""

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

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

greeting: "Hello, %{name}!"

greeting: "Hello, %{name}!"

Assurez-vous d’utiliser une syntaxe de placeholder qui fonctionne avec votre framework :

Conseil n° 3 : Concevez l’interface utilisateur pour l’expansion du texte

La longueur du texte change considérablement d’une langue à l’autre. Les mises en page, les boutons et les menus de navigation à largeur fixe se brisent lorsque le texte s’étend ou lorsque vous prenez en charge les langues de droite à gauche comme l’arabe.

• Le texte allemand est généralement 30 % plus long que l’anglais
• Le français est environ 20 % plus long
• Les langues asiatiques comme le chinois et le japonais sont souvent plus courtes

Avant de commencer à coder, réfléchissez à la façon dont les différentes langues ont un impact sur l’espace pendant la phase de conception. Cela permet de gagner du temps lors du débogage des problèmes de mise en page ultérieurement.

Pour plus de détails sur l’implémentation et des exemples de code, consultez comment éviter les problèmes de mise en page avec les traductions longues.

Conseil n° 4 : Rédigez un contenu qui se traduit bien

Une écriture claire et simple produit de meilleures traductions. Un langage complexe nécessite plus de modifications après la traduction.

✓ Rédigez des phrases complètes avec des sujets et des actions clairs.

Exemple correct

« Vous n’avez aucun élément enregistré dans votre panier. »

"You have no saved items in your cart."

Cela indique clairement ce qui est vide (panier) et ce qu’il devrait contenir (éléments enregistrés).

Exemple incorrect

« Aucun article dans le panier. »

"No cart items."

L’exemple ci-dessus ne contient pas le sujet (« vous ») ni l’action (« avez »). Ces fragments pourraient signifier « Il n’y a pas de panier » ou « Articles absents du panier », selon la façon dont ils sont interprétés.

✓ Faites simple. Des mots courts et clairs produisent de meilleures traductions qu’un vocabulaire complexe.

Exemple correct

« Supprimer l’article du panier »

"Remove item from cart"

Exemple incorrect

« Éliminer cet article de votre panier »

"Eliminate this article from your shopping cart"

✓ Évitez les expressions idiomatiques et les références culturelles.

Les expressions comme « piece of cake » ou « hit a home run » ne se traduisent pas littéralement et peuvent ne pas avoir de sens dans d’autres cultures.

Conseil n° 5 : Configurez la détection de la langue et le chargement des fichiers

Configurez votre application pour détecter la langue de l’utilisateur et charger le fichier de traduction approprié. La plupart des frameworks modernes incluent des bibliothèques i18n qui gèrent cela automatiquement.

• React avec react-i18next

React n’inclut pas i18n par défaut. Installez react-i18next avec npm, puis configurez-le pour détecter la langue du navigateur et charger vos fichiers de traduction.

• Ruby on rails

Rails inclut I18n par défaut. Configurez-le dans config/application.rb. Ensuite, détectez la langue de l’utilisateur dans votre ApplicationController.

• WordPress

WordPress gère automatiquement la détection de la langue. Les utilisateurs définissent la langue de leur site dans Réglages → Général, et WordPress charge le fichier .mo correspondant à partir de wp-content/languages/. Pour les sites multilingues où différents utilisateurs ont besoin de langues différentes, vous aurez besoin d’une extension comme WPML pour gérer la sélection de la langue par utilisateur.

Gérer les traductions manquantes

Définissez votre langue de repli sur votre langue principale. Lorsqu’un fichier de traduction n’existe pas ou que des chaînes sont manquantes, les utilisateurs voient le repli au lieu du texte cassé ou des clés de traduction.

Ajouter un sélecteur de langue (si nécessaire)

La plupart des applications doivent respecter automatiquement les paramètres de langue du navigateur ou de l’appareil de l’utilisateur. Mais si vous voulez permettre aux utilisateurs de remplacer cela manuellement (courant pour les applications Web), ajoutez un sélecteur de langue et stockez leur choix :

// Enregistrer la sélection manuelle de la langue de l’utilisateur
localStorage.setItem('userLanguage', selectedLanguage);

// Vérifier d’abord la sélection manuelle, puis utiliser la valeur par défaut du navigateur
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;

Les applications mobiles n’incluent généralement pas de sélecteurs de langue, car les utilisateurs s’attendent à ce que les applications suivent les paramètres de leur appareil.

Conseil n° 6 : Automatisez votre processus de traduction de logiciels

Les flux de travail de traduction manuelle ralentissent chaque version. Lorsque vous mettez à jour des chaînes, les traductions doivent se faire automatiquement.

PTC est un outil de traduction IA qui automatise ce processus. Vous pouvez l’intégrer à votre référentiel GitHub, GitLab ou Bitbucket, ou utiliser l’API pour l’intégration CI/CD. Lorsque vous mettez à jour des chaînes, les traductions se font automatiquement.

La création d’un compte est gratuite et vous pouvez traduire 2 500 mots dans 2 langues sans frais. Après cela, il n’y a pas de frais d’abonnement : vous ne payez que ce que vous traduisez.

Conseil n° 7 : Testez les versions localisées avant le lancement

Les tests garantissent que vos traductions s’affichent correctement et que votre interface utilisateur fonctionne dans différentes langues. Testez à la fois l’affichage et la fonctionnalité.

• Disposition : Le texte tient sans troncature, pas de dépassement, la navigation fonctionne
• Fonctionnalité : Les formulaires sont soumis, les messages d’erreur s’affichent correctement, la recherche gère les caractères spéciaux (é, ñ, ü)
• Mise en forme : Dates (JJ/MM vs. MM/JJ), nombres (1 000,00 vs 1.000,00), positions de la devise (100 € vs 100€)