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.

Transcript

1. Internationalization-ing
   Victoria Gonda
   @TTGonda | victoriagonda.com
   

   View Slide

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

   View Slide

3. i18n
   @TTGonda | victoriagonda.com
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Watch iconography
   semantics
   @TTGonda | victoriagonda.com
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Localization
    @TTGonda | victoriagonda.com
    

    View 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 Slide

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

    View Slide

15. Android
    context.getString(R.string.greeting)
    OR
    
    @TTGonda | victoriagonda.com
    

    View 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 Slide

17. react-localization1
    
    {strings.greeting}
    
    1 https://www.npmjs.com/package/react-localization
    @TTGonda | victoriagonda.com
    

    View Slide

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

    View Slide

19. Localization Tools
    @TTGonda | victoriagonda.com
    

    View Slide

20. @TTGonda | victoriagonda.com
    

    View Slide

21. @TTGonda | victoriagonda.com
    

    View 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 Slide

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

    View Slide

24. Abbreviations
    and Formats
    @TTGonda | victoriagonda.com
    

    View Slide

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

    View Slide

26. Avoid idioms
    @TTGonda | victoriagonda.com
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. Bi-Directional Isolation tag2
    User إ
    ﯾ
    ﺎ
    ن : 90 points
    2 https://www.w3schools.com/tags/tag_bdi.asp
    @TTGonda | victoriagonda.com
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

38. Iconography
    Semantics
    @TTGonda | victoriagonda.com
    

    View Slide

39. Use icon meaning
    @TTGonda | victoriagonda.com
    

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide