Share
Proposer du contenu en plusieurs langues peut ajouter de nombreuses nouvelles couches de complexité à la conception Web. Traduire des articles n’est que le premier obstacle; structurer un site Web multilingue peut être assez difficile. Pour vous aider à bien faire les choses, je vais vous donner quelques conseils et partager certaines de nos expériences chez Tuts + pour devenir multilingues..
Le premier conseil n'est pas vraiment lié à la conception Web, mais il est néanmoins important. Lorsque vous proposez un contenu en plusieurs langues, il est préférable de ne pas utiliser de logiciel de traduction. Ne vous méprenez pas, des outils tels que Google Translate sont faciles à utiliser et s'améliorent constamment, mais la précision du texte traduit varie (nous en avons même parfois manqué à Tuts +!).
Des initiatives telles que la communauté Google Translate affinent la manière dont les traductions sont effectuées.Pour cette raison, c'est une bonne idée de faire appel à un traducteur humain. Soit vous choisissez un service payant comme Fliplingo, soit utilisez des plates-formes de traduction gérées par la communauté comme Native, selon votre projet. Les humains ont une meilleure connaissance du vocabulaire local et des nuances subtiles du langage. Au moment de la rédaction de ce document, les logiciels automatisés n’ont pas encore atteint ce stade..
Chez Tuts +, nous remercions nos lecteurs d’avoir traduit nos tutoriels..
Un site Web multilingue est inutile sans la possibilité de changer de langue. Souvent, les sites Web multilingues utilisent un menu déroulant, placé en haut à droite de la page (pour le contenu de gauche à droite, le coin supérieur gauche convient mieux). Vous pouvez également trouver des commutateurs dans le pied de page (l'approche choisie par IBM.com). Quel que soit le modèle choisi, assurez-vous que le menu déroulant est facile à voir et à consulter..
Chez Tuts + nous utilisons un sélectionner élément dans les méta-détails de la publication, plus une liste dans la barre latérale pour s’assurer que les bases sont couvertes:
Si vous choisissez d’utiliser un élément sélectionné, le W3C vous recommande quelques directives utiles..
Les drapeaux sont très souvent utilisés pour indiquer une langue. Cependant, je suis d'accord avec Gunnar Bittersmann, en ce sens que je ne suis pas un grand fan des drapeaux pour les gens qui changent de langue. Considérez les raisons suivantes:
Par exemple:
https://www.duolingo.comLes Duolingo défendent leur utilisation du drapeau brésilien car ils enseignent le portugais brésilien. Mais leur variante de l'espagnol est plus proche de l'espagnol d'Amérique latine que de Castellano (espagnol traditionnel), de sorte que l'utilisation de drapeaux ici est incohérente et déroutante..
Il est préférable de faire référence à une langue dans sa propre langue, par exemple "Deutsch" au lieu de "Allemand". La commande alphabétique des langues aidera également, de sorte que les utilisateurs peuvent facilement trouver la bonne version. Jetez un coup d'œil à l'encadré de Wikipedia pour vous inspirer.
Certains sites Web redirigent les utilisateurs vers la page d'accueil lorsqu'ils changent de langue. Cela peut être déroutant, car les utilisateurs doivent alors retrouver la page. Pour que vos visiteurs soient heureux, assurez-vous, dans la mesure du possible, que la même page (traduite) leur soit présentée lorsqu'ils changent de langue..
Vous souhaitez définir une langue par défaut pour les visiteurs novices? Il est possible de détecter la langue de l'utilisateur et d'afficher automatiquement la page dans la langue préférée de l'utilisateur. Cependant, ne masquez pas les autres options, au cas où l'utilisateur souhaite changer.
En savoir plus sur Smashing Magazine: Si vous demandez à l'utilisateur ou à son navigateur?
Votre contenu doit être lisible, assurez-vous donc que l'encodage des caractères dans l'en-tête de la page est correctement défini:
Du W3C:
«Un codage Unicode tel que UTF-8 peut prendre en charge de nombreuses langues et peut accueillir des pages et des formulaires dans n’importe quel mélange de ces langues.»
Ensuite, considérez les polices réelles: votre police Web doit être compatible avec toutes les langues que vous prenez en charge, en particulier pour les langues autres que celles basées sur le latin. Cela signifie que la police utilisée doit contenir tous les caractères et glyphes dont vous avez généralement besoin. Certaines langues comportent des centaines de caractères, ce qui rend les fichiers de polices très lourds. Pensez donc à affiner les groupes de caractères que vous incluez dans les fichiers..
Plusieurs sites Web proposent des polices basées sur des caractères non latins, tels que typebank.co.jp, et une recherche rapide sur Google vous aidera à trouver d'autres alternatives..
https://www.typebank.co.jpIl y a aussi d'autres considérations typographiques. N'oubliez pas que certaines langues sont plus “verbeuses” et prennent donc plus de place. Un bouton "ajouter au panier" pourrait être traduit en néerlandais en "aan winkelwagen toevoegen". La version anglaise est composée de 11 caractères, la version néerlandaise 25 occupant deux fois plus de place. Lorsque l'espace est limité, vous pouvez essayer une traduction différente, moins littérale, ou modifier la taille de la police en fonction de la langue..
D'autres polices non latines peuvent nécessiter une hauteur de ligne ou une taille de caractère différente de celle définie par défaut en latin. Les caractères chinois, par exemple, sont visuellement plus complexes que les caractères latins, ce qui signifie qu'ils doivent être suffisamment grands pour permettre une distinction claire. Ces facteurs peuvent modifier considérablement l'apparence de la page, alors gardez-les à l'esprit..
Voici quelque chose que vous ignorez peut-être: les langues n’ont pas de sens, mais le scénario ils sont écrits en biches. Par exemple, l'azéri (parlé par le peuple azerbaïdjanais) peut être écrit avec des écritures latines ou cyrilliques, auquel cas il est écrit LTR (de gauche à droite). Alternativement, il peut être écrit en écriture arabe, auquel cas il est écrit RTL (de droite à gauche).
La plupart des langues utilisent des scripts écrits et lus de gauche à droite, mais dans le cas contraire, il est utile de refléter la mise en page de l'ensemble de la page Web. Oui, la mise en page entière. Texte, images, navigation, barres latérales, boutons, menus déroulants, barres de défilement… doivent tous être mis en miroir.
Tom Maslen explique comment l'équipe de la BBC a utilisé Sass pour les aider à utiliser des dispositions bidirectionnelles:
Pour le contenu, spécifiez la direction du texte via le dir = "rtl" attribut. Cet attribut est pris en charge par tous les principaux navigateurs. Voici un exemple HTML:
Ou utilisez CSS:
.content direction: rtl; /* De droite à gauche */
Un des pièges rencontrés chez Tuts + consistait à intégrer des extraits de code en ligne. dans Texte RTL (tel que dans les traductions arabe, farsi et hébreu). Le texte lit RTL, mais le code en ligne doit rester LTR. Dans cet exemple, le code en ligne doit toujours être lu html, body width: 100%; :
Après l'original anglais, vous pouvez voir ce qu'il advient du code en ligne dans le deuxième exemple. L'exemple 3 essaye de remplacer cela en spécifiant:
.code arabe direction: ltr;
mais, comme vous pouvez le constater, ses effets sont minimes, voire nuls. C'est là que le unicode-bidi la propriété entre. Jumelé avec le intégrer valeur, cela nous aide à remplacer la direction calculée par le navigateur pour les éléments incorporés. L'exemple 4 montre que cela a fonctionné:
.code arabe direction: ltr; unicode-bidi: incorporer;
Il existe plusieurs façons de structurer les URL de sites Web multilingues. Chaque option a des avantages et des inconvénients.
Un domaine de premier niveau de code de pays (ccTLD) est lié à un pays spécifique, tel que .fr pour la France et .es pour l'Espagne.
Les ccTLDs indiquent clairement aux moteurs de recherche qu'un site Web cible les utilisateurs de ce pays. L'emplacement du serveur n'est pas pertinent et il est facile de séparer des sites Web. Les principaux inconvénients sont la disponibilité des domaines et les coûts supplémentaires.
Certaines extensions de domaine ne sont pas liées à un pays ou une région. Le plus populaire est .com, mais il existe d'autres domaines de premier niveau génériques fréquemment utilisés, tels que .net et .org..
Ces gTLD peuvent être utilisés en combinaison avec un sous-domaine, par exemple fr.website.com. Il est facile à configurer et la plupart des moteurs de recherche comprennent ce type de ciblage géographique. Cependant, les utilisateurs peuvent ne pas toujours reconnaître la langue du contenu en fonction de l'URL.
Les sous-répertoires sont la contrepartie des sous-domaines. Ils sont souvent utilisés pour structurer le contenu (par exemple, website.com/blog ou website.com/tshirts), mais peuvent également être utilisés à des fins de géo-ciblage. Dans ce cas, nous utilisons website.com/fr pour structurer nos URL..
Avec cette technique, tout peut être hébergé sur le même serveur. La configuration est très simple et vous pouvez utiliser la console de recherche Google pour identifier les différentes langues. Un inconvénient est que les utilisateurs risquent de ne pas reconnaître le ciblage géographique à partir de l'URL uniquement (par exemple, Webshop.com/de/ est-il en allemand ou non?)
Enfin, il existe des paramètres d'URL, par exemple website.com?country=it. Les paramètres d'URL ne sont pas recommandés, car ils sont difficiles à interpréter pour les moteurs de recherche..
Personnellement, j'aime utiliser des sous-répertoires en combinaison avec un gTLD. Les sous-domaines sont principalement utilisés pour séparer un contenu complètement différent. Les sites Web multilingues étant essentiellement la traduction du même contenu (la plupart du temps), les sous-répertoires sont une solution évidente..
Vous pouvez utiliser la langue dans l'URL, par exemple:
Ou combinez la langue et l'emplacement:
Pour éviter les problèmes de contenu en double, il est préférable d'identifier une version préférée pour chaque langue / emplacement. Nous pouvons utiliser un simple élément de lien HTML pour cela, à savoir rel = "alternate" hreflang = "x". Plusieurs hreflang les balises doivent être utilisées sur une page; celui qui se référence et un lien vers chaque alternative.
Sur une page Web, ce code pourrait ressembler à ceci:
Ce code indique aux moteurs de recherche que example.com cible les anglophones du Royaume-Uni. Il indique également qu'il existe deux variantes du même contenu, l'une pour les États-Unis et l'autre pour l'Australie..
Lors de la conception de sites Web multilingues, plusieurs autres éléments doivent être pris en compte, tels que:
Tous les pays n'utilisent pas le même format de date. Parfois, vous devrez convertir des dates du calendrier grégorien en, par exemple, le calendrier persan..
Les pays ont des points de vue éthiques différents. La sexualité, l'humour, le symbolisme, etc., sont des aspects culturels spécifiques qui sont facilement négligés lors de la traduction d'un site Web. Par exemple: dans certains pays, il est parfaitement acceptable de montrer une photo d'un couple gay, alors que d'autres pays pourraient trouver cela offensant..
Utilisez-vous un captcha sur votre site web? Assurez-vous qu'il est dans la même langue que le contenu de la page. En tant que visiteur britannique, il est peu probable que vous souhaitiez résoudre un captcha russe.
Parce qu'ils ne sont pas déjà assez difficiles… Aidez vos visiteurs avec les numéros de téléphone de votre site Web en incluant le code du pays. Vous pouvez trouver une liste de tous les codes de pays sur cette page.
Lors de la préparation d’un site Web pour une internationalisation complète, de nombreuses autres considérations doivent être prises en compte, mais ces indications vous auraient fourni une bonne base de travail. Dites-nous, dans les commentaires, quels autres conseils avez-vous pour la conception de sites Web multilingues et inscrivez-vous à la newsletter de Tuts + Translation Project si vous souhaitez savoir ce que nous faisons!
Accentsconagua