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. Internationalization-ing
    Victoria Gonda
    @TTGonda | victoriagonda.com

    View full-size slide

  2. What is
    Internationalization?
    @TTGonda | victoriagonda.com

    View full-size slide

  3. i18n
    @TTGonda | victoriagonda.com

    View full-size slide

  4. Localization (l10n)
    @TTGonda | victoriagonda.com

    View full-size slide

  5. Support Right-to-Left
    (RTL)
    @TTGonda | victoriagonda.com

    View full-size slide

  6. Use mindful
    abbreviations and
    formats
    @TTGonda | victoriagonda.com

    View full-size slide

  7. Watch iconography
    semantics
    @TTGonda | victoriagonda.com

    View full-size slide

  8. Why Internationalize
    Your App
    @TTGonda | victoriagonda.com

    View full-size slide

  9. Makes the product
    accessible to more
    people
    @TTGonda | victoriagonda.com

    View full-size slide

  10. Makes it more
    comfortable for others
    @TTGonda | victoriagonda.com

    View full-size slide

  11. Makes a higher quality
    app
    @TTGonda | victoriagonda.com

    View full-size slide

  12. Localization
    @TTGonda | victoriagonda.com

    View full-size slide

  13. 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

    View full-size slide

  14. Android
    values/strings.xml
    Hello, %s
    values-es/strings.xml
    Hola, %s
    @TTGonda | victoriagonda.com

    View full-size slide

  15. Android
    context.getString(R.string.greeting)
    OR

    @TTGonda | victoriagonda.com

    View full-size slide

  16. 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

    View full-size slide

  17. react-localization1

    {strings.greeting}

    1 https://www.npmjs.com/package/react-localization
    @TTGonda | victoriagonda.com

    View full-size slide

  18. Translating
    → Internal
    → Open source
    → Service
    @TTGonda | victoriagonda.com

    View full-size slide

  19. Localization Tools
    @TTGonda | victoriagonda.com

    View full-size slide

  20. @TTGonda | victoriagonda.com

    View full-size slide

  21. @TTGonda | victoriagonda.com

    View full-size slide

  22. 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

    View full-size slide

  23. Locale safe text manipulation
    "TITLE".toLowerCase() -> "title" in English
    "TITLE".toLowerCase() -> "tıtle" in Turkish
    @TTGonda | victoriagonda.com

    View full-size slide

  24. Abbreviations
    and Formats
    @TTGonda | victoriagonda.com

    View full-size slide

  25. Not everyone uses and
    knows the same
    abbreviations
    @TTGonda | victoriagonda.com

    View full-size slide

  26. Avoid idioms
    @TTGonda | victoriagonda.com

    View full-size slide

  27. People prefer different
    formats
    @TTGonda | victoriagonda.com

    View full-size slide

  28. Display the user's
    currency
    @TTGonda | victoriagonda.com

    View full-size slide

  29. Right-To-Left
    @TTGonda | victoriagonda.com

    View full-size slide

  30. Support right aligned
    text
    @TTGonda | victoriagonda.com

    View full-size slide

  31. Bi-Directional Isolation tag2
    User إ


    ن : 90 points
    2 https://www.w3schools.com/tags/tag_bdi.asp
    @TTGonda | victoriagonda.com

    View full-size slide

  32. Also reverse parts of
    layouts and breadcrumbs
    @TTGonda | victoriagonda.com

    View full-size slide

  33. Use start/end over left/
    right
    @TTGonda | victoriagonda.com

    View full-size slide

  34. Reverse directional icons
    and icons showing text
    direction
    @TTGonda | victoriagonda.com

    View full-size slide

  35. Try it out
    → Chrome: chrome://flags/#force-ui-direction
    → Android: Developer settings
    @TTGonda | victoriagonda.com

    View full-size slide

  36. RTL emoticon example3
    3 https://youtu.be/xpumLsaAWGw
    @TTGonda | victoriagonda.com

    View full-size slide

  37. "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

    View full-size slide

  38. Iconography
    Semantics
    @TTGonda | victoriagonda.com

    View full-size slide

  39. Use icon meaning
    @TTGonda | victoriagonda.com

    View full-size slide

  40. Symbols might not mean
    the same thing in all
    cultures
    @TTGonda | victoriagonda.com

    View full-size slide

  41. Watch for icons with
    currency and letters
    @TTGonda | victoriagonda.com

    View full-size slide

  42. 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

    View full-size slide

  43. 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

    View full-size slide

  44. Thanks
    Victoria Gonda
    @TTGonda | victoriagonda.com
    @TTGonda | victoriagonda.com

    View full-size slide