Mise en page d'un site Web multilingue : 7 modèles et règles de conception

Résumez ce post avec : 11 minutes de lecture

ChatGPT Perplexité Grok Google IA

Une bonne mise en page de site Web multilingue fait trois choses : elle place un sélecteur de langue au même endroit visible sur chaque page (généralement en haut à droite de l'en-tête, répété dans le pied de page), elle étiquette chaque langue dans son propre nom plutôt qu'avec un drapeau, et elle laisse de la place au texte traduit, qui peut être deux ou trois fois plus long que l'anglais dans des étiquettes courtes. Tout le reste, de la navigation aux images de héros, doit être construit de manière à ce qu'il survive à des mots plus longs, à d'autres scripts et à une lecture de droite à gauche.

Principaux points à retenir

• Placez le commutateur dans l’en-tête de chaque page et répétez-le dans le pied de page. Les utilisateurs le recherchent en haut à droite sur leur ordinateur et dans le menu sur leur mobile.
• Écrire les noms des langues dans leur propre langue (« Deutsch », « Español », « 日本語 »). Le W3C déconseille d’utiliser des drapeaux pour les langues.
• Suggérez une langue, n'en forcez pas une. Google déconseille de rediriger automatiquement les utilisateurs en fonction de ce que vous pensez être leur langue.
• Conception pour l'expansion : les directives d'IBM, citées par le W3C, évaluent la croissance moyenne des chaînes anglaises allant jusqu'à 10 caractères à 200-300 % dans les langues européennes.
• Conservez chaque page dans une seule langue, donnez à chaque langue sa propre URL et gardez le texte hors des images.

Sept modèles de mise en page pour les sites multilingues

Ce sont les modèles qui fonctionnent dans la pratique. La plupart des sites en combinent deux ou trois.

1. Commutateur d'en-tête, en haut à droite

La disposition la plus courante place un commutateur compact à la fin de la navigation principale. Les acheteurs et les lecteurs regardent là-bas parce que c'est là que se trouvent les contrôles de compte, de panier et de recherche. Conservez-le exactement au même endroit sur chaque modèle, y compris le paiement, les pages d'aide et les articles de blog. Les conseils du W3C sont qu'il est “toujours préférable d'ajouter des liens vers des versions linguistiques alternatives, et de le faire sur chaque page”, et que “plus il est facile de découvrir ces liens, mieux c'est” (Internationalisation du W3C).

Bons détails:

• Affichez la langue actuelle sous forme d'étiquette de bouton (“anglais ▾”), et non sous forme d'icône de globe générique seule.
• Ouvrez la liste au clic, pas seulement au survol, elle fonctionne donc sur les écrans tactiles et avec un clavier.
• Si vous avez plus de huit langues, utilisez une liste déroulante ou un panneau consultable au lieu d'une longue liste déroulante.

2. Commutateur de pied de page comme sauvegarde

Un deuxième commutateur dans le pied de page attrape les personnes qui font défiler vers le bas à sa recherche, c'est également là que de nombreux sites les ont entraînés à chercher. Cela ne coûte rien et réduit “je ne trouve pas le menu de langue” les plaintes. Le pied de page est également un bon endroit pour la liste complète lorsque l'en-tête n'affiche que les langues les plus populaires.

3. Entrée de menu mobile

Sur les téléphones, l'en-tête a rarement de la place pour un commutateur. Placez l'option de langue en haut du menu coulissant, non enfouie en bas après vingt liens, et envisagez un petit code de langue (EN, DE) à côté de l'icône du menu afin que la langue actuelle reste visible.

4. Bannière de suggestion au lieu d'une redirection

Il est tentant de détecter la langue du navigateur du visiteur et de l'envoyer directement à la version correspondante. Google met en garde contre cela : “Évitez de rediriger automatiquement les utilisateurs d'une version linguistique d'un site vers une version linguistique différente,” car les redirections basées sur une supposition “pourraient empêcher les utilisateurs (et les moteurs de recherche) de visualiser toutes les versions de votre site” (Recherche Google Central). Googlebot explore généralement depuis les États-Unis et n'envoie aucun Accept-Language en-tête, donc une redirection forcée peut masquer vos traductions de la recherche.

Une alternative polie est une bannière mince en haut de la page, dans la langue suggérée : “Diese Seite ist auch auf Deutsch verfügbar. [Wechseln]”. Le visiteur choisit, et le choix est mémorisé.

5. Page de passerelle linguistique

Certaines marques s'ouvrent avec un sélecteur pleine page : choisissez votre langue (et parfois votre pays) avant d'entrer. Il convient aux sites où les langues diffèrent beaucoup en termes de contenu ou de prix. L’inconvénient est un clic supplémentaire pour tout le monde, alors utilisez-le uniquement sur l’URL racine, jamais comme barrière sur les liens profonds. Si vous en utilisez un, pointez hreflang x-default à cela ; Google dit que x-default “a été conçu pour les pages de sélection de langue” (Recherche Google Central).

6. Sélecteur de pays plus langue

Les détaillants qui vendent sur plusieurs marchés ont souvent besoin de deux choix : où vous vous trouvez (pour la devise, les frais d’expédition et les conditions juridiques) et quelle langue vous lisez. Affichez-les sous forme de deux champs clairs ou sous forme d'entrées combinées comme “Canada (Français)”. Ici, les drapeaux sont acceptables, car ils représentent des pays et non des langues. Le W3C fait la même distinction : les drapeaux peuvent convenir “aux versions géographiquement adaptées d'une page”, mais “ne sont pas appropriés pour créer des liens vers des pages qui sont simplement des traductions”.

7. Liens linguistiques dans le contenu

Pour la documentation, les centres d'aide et les blogs où tous les articles ne sont pas traduits, une petite ligne en haut de chaque article traduit (“Aussi disponible en : Español, Français”) indique aux lecteurs ce qui existe, et ne promet pas une traduction qui n'existe pas.

Concevoir le commutateur lui-même

Utilisez des noms natifs. Un locuteur persan confronté à une page en anglais ne devrait pas avoir à trouver « persan » pour y échapper ; ils cherchent « فارسی ». Le W3C recommande d’écrire des liens « dans la langue de la page qu’ils pointent », et d’ajouter éventuellement la langue de la page actuelle entre parenthèses ou dans une infobulle : « français (français) ».

Lâchez les drapeaux pour les langues. “Certains pays ont plus d’une langue, et certaines langues sont parlées dans plus d’un pays”, note le W3C. Un drapeau espagnol pour le contenu en espagnol semble étrange aux lecteurs du Mexique, d’Argentine ou de Colombie ; un drapeau américain pour l’anglais fait la même chose au Royaume-Uni, au Canada et en Australie.

Marquer la langue actuelle. Mettez-le en gras, ajoutez une coche ou affichez-le comme étiquette de bouton. Les utilisateurs doivent savoir sur quelle version ils se trouvent avant de décider de changer.

Gardez-le accessible. Utilisez un vrai <button> pour ouvrir le menu et les liens réels pour chaque langue, ajoutez lang attributs à chaque option (<a lang="de" hreflang="de" href="/de/">Deutsch</a>) afin que les lecteurs d'écran prononcent correctement les noms et s'assurent qu'ils peuvent être utilisés avec le clavier.

N'oubliez pas le choix. Lorsque quelqu’un choisit une langue, gardez-le dans celle-ci pendant qu’il navigue. Chaque lien interne sur le site allemand doit pointer vers des URL allemandes.

Laissez de la place à l'expansion du texte

Le texte traduit correspond rarement à l’espace conçu pour l’anglais. L'article du W3C sur la taille du texte cite les taux d'expansion moyens d'IBM de l'anglais vers les langues européennes (W3C):

Plus la corde est courte, plus elle devient mauvaise. Cela correspond exactement aux éléments que les concepteurs précisent : boutons, onglets, éléments de menu, étiquettes de formulaire et badges. L'exemple du W3C lui-même : l'étiquette Flickr pour “vues” devient “visualizzazioni” en italien, trois fois plus longue.

Règles de mise en page qui l'absorbent :

• Pas de largeurs fixes sur les conteneurs de texte. Laissez les boutons et les onglets grandir ; définissez min-width plutôt que width.
• Permettre à la navigation de s'enrouler ou de s'effondrer. Testez le menu principal dans une langue à mots longs comme l'allemand ou le finnois et disposez d'un plan (un menu “Plus”, des espaces plus petits ou un point d'arrêt hamburger qui dépend du contenu et non d'une largeur de pixel fixe).
• Évitez le texte sur une seule ligne dès la conception. Les titres qui doivent tenir sur une seule ligne en anglais seront supprimés dans d’autres langues. Laissez-les envelopper et vérifier que le héros a toujours l'air équilibré.
• Surveillez également l’espace vertical. Le W3C note que de nombreuses écritures non latines nécessitent des lignes plus hautes et que les caractères chinois, japonais et coréens peuvent chacun occuper plus d'espace horizontal même lorsqu'ils sont moins nombreux.
• N'oubliez pas la contraction. Certaines langues sont plus courtes, ce qui peut laisser des espaces blancs gênants dans les mises en page adaptées à l'anglais.

Planifiez différents scripts et directions

Polices. Vérifiez que votre police Web couvre chaque script que vous ajoutez. Là où ce n'est pas le cas, le navigateur revient à une police système au milieu de la page, qui semble cassée. Associez chaque script à une police conçue pour lui et similaire en poids et en taille.

Langues de droite à gauche. Les pages arabes, hébraïques, persanes et ourdou sont nécessaires dir="rtl", une mise en page en miroir et une décision sur les icônes à retourner. Notre Guide de conception RTL couvre les règles en détail.

Images avec texte. Le texte intégré dans les images ne peut être traduit par aucun outil, alors conservez le texte en HTML superposé sur l'image ou produisez une version de l'image par langue.

Gardez chaque page dans une seule langue

Google détermine la langue d'une page à partir de son contenu visible et recommande “d'utiliser une seule langue pour le contenu et la navigation sur chaque page, et d'éviter les traductions côte à côte” (Recherche Google Central). Les mises en page qui affichent l'anglais et l'espagnol sur deux colonnes, ou traduisent uniquement le menu tout en laissant le corps en anglais, déroutent à la fois les lecteurs et les moteurs de recherche.

Donnez à chaque langue sa propre URL, par exemple /de/ sous-dossiers ou de. sous-domaines et lier les versions avec hreflang. Google recommande des URL distinctes plutôt que de changer de contenu avec des cookies ou des paramètres de navigateur. Si vous choisissez une structure, voir sous-répertoires vs sous-domaines pour le référencement multilingue.

Localisez les détails que la mise en page contient

Les mises en page contiennent également des données qui changent selon le marché :

• Dates et numéros: Le 03/04 est le 3 avril au Royaume-Uni et le 4 mars aux États-Unis.
• Monnaie et prix: montrez clairement le symbole ou le code de la devise ; n'insinuez pas qu'un prix est local alors qu'il ne l'est pas.
• Adresses et champs téléphoniques: les formulaires conçus pour les adresses américaines (état, code postal) frustrent tout le monde. Rendre les champs facultatifs ou les adapter par pays.
• Contenu juridique et de confiance: les avis relatifs aux cookies, les politiques de retour et les coordonnées doivent correspondre au marché desservi par la langue.

Comment ConveyThis s'intègre dans votre mise en page

ConveyThis ajoute un sélecteur de langue à votre site que vous pouvez styliser à partir du tableau de bord : coins arrondis ou carrés, votre propre arrière-plan, couleurs de survol et de texte et CSS personnalisé. Par défaut, il répertorie les langues par leurs noms natifs et peut être affiché sans indicateurs ; si vous utilisez des indicateurs pour les versions régionales, vous pouvez changer le drapeau montré pour une langue, par exemple pour utiliser un drapeau britannique pour l'anglais. Chaque langue est publiée sur son propre sous-dossier ou URL de sous-domaine avec hreflang ajouté automatiquement.

Si vous souhaitez guider les visiteurs vers leur langue, le réglage automatique de la redirection utilise la langue du navigateur du visiteur plutôt que son adresse IP, et il est désactivé à moins que vous ne l'activiez. Gardez le commutateur visible dans tous les cas, afin que les gens puissent changer d’avis. Pour vérifier comment le texte traduit correspond à votre conception, utilisez l'éditeur visuel pour examiner et raccourcir les chaînes en place, et configurez un glossaire pour les termes qui doivent rester cohérents. Le page des fonctionnalités répertorie tout ce qui est disponible, et notre exemples de mises en page de sites Web multilingues montrez comment d'autres sites organisent leurs commutateurs.

Questions fréquemment posées

Où doit aller le sélecteur de langue sur un site Web ?

Dans l'en-tête, généralement en haut à droite, sur chaque page, avec une deuxième copie dans le pied de page. Sur mobile, placez-le en haut du menu et gardez la langue actuelle visible à côté de l'icône du menu.

Dois-je utiliser des indicateurs dans un commutateur de langue ?

Pas pour les langues. Le W3C le déconseille car de nombreux pays ont plusieurs langues et de nombreuses langues sont parlées dans plusieurs pays. Les drapeaux conviennent parfaitement pour choisir un magasin national ou régional.

Mon site doit-il rediriger automatiquement les visiteurs vers leur langue ?

Google déconseille les redirections automatiques basées sur une estimation de la langue de l'utilisateur, car elles peuvent empêcher les utilisateurs et les moteurs de recherche d'atteindre d'autres versions. Suggérez la langue avec une bannière ou souvenez-vous plutôt du choix du visiteur.

Combien d'espace dois-je laisser pour le texte traduit ?

Beaucoup plus pour les cordes courtes que pour les cordes longues. Les directives d'IBM, citées par le W3C, évaluent l'expansion moyenne à 200-300 % pour les chaînes anglaises jusqu'à 10 caractères et à environ 130 % pour les chaînes de plus de 70 caractères.

Un site Web multilingue doit-il utiliser des URL distinctes pour chaque langue ?

Oui. Google recommande des URL différentes pour chaque version linguistique plutôt que de changer de contenu avec des cookies ou des paramètres de navigateur et d'utiliser hreflang pour les connecter.

Essayez-le sur votre propre mise en page

Le moyen le plus rapide de voir comment votre conception s’adapte aux autres langages est de la traduire. Tu peux créer un compte ConveyThis, ajoutez une langue et révisez les pages traduites avec le commutateur en place.