Developing for the Rest of the World

Many businesses are looking for growth outside the United States and Europe. To capture these new markets dedicated engineering effort will be required. This talk will provide tips for developing apps intended for an international audience.

This talk will cover:

* Process of translating app
* Supporting RTL for Arabic, Farsi, Hebrew, and Urdu speaking users
* Accepting payments in regions where credit card penetration is low
* Performance on low end networks. Specifically covering Twitter’s move from PNG/JPEG to PJPEG.

The content of this talk are derived from experiences at Twitter, interviews with app developers in MENA region, and Google Android guidelines.

Transcript

1. Developing for the Rest of the World @EricFrohnhoefer
 October 2016
2. Twitterkit Twitter Digits
3. 1. #Localization 2. #RTL 3. #Testing 4. #Payments 5. #PerfMatters Agenda
4. Everyone Doesn’t Speak English #Localization
5. Market size and opportunity Local pricing and financial factors Competitive landscape Identify target languages and locales Localization Checklist — Google
6. Spending by Hispanic and Asian households US Chinese speakers (mainly Cantonese and Mandarin) US Spanish speakers 37.5 2.8 2.1 Trillion Million Million Language Use — US Census Bureau Audience - United States
7. Largest economy Smartphone penetration for users 18 to 32 years old Population 205 82 8 Th Percent Million Spring 2015 Global Attitudes survey — PEW Global Audience - Brazil World Fact Book — CIA
8. Move all strings into strings.xml Mark message parts that should not be translated Provide sufficient context for declared strings String localization Localization Checklist — Google
9. Move all strings into strings.xml
10. Move all strings into strings.xml Quick Fix Shortcut: ALT+ENTER
11. Move all strings into strings.xml
12. Move all strings into strings.xml
13. Move all strings into strings.xml
14. Move all strings into strings.xml
15. Provide context for declared strings • Is the meaning ambiguous? • The word “demonstration” is a homonym. • “A practical exhibition and explanation of how something works.” • “A public meeting or march protesting against something.”
16. Provide context for declared strings • Where is the string displayed? • App launcher • Action bar • Hint text • Section heading • Button
17. Provide context for declared strings • What are the layout constrains? • Buttons are usually more space constrained • Application name limited to 30 characters • Text limited to single line
18. Mark parts that should not be translated • Strings that should not be localized • Brand name like Twitter • Certain proper names • Placeholders • Special Unicode characters • Urls • Code
19. What About Dates, Currency, Numbers, And Units Of Measure?
20. System provided formats - Date Date • Accepts Unicode date format pattern. • Order is irrelevant. “MM/dd/yyyy” will return “dd.MM.yyyy” in Locale de_CH.
21. System provided formats - Date
22. System provided formats - Decimal Date
23. System provided formats - Currency Date
24. System provided formats - Phone Date
25. System provided formats - Measure Date ?
26. System provided formats - Measure Date World Fact Book — CIA
27. System provided formats - Sorting Date • This works for English however it may not work for all Locales.
28. System provided formats - Sorting Date • This works for English however it may not work for all Locales.
29. System provided formats - Sorting Date • By default characters are sorted code point value A…Za…z • In English a and b are primary differences, while a and A are secondary
30. New APIs • Android now provides a subset of the ICU4J API. • android.icu.lang.UCharacter • android.icu.text.BreakIterator • android.icu.text.DecimalFormat • android.icu.util.Calendar • android.icu.text.Bidi • android.icu.text.DateFormat • android.icu.text.RelativeDateTi meFormatter • By creating multiple APKs using product flavors one could remove ICU files from 24+ APK.
31. #RTL
32. Web content in Arabic Phones shipped with Android in Middle East Arabic Internet Users 160 80 0.8 Percent Percent Million Number of Internet Users by Language — Internet World Stats Audience - Arabic Speakers Usage of content languages of websites — W3Techs Middle East and Africa Smartphone Market — IDC
33. RTL Support 4.0 • Arabic fonts (2.3 Gingerbread) • Arabic localized • Arabic reshaper
34. RTL Support without reshaper: with reshaper:
35. RTL Support 4.1 • Bi-directional support for TextView and EditText elements. 4.2 • RTL layout mirroring. • Improved fonts for international users. 4.3 • Improved Bi-directional support to handle mixed direction text.
36. BiDi Support
37. BiDi Support
38. RTL Mirroring
39. RTL Mirroring
40. RTL Mirroring
41. Custom layouts
42. Custom layouts
43. ViewPager • No support for RTL • Long standing request for support by community • https://code.google.com/p/android/ issues/detail?id=56831 • Other developers have created their own solutions • https://github.com/ksloginov/ RtlViewPager
44. RTL Support 4.4 • Drawable mirroring. • Force RTL developer option.
45. Mirroring
46. Force RTL • Easier to debug RTL layout issues without switching to RTL language. • Found under Settings -> Developer Options -> Force RTL layout direction
47. RTL Support Script types • English and English-like (Latin, Greek, and Cyrillic) • Dense (Chinese, Japanese, and Korean) • Tall (South and Southeast Asian and Middle Eastern languages) Material Design • English: Regular 14sp • Dense: Regular 15sp • Tall: Regular 15sp Material Design — Google
48. #Testing
49. Set up a test environment Review with native- language speakers Look for common localization issues Testing localization Localization Checklist — Google
50. Common Issues • Clipped text, or text that overlaps the edge of UI elements or the screen • Poor line wrapping • Incorrect word breaks or punctuation • Incorrect alphabetical sorting • Incorrect layout direction or text direction • Untranslated text
51. Generate localized screenshots of your Android app Upload screenshots, metadata, and your app to the Play Store screengrab supply https://github.com/fastlane/fastlane/tree/master/screengrab https://github.com/fastlane/fastlane/tree/master/supply
52. Verify App Listing Just add &hl=<language> to the URL
53. #Payments
54. Paypal market share in Middle East Unbanked Credit-card penetration 2 82 5 Percent Percent Percent PayPal, Others Still Bet on Middle East E-Commerce — WSJ Audience - Middle East
55. Payment gateways PayPal • Available in all countries • Limited penetration • Usually linked to Credit Card or Bank Account Stripe • Not Available in Middle East
56. Payment gateways Carrier billing • Billed to wireless account • Carrier charges a processing fee • Typically only used for digital goods Prepaid • Popular for young adults and those without credit • Value can be added at retail locations • Usually a fee associated with adding value to card or processing payment
57. Payment gateways TPay.me • Direct carrier billing provider • Charged to phone bill Cash U • Prepaid card accepted by online retailers • Available in the Middle East and North Africa • Users load cards at physical retail locations • Commonly used for games and VOIP
58. WebP/PJPEG Case Study #PerfMatters
59. Data used by 3G subscribers in India per month 4G subscribers in India Wireless subscribers in India 300 1 800 MB Million Million Telecom Regulatory Authority of India — 30 June 2015 Audience - India
60. WebP • Lossy and lossless image compression developed by Google • Open source, BSD licensed • Native support on Android 4.0+ • 28% reduction in size compared to PNGs re-compressed with pngcrush and pngout
61. PJPEG • Image is compressed in multiple passes of progressively higher detail • No transparency support • No native support on Android
62. Fresco • Image loading and display library from Facebook • Support for PJPEG out of the box • No feature gaps • Caching • Progress bars • Scaling • Resize and rotation • Rounded corners and circles
63. Results - WebP • Images were 25% smaller compared to PNG or JPEG images • Increased user engagement, especially in emerging markets
64. Decrease in failures Decrease in p50 load times Decrease in image size vs JPEG or PNG 25 9 74 Percent Percent Percent 3,000 images per second — Henna Kerman/Twitter Results - PJPEG
65. User Empathy 2G Day • Throttled all employee accounts • iOS and Android only • Didn’t simulate network error rates Cost Notification • Currently iOS only • Provides employee with region specific costs for network usage
66. #Thank You
67. Eric Frohnhoefer Software Engineer @Twitter
 @EricFrohnhoefer
68. #PerfMatters • http://highscalability.com/blog/2016/4/20/how-twitter-handles-3000-images-per-second.html • https://code.facebook.com/posts/1566627733629653/mobile-scale-london-recap/ • https://en.wikipedia.org/wiki/WebP • https://en.wikipedia.org/wiki/JPEG • http://www.economist.com/blogs/graphicdetail/2013/10/daily-chart-5 Localization • https://developer.android.com/distribute/tools/localization-checklist.html • https://developer.android.com/guide/topics/resources/icu4j-framework.html • http://www.terry.uga.edu/news/releases/asians-hispanics-driving-u.s.-economy-forward-according-to-uga- study References
69. RTL • https://www.youtube.com/watch?v=4dJHtT4-vBE (From Right to Left and Back) • https://material.google.com/ • https://www.idc.com/getdoc.jsp?containerId=prAE25737515 • http://mpcabd.xyz/python-arabic-text-reshaper/ Images • http://android-developers.blogspot.com/ References