Comment concevoir un site Web multilingue convivial ?

Dernière mise à jour : 8 septembre 2026

Comment puis-je créer un site web multilingue qui soit convivial?

Un site Web multilingue convivial est constitué de cinq couches de conception, chacune pouvant être construite et testée avant même qu'un seul mot ne soit traduit :

• Mise en page flexible — Créez des composants qui tolèrent à la fois +50 % de texte de longueur allemande et −50 % de texte de longueur japonaise : boutons de largeur minimale au lieu de largeur fixe, retour à la ligne activé sur les éléments de navigation et cartes dimensionnées en fonction du contenu plutôt qu’en pixels.
• Stratégie de script et de police — Choisissez une pile de polices avec une couverture de glyphes confirmée pour chaque script cible, ou associez la police de marque à une police de secours à large couverture comme la collection Noto de Google afin qu'aucun élément ne s'affiche comme des cases d'espace réservé.
• Préparation RTL — Pour les marchés arabes ou hébraïques, concevez délibérément la mise en page en miroir : alignement tenant compte de la direction, icônes et carrousels inversés et mises en page qui résistent aux textes à directions mixtes. Les outils de conception gèrent cela de manière inégale — voici comment Figma, Sketch et les outils Adobe se comparent sur RTL.
• Navigation en fonction de la localisation — Rendez le changeur de langue trouvable et étiquetez chaque langue dans sa propre langue; les spécificités UX résident dans les meilleures pratiques de conception des sélecteurs de langues et des commutateurs.
• URL indexables de langage — Servez chaque langue à sa propre URL (sous-répertoire, sous-domaine ou ccTLD) plutôt que d’échanger le texte côté client, afin que les moteurs de recherche et les moteurs de réponse IA puissent trouver toutes les versions; les options d’architecture sont comparées dans les widgets et plugins de traduction de sites web.
• Inspirez-vous de sites multilingues en direct : IHG Hotels & Resorts propose son site Web en 20 langues, ayant traduit plus de 600 millions de mots grâce au réseau mondial de Smartling ; Wikipédia publie plus de 300 éditions linguistiques avec une architecture de l’information axée sur la langue ; et smartling.com lui-même propose 12 variantes régionales — de l’espagnol et de l’allemand au chinois simplifié — sur des sous-domaines régionaux. Tous les trois illustrent le même schéma : chaque langue bénéficie d'une véritable page indexable, et non d'une simple superposition de script.

Dans quelle mesure un texte s'élargit-il ou se contracte-t-il en traduction ?

La fonction de pseudo-traduction de Smartling applique ces ratios d'expansion et de contraction afin que les concepteurs puissent prévisualiser la longueur réaliste du texte avant le début de la traduction ; ils servent également de cibles de dimensionnement pour toute mise en page multilingue :

Source : Documentation de pseudo-traduction Smartling (aperçus des plugiciels Figma, Photoshop et Illustrator).

Comment puis-je ajouter plusieurs langues à mon site web existant?

L'ajout de langues à un site Web existant est une décision d'architecture serveur ainsi qu'une étape de conception — les options d'architecture (widget, plugin CMS ou proxy de traduction) sont comparées en détail dans les widgets et plugiciels de traduction de sites Web, les étapes ci-dessous se concentrent donc sur l'aspect conception :

1. Vérifiez ce qui doit vraiment changer : les modèles d’inventaire, les composants réutilisables, le texte intégré aux images et toutes les chaînes de caractères codées en dur ; cette liste définit la portée de la phase de conception et elle est presque toujours plus longue que ne le suggère le nombre de pages.
2. Choisissez comment les pages traduites seront servies : un proxy de traduction comme le Global Delivery Network de Smartling ajoute des langues sans replatformer ni internationaliser le code source, tandis qu’une approche native du CMS dépend de l’architecture de localisation de la plateforme. Consultez la section « Comment choisir un CMS multilingue » si la plateforme elle-même est en question.
3. Pseudo-traduisez avant de traduire — Faites passer des pseudo-traductions (chaînes sources remplies à la longueur de la langue cible) dans la mise en page pour exposer troncature, débordement et trous de polices pendant que les corrections restent peu coûteuses — avant de dépenser un budget de traduction.
4. Faites passer le design — Appliquez les correctifs que le test de pseudo-traduction a mis en avant : conteneurs flexibles, secours de polices de type script complet, et mises en page miroir pour n’importe quel lieu RTL sur la feuille de route.
5. Lancez chaque langue sur sa propre URL avec un sélecteur visible — Servez les langues sur les sous-répertoires, sous-domaines ou ccTLD pour qu’elles soient indexables, et offrez aux visiteurs un sélecteur qui suit les meilleures pratiques UX du changeur de langue — un excellent site espagnol que les visiteurs ne trouvent pas est un lancement raté.

Cette approche axée sur le design convient aux équipes qui...

• Vous prévoyez de passer d'un site monolingue à deux marchés ou plus et vous voulez éviter de refaire la mise en page pour chaque langue.
• Mettez en place un système de conception basé sur des composants, où un bouton flexible ou un composant de navigation corrige l'expansion du texte partout où il est réutilisé.
• Intégrer l'arabe, l'hébreu ou un autre marché RTL dans la feuille de route, où la mise en miroir doit être une décision de conception délibérée et non une simple réflexion après coup.
• Intéressez-vous à la visibilité organique et des réponses IA sur les marchés cibles, ce qui exige que chaque langue existe à sa propre URL accessible à l’accès à l’exploration.
• Je veux valider les mises en page avec du texte pseudo-traduit avant d’engager un budget de traduction.

Quand une refonte du design n'est peut-être pas la priorité absolue

• Ajouter une langue étroitement liée — l’anglais vers l’espagnol, par exemple — où le comportement de longueur du texte est similaire et où l’architecture de service compte plus qu’une simple refonte de la mise en page.
• Un site simple, axé sur le texte (un blogue, une documentation), avec des mises en page fluides à une seule colonne qui tolèrent déjà les longues chaînes de caractères.
• Lorsque le véritable obstacle est la diffusion des traductions, un proxy de traduction peut d'abord mettre en ligne des pages localisées sur une conception existante, le perfectionnement de la mise en page intervenant ultérieurement.

Liste de vérification de conception : questions à poser avant de créer un site web multilingue

Chaque bouton, élément de navigation et en-tête de tableau survivra-t-il au texte 50 % plus longtemps qu'en anglais ?
Testez par rapport au ratio d'expansion néerlandais/allemand, et non à la copie anglaise — c'est au niveau des composants à largeur fixe que la troncature apparaît en premier.

Les polices choisies ont-elles une couverture de glyphes confirmée pour chaque script cible?
Vérifiez les ensembles de caractères réels, ou associez la police de la marque à une solution de secours à large couverture comme la collection Noto de Google.

Y a-t-il du texte traduisible intégré en images?
Chaque titre aplati devient une tâche de conception par langue; déplacer le texte en HTML en direct superposé à l’image autant que possible.

La mise en page est-elle reproduite correctement pour les langues s'écrivant de droite à gauche (RTL) ?
L'alignement, les icônes, les carrousels et les indicateurs de progression doivent tous tenir compte de la direction pour l'arabe et l'hébreu — et la page en direct doit afficher cette mise en page, et pas seulement le fichier de conception.

Chaque langue a-t-elle sa propre URL indexable?
Sous-répertoire, sous-domaine ou ccTLD — si le texte échange simplement sur la même URL, le site traduit devient invisible pour les moteurs de recherche et les moteurs de réponses IA.

Un visiteur qui ne lit pas la langue par défaut peut-il trouver le sélecteur de langue ?
Une icône de globe terrestre et les langues étiquetées dans leur propre langue (« Deutsch », et non « German ») constituent le modèle qui fonctionne dans toutes les régions.

Comment Smartling soutient-il la conception de sites web multilingues?

Le Global Delivery Network (GDN) de Smartling dessert les sites web traduits via un proxy de traduction combiné à des composants côté client, ce qui signifie qu’une équipe peut lancer des pages localisées sans internationaliser la base de code ni re-platformer — le GDN est indépendant de la pile et fonctionne avec la plupart des sites web, livrant chaque langue sur son propre ccTLD, sous-domaine ou sous-répertoire avec des URL traduites et une garantie de disponibilité de 99,99%. Pour un concepteur, cela enlève l’excuse d’ingénierie pour retarder les langues, mais cela ne retire pas le travail de conception : la propre documentation RTL de Smartling précise que la page ou le site localisé doit être conçu pour afficher correctement sa mise en page pour les langues de droite à gauche.

Le support à l’étape de conception provient de deux fonctionnalités. Les pseudo-traductions — chaînes sources remplies de caractères supplémentaires pour la longueur de la langue cible — permettent à une équipe de tester la tolérance de l’interface utilisateur pour des chaînes plus longues avant de dépenser quoi que ce soit pour la traduction, et les plugins Figma, Photoshop et Illustrator de Smartling appliquent des ratios d’extension par langue (allemand +50%, français +30%, japonais −50%) directement dans le fichier de conception, ce qui permet de surpasser les surfaces là où c’est le moins coûteux à corriger. Pour le travail RTL, Smartling rend un contexte visuel de droite à gauche pour des chaînes de caractères mappées à un fichier contextuel HTML, afin que les traducteurs et les évaluateurs voient la mise en page miroir dans laquelle ils traduisent plutôt qu’une approximation de gauche à droite. Une fois la conception tenue, le contenu circule à travers les flux de traduction de Smartling — avec mémoire de traduction et application du glossaire — puis retourne au site via le GDN ou l’un des connecteurs CMS 50+. Smartling est un chef de file en gestion de traduction sur G2

Questions connexes

• Comment fonctionnent les gadgets et les plugiciels de traduction de sites Web ?
• Qu'est-ce qui fait qu'un sélecteur ou un changeur de langue fonctionne réellement ?
• Comment choisir un CMS multilingue ?
• Quels sont les outils de conception les plus adaptés aux mises en page RTL et aux flux de travail de localisation ?