Learns from going local(e)

An overview of internationalization and localization, as well as why it's worth the effort!

Corresponding video: https://www.youtube.com/watch?v=bHbYpCrLAcU&t=11s

Resources:
https://www.smashingmagazine.com/2012/07/12-commandments-software-localization/
https://www.smartling.com/blog/localization-what-it-really-means-for-your-business/
http://clearwordstranslations.com/difference-localization-translation/

Transcript

1. 1 Learnings from going local(e) Sandya Sankarram @sandyaaaas DonutJS
2. 2 Localization isn’t just translation
3. 3 Going locale means tailoring experiences to local expectations.
4. 4 Localization Adapting an application to the needs of a locale.
5. 5 Locale A set of parameters that dictate the user’s preferred time, date, currency, collation (sorting) and language conventions. fr-FR, en-US, pt-BR
6. 6 Language paints a partial picture of local expectations Do not conflate locale and language. Portuguese in Brazil (R$) and Portugal (€). French in Canada (C$) and France(€).
7. 7 Internationalization Designing a product to be easily adapted to a specific locale. It is the enablement of localization. Internationalization, or i18n Localization, or l10n
8. 8 Internationalization is easiest when it’s a part of the roadmap from the start ...but let’s be real
9. 9 Planning Have we done the prework? What can we accomplish in the time we have? What locales will we support? Who will translate?
10. 10 Fix inflexible layouts String expansion is when copy expands in the target language. You want dynamic space distribution, not magic numbers. English: up or down French: vers le haut ou le bas
12. 12 Do not hardcode heights and widths!
13. 13 Flexible container height and width!
14. 14 Before and After
15. 15 Before and After
16. 16 BEM Block (.button) Element (.button_label) Modifier (.button--pink)
18. 18 Other gotchas US-specific media Forced capitalization in CSS Hardcoded formatting
19. 19 Choose localization library What are your must haves? - Works with React - Variables - Pluralization - Formatting - JSON translation files - Active developer community
20. 20 React-Intl
21. 21 React-Intl
22. 22 Include only what’s needed Don’t do this! or this!
23. 23 Include only what you need Webpack.config.js
29. 29 Tag copy - Denote it needs translating - Display correct translation
30. 30 String concatenation
31. 31 Extract copy and translate en-US.json fr-fr.json de-de.json zh-tw.json ... Your app Translators
32. 32 en-US.json { “hello”: “Hello!” } fr-FR.json { “hello”: “Bonjour!” }
33. 33 View translations in context Test in every locale you offer. Modify Headers for Google Chrome™
34. 34 Repeat, every time! Now that your app is localized, you will need to do all this each time you deliver a feature
38. 38 Why should we care?
39. 39 Let’s remove barriers
40. 40 eating donuts; didn’t listen - Translation is one part of localization - Gotta i18n-ize before you l10n-ize - Avoid US-centric design choices and formatting - L10n is important
41. 41 Thank you! sandya.sankr@gmail.com @sandyaaaas