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
2. What is Internationalization? @TTGonda | victoriagonda.com
3. i18n @TTGonda | victoriagonda.com
4. Localization (l10n) @TTGonda | victoriagonda.com
5. Support Right-to-Left (RTL) @TTGonda | victoriagonda.com
6. Use mindful abbreviations and formats @TTGonda | victoriagonda.com
7. Watch iconography semantics @TTGonda | victoriagonda.com
8. Why Internationalize Your App @TTGonda | victoriagonda.com
9. Makes the product accessible to more people @TTGonda | victoriagonda.com
10. Makes it more comfortable for others @TTGonda | victoriagonda.com
11. Makes a higher quality app @TTGonda | victoriagonda.com
12. Localization @TTGonda | victoriagonda.com
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
14. Android values/strings.xml <string name="greeting">Hello, %s</string> values-es/strings.xml <string name="greeting">Hola, %s</string> @TTGonda | victoriagonda.com
15. Android context.getString(R.string.greeting) OR <TextView android:text="@string/greeting" /> @TTGonda | victoriagonda.com
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
17. react-localization1 <Text> {strings.greeting} </Text> 1 https://www.npmjs.com/package/react-localization @TTGonda | victoriagonda.com
18. Translating → Internal → Open source → Service @TTGonda | victoriagonda.com
19. Localization Tools @TTGonda | victoriagonda.com
20. @TTGonda | victoriagonda.com
21. @TTGonda | victoriagonda.com
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
23. Locale safe text manipulation "TITLE".toLowerCase() -> "title" in English "TITLE".toLowerCase() -> "tıtle" in Turkish @TTGonda | victoriagonda.com
24. Abbreviations and Formats @TTGonda | victoriagonda.com
25. Not everyone uses and knows the same abbreviations @TTGonda | victoriagonda.com
26. Avoid idioms @TTGonda | victoriagonda.com
27. People prefer different formats @TTGonda | victoriagonda.com
28. Display the user's currency @TTGonda | victoriagonda.com
29. Right-To-Left @TTGonda | victoriagonda.com
30. Support right aligned text @TTGonda | victoriagonda.com
31. Bi-Directional Isolation tag2 User <bdi> إ ﯾ ﺎ ن </bdi>: 90 points 2 https://www.w3schools.com/tags/tag_bdi.asp @TTGonda | victoriagonda.com
32. Also reverse parts of layouts and breadcrumbs @TTGonda | victoriagonda.com
33. Use start/end over left/ right @TTGonda | victoriagonda.com
34. Reverse directional icons and icons showing text direction @TTGonda | victoriagonda.com
35. Try it out → Chrome: chrome://flags/#force-ui-direction → Android: Developer settings @TTGonda | victoriagonda.com
36. RTL emoticon example3 3 https://youtu.be/xpumLsaAWGw @TTGonda | victoriagonda.com
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
38. Iconography Semantics @TTGonda | victoriagonda.com
39. Use icon meaning @TTGonda | victoriagonda.com
40. Symbols might not mean the same thing in all cultures @TTGonda | victoriagonda.com
41. Watch for icons with currency and letters @TTGonda | victoriagonda.com
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
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
44. Thanks Victoria Gonda @TTGonda | victoriagonda.com @TTGonda | victoriagonda.com