Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Devoxx: Developing for the Rest of the World

Devoxx: 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 WebP.

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

Eric Frohnhoefer

March 23, 2017
Tweet

More Decks by Eric Frohnhoefer

Other Decks in Technology

Transcript

  1. Market size and opportunity Local pricing and financial factors Competitive

    landscape Identify target languages and locales Localization Checklist — Google
  2. 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
  3. 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
  4. 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
  5. 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.”
  6. Provide context for declared strings • Where is the string

    displayed? • App launcher • Action bar • Hint text • Section heading • Button
  7. 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
  8. 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
  9. 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.
  10. Other considerations Date • Machine to machine interactions • Some

    domains have specific conventions that don’t match locale
  11. 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.
  12. 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
  13. 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.
  14. 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
  15. Force RTL • Easier to debug RTL layout issues without

    switching to RTL language. • Found under Settings -> Developer Options -> Force RTL layout direction
  16. 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
  17. Set up a test environment Review with native- language speakers

    Look for common localization issues Testing localization Localization Checklist — Google
  18. 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
  19. Force RTL • Easier to debug RTL layout issues without

    switching to RTL language. • Found under Settings -> Developer Options -> Force RTL layout direction
  20. 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
  21. 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
  22. Payment gateways PayPal • Available in all countries • Limited

    penetration • Usually linked to Credit Card or Bank Account Stripe • Not Available in Middle East
  23. 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
  24. 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
  25. 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
  26. 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
  27. PJPEG • Image is compressed in multiple passes of progressively

    higher detail • No transparency support • No native support on Android
  28. 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
  29. Results • Images were 25% smaller compared to PNG or

    JPEG images • 9% decrease in p50 load times • 74% decrease in failures • Increased user engagement, especially in emerging markets 3,000 images per second — Henna Kerman/Twitter
  30. 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
  31. #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
  32. 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