Dans ce post
Si vous créez un site Web multilingue, il existe certaines bonnes pratiques de conception de sites Web multilingues que vous voudrez suivre pour vous assurer de créer une excellente expérience pour les visiteurs de toutes les langues.
Alors, quelles sont ces bonnes pratiques importantes ? Eh bien, c'est pratiquement tout le sujet de cet article !
Ci-dessous, nous allons détailler huit bonnes pratiques de conception de sites Web multilingues à prendre en compte lors de la création d'un site Web multilingue.
Ces conseils fonctionneront peu importe la manière dont vous créez votre site web multilingue. Cependant, si vous utilisez WordPress, utiliser le plugin multilingue TranslatePress vous donne une longueur d'avance en matière de design car vous pouvez gérer toutes vos traductions à partir d'une interface visuelle. Plus d'informations à ce sujet dans l'article !
Sans plus attendre, plongeons dans nos conseils pour la conception de sites Web multilingues...
Huit conseils et bonnes pratiques pour la conception de sites Web multilingues
Si vous voulez réussir le développement de votre site web multilingue et garantir un design optimal, suivez ces huit conseils et bonnes pratiques.
1. Placez votre sélecteur de langue dans un endroit visible
Si vous proposez plusieurs langues sur votre site, vous devez ajouter un sélecteur de langue afin que les visiteurs puissent choisir leurs langues préférées.
Puisque ce sélecteur de langue jouera un rôle si important dans l'expérience des utilisateurs sur votre site, il est essentiel de le placer dans un endroit facile à trouver.
La dernière chose que vous voudriez, c'est que tout le travail acharné que vous avez investi dans la traduction de votre contenu soit gaspillé par quelqu'un qui quitte votre site parce qu'il ne réalise même pas qu'il est multilingue.
Il y a deux emplacements “ principaux ” pour placer votre sélecteur de langue :
- Un sélecteur de langue flottant, généralement dans le coin inférieur droit. Ce sélecteur de langue sera toujours visible, même lorsqu'un utilisateur fait défiler la page vers le bas. C'est une excellente approche si vous souhaitez rendre votre sélecteur de langue impossible à rater.
- Un sélecteur de langue de menu cela fait partie de votre menu de navigation principal, généralement situé dans l'en-tête de votre site. Cela permet également aux visiteurs de le trouver très facilement, car la plupart d'entre eux consulteront votre menu de navigation principal à un moment ou à un autre.
Voici un exemple du sélecteur de langue flottant par défaut de TranslatePress :
Certains sites Web placent également le sélecteur de langue dans le pied de page ou dans la zone de la barre latérale. Cependant, ces zones peuvent être plus faciles à manquer (surtout le pied de page), c'est pourquoi il vaut généralement mieux opter pour l'une des deux premières options.
Si vous Utilisez TranslatePress pour traduire votre site WordPress, TranslatePress ajoutera automatiquement, par défaut, un sélecteur de langue flottant dans le coin inférieur droit de votre site.
Cependant, vous pouvez facilement le déplacer vers un autre emplacement, par exemple en l'ajoutant comme élément de menu à l'aide de l'outil de gestion des menus intégré de WordPress.
Pour en savoir plus, consultez notre tutoriel sur la façon d'ajouter un sélecteur de langue WordPress.
2. N'utilisez pas seulement des drapeaux dans votre sélecteur de langue
Si vous avez suivi le conseil précédent, les visiteurs ne devraient avoir aucun problème trouvaille votre sélecteur de langue. Maintenant, parlons de l'optimisation de la conception et de l'expérience du sélecteur de langue lui-même.
Pour permettre aux visiteurs de choisir facilement leur langue préférée dans votre sélecteur de langue, vous devez vous assurer d'inclure le nom réel de la langue dans le sélecteur de langue.
Bien qu'il soit acceptable d'inclure des drapeaux dans le sélecteur de langue si vous souhaitez ajouter un élément visuel à la sélection de la langue, vous ne devriez jamais utiliser juste drapeaux.
En tant que le site web “ Les drapeaux ne sont pas des langues ” nous rappelle, les drapeaux sont des symboles pour les pays, pas pour les langues.
Par exemple, disons que vous souhaitez ajouter un drapeau pour la langue anglaise. Quel drapeau devez-vous utiliser ? Devez-vous utiliser le drapeau anglais parce que c'est de là que vient la langue ? Le drapeau britannique parce qu'il est plus reconnaissable que le drapeau anglais ? Le drapeau des États-Unis parce que les États-Unis comptent plus de locuteurs anglophones que le Royaume-Uni ?
Et qu'en est-il du drapeau pour l'hindi ? Faut-il utiliser le drapeau indien parce qu'il y a plus de 400 millions de locuteurs de l'hindi là-bas ? C'est plutôt logique... mais alors, que fait-on si l'on souhaite également proposer le bengali pour les 80 millions de locuteurs de bengali en Inde ? On ne peut pas réutiliser le drapeau indien.
Pour éliminer toute confusion, il est bien préférable d'inclure simplement le nom de la langue en texte brut, généralement tel qu'il est écrit dans cette langue. Par exemple, vous utiliseriez “ Deutsch ” et non “ German ”, car “ Deutsch ” est le terme le plus pertinent pour un germanophone.
Si vous voulez vraiment la représentation visuelle d'un drapeau, vous pouvez alors ajouter le drapeau à côté de le texte.
Les drapeaux peuvent également aider à représenter la localisation. Par exemple, si vous avez différentes versions de votre site pour les hispanophones d'Espagne et du Mexique, l'ajout du drapeau peut aider les utilisateurs à choisir leur version locale.
Si vous utilisez TranslatePress, vous pouvez facilement intégrer à la fois le nom du texte et le drapeau dans votre sélecteur de langue. Vous pouvez également désactiver facilement les drapeaux nationaux si vous ne souhaitez pas les utiliser.
Vous pouvez accéder à ces paramètres en allant dans Paramètres → TranslatePress → Sélecteur de langue Vous trouverez les options de drapeau dans l'onglet Mise en page section de chaque type de commutateur.
Pour plus de conseils, nous avons un guide complet sur l'optimisation de votre bouton de changement de langue.
3. Utiliser un modèle de site Web multilingue pour un design cohérent
Pour garantir une expérience cohérente dans toutes les langues sur votre site, veillez à utiliser le même modèle de site web multilingue de base pour chaque langue.
C'est-à-dire que vous ne voulez pas que votre site ait l'air complètement différent selon la langue qu'une personne a choisie.
Ça est bon à localisez votre site. Par exemple, vous pouvez changer les images, les icônes, les couleurs secondaires, et ainsi de suite en fonction de la langue de l'utilisateur (plus à ce sujet plus tard).
Mais en ce qui concerne la conception fondamentale de votre site web, vous ne voulez pas qu'elle change, car cela peut perturber les visiteurs lorsqu'ils voient quelque chose de complètement différent après avoir changé de langue.
Si vous utilisez WordPress, c'est très simple à mettre en place. Par exemple, lorsque vous utilisez TranslatePress pour traduire votre site WordPress, celui-ci continuera d'utiliser le même thème WordPress, quelle que soit la langue que vous choisissiez.
Mais en même temps, vous avez la possibilité d'intervenir et de modifier des détails de conception plus petits pour la localisation, comme le changement d'images.
4. Vérifiez votre design dans différentes langues pour détecter les problèmes
Lorsque vous avez créé le design de votre site web, vous avez probablement veillé à ce que tout soit juste ce qu'il faut en utilisant le texte dans votre langue d'origine.
Par exemple, vous avez peut-être traversé plusieurs tours de révision juste pour vous assurer que le titre de votre page d'accueil ne prend qu'une seule ligne sur les ordinateurs de bureau.
Malheureusement, lorsque vous traduisez votre site web dans une nouvelle langue, tout ce travail minutieux que vous avez consacré à l'optimisation de l'espacement dans votre design risque d'être altéré.
Le texte traduit peut être plus long ou plus court que le texte original, ce qui peut avoir des effets gênants sur l'espacement et la conception de votre site.
Pour en tenir compte, vous devrez vérifier votre design dans différentes langues et l'ajuster si nécessaire.
Pour la manière la plus simple d'y parvenir, vous pouvez utiliser un outil de traduction qui vous offre un aperçu visuel.
Par exemple, si vous utiliser TranslatePress pour traduire votre site, vous pourrez gérer l'ensemble de vos traductions à partir d'une interface visuelle qui vous offre un aperçu en direct de l'apparence exacte de votre site pour les visiteurs dans différentes langues :
Cela vous permet d'apporter facilement des modifications si nécessaire pour créer le design parfait, quelle que soit la langue dans laquelle une personne navigue.
5. Vérifier la compatibilité des polices et les problèmes d'encodage
Un autre détail de conception que vous voudrez revérifier concerne d'éventuels problèmes de compatibilité ou d'encodage de vos polices.
Si toutes vos langues utilisent l'alphabet latin, vous risquez peu de rencontrer des problèmes. Cependant, une fois que vous allez au-delà de cela, il est important de vous assurer que votre police est compatible avec toutes les langues de votre site.
Par exemple, toutes les polices ne prennent pas en charge l'alphabet cyrillique, ce qui peut poser problème si vous traduisez votre contenu dans des langues slaves (comme le russe).
Vous pouvez trouver un certain nombre d'outils utiles qui vous permettent de vérifier la compatibilité d'un fichier de police. Voici quelques bonnes options :
- Underware.nl – utilise une carte pour vous montrer la compatibilité de votre police. Ce n'est pas parfait car, comme nous l'avons discuté plus haut, les pays ne sont pas des langues. Mais cela vous donne tout de même une assez bonne idée de la couverture d'une police en un seul coup d'œil. En dessous, vous pouvez obtenir un aperçu beaucoup plus détaillé de sa couverture.
- Vérificateur de jeu de caractères alphabétiques – une option plus complexe et personnalisable qui vous permet de sélectionner des langues spécifiques.
Par exemple, voici les résultats pour la police populaire Roboto (en gras) provenant de l'outil Underware.nl :
Certaines plateformes de polices d'écriture vous fourniront également des outils pour prévisualiser/télécharger des polices dans différentes langues. Par exemple, Google Fonts vous permet de choisir une langue pour voir les polices qui prennent en charge cette langue (et d'afficher un texte de prévisualisation dans cette langue) :
Enfin, vous devez également utiliser l'encodage UTF-8, ce qui contribuera à garantir que les caractères spéciaux d'une langue s'affichent quoi qu'il arrive.
Si vous utilisez WordPress, il devrait automatiquement utiliser l'encodage UTF-8 sans aucune intervention de votre part. Cependant, pour les sites web créés sur mesure, vous devrez peut-être spécifier manuellement l'UTF-8.
6. Ajuster les images et les icônes pour la localisation
La localisation de sites web est une pratique exemplaire importante en matière de conception de sites web multilingues pour garantir une expérience optimisée aux visiteurs de différents endroits.
Alors que la traduction consiste à traduire votre contenu dans la nouvelle langue, la localisation consiste à mettre à jour d'autres détails de conception pour qu'ils correspondent.
Par exemple, disons que vous avez une page où vous souhaitez afficher un monument célèbre dans chaque pays. Pour la version anglaise/américaine de la page, vous pourriez avoir la Statue de la Liberté.
Cependant, si vous traduire cette page en français, cela n'aurait pas vraiment de sens de garder cette même image. À la place, vous pourriez la remplacer par la Tour Eiffel. Cela créerait une expérience plus “ locale ” pour les visiteurs français.
Au-delà des images, vous souhaiterez peut-être localiser d'autres éléments visuels, tels que les icônes utilisées par votre site.
En gros, pensez à tous les éléments visuels de votre site et demandez-vous s'il serait possible d'améliorer l'expérience utilisateur en modifiant ces éléments en fonction de la langue de l'utilisateur.
Si vous utilisez TranslatePress, voici comment vous pouvez traduire des images et d'autres éléments visuels.
7. Ajuster les formats si nécessaire (date, heure, etc.)
Pour un autre aspect important de la localisation de la conception de sites Web, vous voudrez également ajuster le format de divers contenus de votre site, tels que les dates, les heures, etc.
L'exemple le plus courant serait des formats de date différents – par exemple. mois/jour/année contre /jour/mois/année.
Certaines langues peuvent également utiliser des formats d'heure différents, par exemple un format sur 12 heures ou sur 24 heures.
Si vous utilisez l'un de ces formats dans votre conception, vous voudrez les mettre à jour en fonction de la langue de l'utilisateur.
8. S'adapter aux langues de droite à gauche si nécessaire
Ce dernier conseil de conception de site web multilingue ne s'applique pas à tous les sites web. Cependant, si vous souhaitez proposer votre site dans des langues de droite à gauche en plus des langues de gauche à droite, cela nécessitera évidemment quelques ajustements de conception.
Voici quelques modifications de conception courantes que vous devrez apporter pour prendre en compte les langues de droite à gauche :
- Aligner le texte à droite au lieu de le faire à gauche.
- Mettre en miroir certaines icônes si nécessaire (seulement si la signification de l'icône change en fonction de sa direction).
- Mise à jour des images pour une lecture de droite à gauche si nécessaire.
- Modification des champs de formulaire et de l'alignement.
- Modification de la disposition de l'en-tête (par exemple, placez le logo sur le côté droit au lieu du côté gauche comme il est d'usage avec les langues de gauche à droite).
- Aligner les fils d'Ariane à droite au lieu de la gauche.
En gros, vous voudrez penser à inverser bon nombre d'éléments de votre site pour les faire passer d'un alignement à gauche à un alignement à droite.
Créez la conception de site Web multilingue parfaite dès aujourd'hui
Créer un site web multilingue est un excellent moyen d'offrir une meilleure expérience utilisateur aux visiteurs multilingues et entrer en contact avec plus de visiteurs en premier lieu grâce à SEO multilingue.
Cependant, si vous voulez tirer le meilleur parti de vos efforts de traduction, vous devez suivre quelques bonnes pratiques importantes en matière de conception de sites Web multilingues.
La mise en œuvre de ces pratiques garantira à vos visiteurs une excellente expérience sur votre site, quelle que soit la langue dans laquelle ils naviguent.
Si vous avez créé votre site avec WordPress, vous pouvez utilisez le plugin gratuit TranslatePress pour créer un site Web multilingue qui respecte toutes ces bonnes pratiques. Non seulement il vous offre tous les outils dont vous avez besoin pour traduire et localiser entièrement votre site, mais il utilise également une interface visuelle pour vous permettre de lier facilement la conception de votre site Web à vos traductions.
Si vous souhaitez commencer, consultez notre guide sur Comment créer un site WordPress multilingue.
Si vous avez une boutique WooCommerce, nous avons également un guide sur la création d'une boutique WooCommerce multilingue.
TranslatePress Multilingue
Avez-vous encore des questions sur la conception de sites Web multilingues ou sur les meilleures pratiques en la matière ? Faites-le-nous savoir dans les commentaires !
Si vous avez trouvé ce message utile, consultez notre Chaîne YouTube, où nous téléchargeons constamment des tutoriels vidéo courts et faciles à suivre. Vous pouvez également nous suivre sur Facebook et Twitter pour être le premier à savoir chaque fois que nous publions.
Merci ! C'est une description informative mais simple. En tant que membre de Contenteam, les gars qui localisent des sites web, je tiens à ajouter que toute l'attention portée à la traduction et au design est toujours récompensée. Et oui, le problème avec cet indicateur de langue – il me semble logique de le placer dans le coin. Et assurez-vous qu'il fonctionne, car il est parfois impossible de le déplier.