Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Internationalization-ing

 Internationalization-ing

Many apps cater to users across the world. When most people think about making their app accessible in other countries, they think about providing language translations. However, there’s much more to internationalization (i18n) than localizing your strings. When providing for a global audience, you also have to consider layouts, iconography, and cultural interpretation. You’ll leave this talk with the tools you need to make your app reach people around the world.

Victoria Gonda

November 05, 2020
Tweet

More Decks by Victoria Gonda

Other Decks in Programming

Transcript

  1. Localization → Often the most obvious part of i18n →

    Requires each of your user facing strings are referenced from a string resources file → Then there are alternates for each of these strings for each language you support @TTGonda | victoriagonda.com
  2. react-localization1 let strings = new LocalizedStrings({ en:{ greeting:"Hello, {0}" },

    es: { greeting:"Hola, {0}" } }); 1 https://www.npmjs.com/package/react-localization @TTGonda | victoriagonda.com
  3. Localization with an API → Set language from device or

    let user pick → Inform API of language. → Use that language to fetch from your translation file @TTGonda | victoriagonda.com
  4. Bi-Directional Isolation tag2 User <bdi> إ ﯾ ﺎ ن </bdi>:

    90 points 2 https://www.w3schools.com/tags/tag_bdi.asp @TTGonda | victoriagonda.com
  5. "Wait, it does ??tahW: How supporting Right-to-Left can expose your

    bad UX" by Moriel Schottlender3 3 https://youtu.be/xpumLsaAWGw @TTGonda | victoriagonda.com
  6. Testing → Change language in browser or on device →

    Try RTL → Ask someone from another part of the world or who speaks another language to try your app @TTGonda | victoriagonda.com
  7. Some links → Short i18n Checklist: https://w3c.github.io/i18n- drafts/techniques/shortchecklist.html → Specifications:

    https://www.w3.org/International/ techniques/developing-specs → i18n checker: http://validator.w3.org/i18n- checker/ @TTGonda | victoriagonda.com