i18n

Internationalisation des sites

Codeurs en Seine 2016

Nicolas Hoffmann / @Nico3333fr

 
 
 

Mais Genève, c’est surtout…

  • Une capitale diplomatique
  • 22 organisations internationales et plus de 250 organisations non gouvernementales (ONG)
  • Une ville cosmopolite
  • Bref, un excellent vivier pour l’internationalisation

Une citation

Lancer son site à l’international, facile ?
Oui, si l’on pense à tout !

Paris Web 2016, Aurélie Guillaume

L’internationalisation des sites ?

  • Souvent cela fait peur…
  • … alors que c’est une destination exotique !
  • L’occasion de découvrir et d’apprendre

Mon objectif

  • Vous amener à réfléchir à ce sujet
  • Montrer que cela peut se faire à plusieurs vitesses
  • Voir comment cela impacte (tous) nos métiers…

=> Make i18n great again ©

Petit plan de bataille

  1. Quelques fondamentaux
  2. Côté design
  3. Côté inté/dév. front (avec du RTL)
  4. Côté dév. back
  5. Côté contenus/CP
  6. Fini de rire : pour aller plus loin !

Quelques fondamentaux

UTF-8, sinon c’est la f�te ! Et le désarroi ensuite.

Lire sur Openweb : Changer de jeu de caractères pour UTF-8

Quelques fondamentaux

«L’attwibiou» lang !

Attention aux faux-amis : i18n Checker, W3c Validator, Language subtag lookup

Côté design

La question n’est pas de savoir si ça va varier en i18n, mais quand et comment !

=> faites des designs qui tolèrent les variations

 

Bref

  • De l’air et de la souplesse, que diable !
  • Lâchez prise
  • Attention aux éléments de graphisme qui vont changer
  • Vivent les webfonts…

Webfonts, au fait…

Les accents avec la typo Bebas

Dis, ta typo-là…

Côté inté/dév. front

« Votre intégration doit tolérer la différence »

  • Utilisez le flux
  • Évitez les postulats et les chiffres magiques
  • KISS = Keep It Simple and Smart

Surqualité, danger !

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(ja) > q {
  quotes: "\300c" "\300d" "\300e" "\300f";
}
q:before { content: open-quote; }
q:after { content: close-quote; } 

Surqualité, danger !

Une citation en français

An english quote

日本の引用

Bien d’y penser, mais n’en faites pas trop !

Les sites en Right-To-Left

Inversion pas seulement des contenus…
mais du sens de lecture !

Toute notion gauche/droite ou suivant/précédent à prendre en compte

Exemple en LTR…

ESOMAR Japan (esomar.jp)

Exemple en RTL

ESOMAR Arabic

RTL : plusieurs méthodes

  • CSS dédiée uniquement RTL/pour la surcharge RTL
  • Simple surcharge dans la même CSS
[dir="rtl"] .element { … }

RTL : en pratique

  • float: left => float: right
  • Si spécifié, text-align à inverser
  • Absolu/fixé : left: 0;
    => right: 0; left: auto;

RTL : en pratique (suite)

  • Positionnements dans le flux (inline, inline-block, table-layout, flexbox, etc.) : no problemo !
  • Les animations !
  • margin/padding - left/right !
  • Attention aux helpers, aux surcharges, etc.

RTL (encore)

Exemple rigolo !

Adaptation RTL de flèches

RTL : hé oui !

Notion de précédent/suivant (droite/gauche) au clavier en JS !

¯\_(ツ)_/¯

Etc. voir Introduction à la localisation, RTL et LTR

Passons au dév. back

Attention aux idées toutes faites !

Voir une excellente ressource : Liste d’articles i18n W3c

Gestion des noms/prénoms

Évitez les hypothèses sur la longueur

Attention, certaines cultures n’ont pas de noms, d’autres des surnoms (Thaïlande), d’autres pas de Melle/M./Mme

Nom du mari/épouse/jeune fille/précédent

Des champs supplémentaires ?

Aux US, pensez à rajouter le champ « State ».

Des adresses n’ont pas forcément de noms de rues, peuvent être longues, etc.

Le temps !

Site événementiel/livestream :
précisez la timezone (CST, CET, etc.)

Stocker les dates en temps UTC (Z), adapter en local

Heures d’hiver/été, fuseaux horaires, etc.

Time and date, Le temps c’est compliqué

Les chiffres/devises

CHF 1'291.-, USD 1.25, EUR 1 337,99
CAD 1,234, AED 1٬234٫99 (momayyez)

Decimal Mark, Liste des monnaies

Traductions

Systèmes de traduction/contenus, selon votre cas de figure

Objectif : centraliser vos textes/contenus

La gestion des contenus

  • Pensez à traduire TOUS vos contenus…
  • … vraiment TOUS vos contenus…
  • … vraiment TOUT, j’insiste !
  • Juré, craché ?

Du vécu…

  • Un lien « Contactez-nous »
  • Traduttore = traditore :)
  • Crime de lèse-majesté
  • Politesse chinoise
Fatigue du chat

Organisez-vous !

  • Donnez le contexte, centralisez
  • Dés-ambiguïsez vos textes/contenus
  • Vérifiez si possible in situ
  • Idéalement, vérifiez avec quelqu’un du cru

Fini de rire !

Plus possible d’improviser.

  • Attention au légal = renseignez-vous !
  • Commerce : TVA, TVA intra-communautaire (Europe), frais de port/douane, etc.
  • Google n’est pas dispo/n°1 partout…
  • Great Firewall !
  • Sensibilités locales

Trouvez des partenaires ou de l’info avant.

Conclusion

You + i18n = ♥

Ressources

Danke very beaucoup !

Pour discuter :
Nicolas Hoffmann / @Nico3333fr