Rules to Better Internationalization

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you know why you should Chinafy your app?


    China is a booming market and now is the time to take advantage of this growing user base. If you have a successful application you should bring it to the Chinese market.

    Most Chinese consumers will not make a purchase or use your application if information is not easily available in Chinese.


    ​You can grow and target your audience better using the local social media networks

    You should ensure your application works in China, and that critical application resources are not blocked by the firewall

    You should integrate with local services (such as video streaming)

    Localizing for the market is not just translation​

  2. Do you know how to better localize your application?

    ​​​​​Localization makes your web application ready to work more than one language — and it’s much easier if you do it from the beginning. Just follow these tips to better localize your application for a specific country or region.​

    Figure: SSW LinkAuditor application is available in Chine​​se. 
  3. Do you set your application default language to automatically change to local language?

    If you are localizing your web application to make it available in a varitety of languages, it's better to ​set your application default language to automatically change to local language. e.g. Make the web application default language as same as the browser language.

    ​In order to use your web application in your preferred language, simply set that language in your browser, save/apply the new settings and then launch your application. 


    Figure: Detect your users language preference and display in that language​. ​


  4. Do you always give the user an option to change the locale?

    Localization because absolutely needed when  your application has to be shown to people in many countries. To make your application more friendly, it's very important to always give the user a option to change the locale (e.g. by adding locale dropdown menu on page) and remember this choice for the future visits. e.g. To change the language for your application, you can simply choose the new language from the language dropdown.

    Facebook Like pages
    Figure: Give the user an option to change the locale. ​
  5. Do you use client-side tools for localization as much as possible?

    With the increasing use of JavaScript on the client and HTML5, client-side localization is fast becoming a necessity for displaying messages, text, and resources localized for the user's culture. You can use client-side tools for localization as much as possible so that for the most part, the back end of your service remains unchanged. e.g. If you are using AngularJS, then use the Angular Translate plugin.

    Figure: Using Angular Translate plugin for localization. ​
  6. Do you provide numerous comments in application resources that define context?

    ​​Knowing the context and use of certain strings will help translators choose the right translation from the beginning when you localize your web application to make it available in a variety of languages. Most translation tools will allow translators to see these comments as they translate the strings. To make your comments more friendly, it's better to list in the comment field where this text is used. e.g.

    • ​Text
    • Validation
    • Tooltip
    • Textbox Placeholder​​
    Figure: Use the comment field in the resx to tell you where it is used.​
  7. Do you follow a 'Definition of Implementing Social Media Campaigns'?

    Promoting your application and business via social media can be extremely beneficial, not only for promoting of a business, but for feedback from customers as well. To help implement social media campaigns, try these tips:

    • Target platforms for the countries in which you’ll have either an e-commerce or on-the-ground presence. e.g. Facebook/Qzone, Twitter/Weibo.
    • Understand the specific social media websites and to craft the message for each  language. Always localize, don’t just translate. Google translate just isn't good enough, always give it to a native speaker to translate. 
    • Don't make the text longer than what the shortest supported is (usually Twitter which is 140 characters).
    • Studies show that posts with an image get more traction .
    • Post it to the English site.
    • Then post it to the Chinese site.
    • Great, now you are ready to post to all of the social media platforms simultaneously.
    • Facebook Like pages
      Figure:  Make sure that your social media presence covers the countries you have translated your application into
                    e.g. Link Auditor on Weibo (A local social media, China’s Twitter replacement).  

    We have a service called SSW Chinafy that can help you get started following this rule.

  8. Do you use ngx-translate for Augular internationization (multilingual support)?

    ​Applications with multilingual support can be potentially benefits to end users which coming from different nationality, by providing different languages to improve the user experience and user acceptance with comfortable language. For all popular international product or web applications, this becomes one of the mandatory feature user would like to have (e.g. Amazon, WeChat etc…).
    SSW is trying to extend the market in China, and the Chinafy concept is willing to bring more western companies to extend to China, the language support for both Chinese and English is one of the very important topic in every scenario. We require the multilingual support for our product​​.

    How to realize multilingual support in Angular project?  

    ​There are several way of implementing multilingual support in Angular project, currently the following angular libraries or built-in component supports this:

    ​•   ngx-translate : NGX-Translate is an internationalization library for Angular. It lets you define translations for your content in different languages and switch between them easily. This is one of the most sophisticated library not only support template translations but also can be used in the code by APIs. ​

    •   Internationalization (i18n) : i18n is the standard Angular built-in functionality to setup the application locale and all related aspects of internationalization. With the native support, i18n can realize the multilingual support recompiling of the application and translation resources.
    •   Angular-gettext: Angular-gettext is another powerful 3rd party library provides multilingual implementations. Differ from ngx-translate, the translation files need to be complied into angular-compatible JavaScript files.

    Why we recommend ngx-translate?​

    Considering of realizing multilingual support, any of the above libraries can be used. However in SSW we recommend to choose ngx-translate. The reasons why we choose ngx-translate:

    •   Easy to start with and powerful features support
    •   Switching language at runtime
    •   Lazy load of translation resources
    •   NGX-Translate is also extremely modular, it can be customized easily
    •   Different loaders defined for translation files with default of JSON files
    •   API support to use it in code
    •   Completed set of tools/commands for extracting and translating​

    By comparing with the 3 libraries, we recommend to use ngx-translate in your project rather than the other libraries due to the following reasons:
    •   Angular I18n only works with one language at a time, you have to completely reload the application to change the language. The JIT support only means that it works with JIT, but you still have to provide the translations at bootstrap because it will replace the text in your templates during the compilation whereas ngx-translate uses bindings, which means that you can change the translations at any time. Angular-gettext compiles the translations during the compiling period, which doesn’t support change of translation any time either.
    •   Angular i18n only supports using i18n in your templates(by using HTML tags) for now, ngx-translate and Angular-gettext works both in code and templates. Ngx-translate provide more powerful API support.
    •   Angular-gettext seems only support AngularJS, while i18n and ngx-translate support Angular 2+.
    •   Angular i18n supports either XLIFF or XMB (both are XML formats), Angular-gettext supports compiled JavaScript files(compiling from .po files), whereas ngx-translate supports JSON by default and you can write your own loader to support any format that you want. JSON is more popular in frontend development.

    Angular i18n are more powerful in ICU expressions (e.g. plurals and select) and placeholders etc, but we still recommend to use ngx-translate, and ngx-translate provides the latest versions for angular 6 and they have a better roadmap coming along with Angular.