Pro Yearly is on sale from $80 to $50! »

Developing for the Rest of the World

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.

261ffb5f12eb09c1795b321f467f05be?s=128

Eric Frohnhoefer

October 22, 2016
Tweet

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