Mobile Warsaw - Efficient Localization for iOS Apps
- 1. Ef鍖cient Localisation 3 tips to accelerate the global growth of your iOS app Edgar Neto @edgarjcfn edgar.neto@memorado.com Who is this guy? 2 Edgar Neto iOS Developer at Hello everyone, my name is Edgar. Im originally from Brazil and have been living in Germany for a little over four and a half years. For the last year I have been working for Memorado where we do brain training games, but more on that later.
- 2. dzikuj! 3 Usually people leave this to the end, but I would like to start this talk by saying this: thank you! Im really grateful for being invited here, and instead of just dropping in to Warsaw just for the meetup, I decided to take a few days around it as holidays and brought my wife and kid for a few very pleasant days in Poland. Szczecin 4 We have been resting for the past few days in a city called Szczecin. For me this is a really hard name to pronounce, especially because it starts with 4 consonants. Thats not really common in my language. But Im not saying Polish is complicated, maybe Portuguese is just way too simple.
- 3. 5 Masculine Neutral Feminine Plural Nominative Der Das Die Accusative Den Dative Dem Der Den Genitive Des Der German vs. Portuguese Masculine Feminine Singular O A Plural OS AS As an example, Ive been trying to learn german for the past few years, and if you see these tables you can see how simple my language is compared to german, for instance. 6 Masculine Neutral Feminine Plural Nominative THE Accusative Dative Genitive English But no language is of course as simple as english. Maybe thats a reason why it has become so widespread. And thats our language of choice when we want to launch a global app. But I would argue you should localise your app, for numerous reasons which Ill clarify more during the talk.
- 4. 7 "If you talk to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart." - Nelson Mandela But I guess you could think about the main one as being this: the relationship between your user and your app is kind of like dating. Seeing your app on the app store is like the 鍖rst look, downloading it is like talking for the 鍖rst time, and if your users come back every day you have a committed relationship to each other. The less barriers you can have in that process, the better for the success of your app. Agenda Introduction 1. Find a good work鍖ow 2. Let Foundation do the work 3. Automate delivery Q&A 8 That being said, heres what well talk about today. A small introduction about Memorado and the impact localisation had on our main product Then lets talk about automating the translation work鍖ow Following that well cover some tips about not recreating the wheel And well 鍖nish with some tips about automating screenshots and delivery to iTunes Connect, followed by some Q&A
- 5. 9 Games that improve your cognitive skills At Memorado we do brain-training games. We currently have around 25 games that aim to help you improve your memory, focus, problem solving skills, etc. 10 Playable on browser, iPad, iPhone, Apple Watch Playable across many devices
- 6. 11 All over the world All over the world. This chart is actual data. Green countries are countries with Memorado users. As you can see the only country from which we never got tracking of any users is Western Sahara, and we think its because their IPs get logged as Morrocco (but still not sure) 12 11% 4% 5% 6% 7% 12% 16% 17% 22%English German Russian Italian French Thai Spanish Arabic Other Memorado App Downloads per Language What we did at Memorado was to localise from the beginning, and what we found out was that english app downloads account for only 22% of our total downloads. I would be bold here and say that if youre launching your app just in english, youre missing out in all that much App Downloads.
- 7. Tip 1: Find a good Work鍖ow 13 Split code and text 14 Our suggestion is to split your text into localizable 鍖les from day one. This will help keep your mindset that text doesnt go into the code, no matter the size of your app.
- 8. Split code and text 15 .stringsXcode Also you dont have to have just one Localizable.strings 鍖le, the best for you to do is to split your code in multiple 鍖les. For instance, if you have a home screen, create a home.strings 鍖le. And then you add Settings screen, create a settings.strings 鍖le. This helps greatly in organising your translations Split code and text 16 localizedStringForKey( key: String, value: String?, table tableName: String?) home.strings EN home.strings DE And to access these translations from di鍖erent 鍖les, all you have to do is to provide the table name when calling localizedStringForKey
- 9. 17 Base File (English) Once you have all your translation 鍖les setup, it helps a lot to 鍖nd a translation provider. In our case we use a tool called WebTranslateIt (webtranslateit.com), but there are other similar tools like PhraseApp (phraseapp.com). They will help manage work with your translators and bring these translations into the code. In the case of WTI, we have a handy ruby gem that auto-updates our .strings 鍖les with the latest work from translators Translation interface 18 Heres one example of what the screen looks like to the translator, in the translation portal, after we call the command line tool
- 10. Work鍖ow advantages 19 Relation with translators managed by one person No technical knowledge needed from translators Translation update done by the developer Output can be con鍖gured for many platforms (mobile, web, etc.) Using a cloud-based translation service brings several advantages, listed on this slide. 20 Worth mentioning that its con鍖gurable, so we use the same gem on our iOS and rails apps, also for marketing campaigns, app store screenshots, videos, etc. All we need to do is put all translations in a text 鍖le, and call the command-line tool.
- 11. Tip 2: Let Foundation do the work 21 You dont need to put everything on your .strings 22 The underlying Foundation Framework gives us a lot of useful classes and formatters for when we want to display localised information. For example:
- 12. Dates 23 NSDateFormatter (iOS 2) Date vocabulary: Friday, Sexta, Mi. Date formatting: Feb 11, 2015, 11 Feb 2015 NSDateFormatter has been around for a while, enabling us to display dates and times in the format selected by the user Numbers, Prices 24 NSNumberFormatter (iOS 2) Number formatting: 5,000.99, 5 000,99 NSNumberFormatterCurrencyStyle Currency:$, , GBP Price formatting: $10.00, 10,00油 NSNumberFormatterSpellOutStyle Numbers spells out: eighty, achtzig, quatre-vingts We also have many NSNumberFormatters for currency, and other formats of numbers
- 13. Plurals and Gender 25 Theres also native support for handling plurals and gender in localisation 鍖les, although that requires a little more setup. Theres also native support for handling plurals and gender in localisation 鍖les, but that requires a little more setup, so Ill show this working in a demo that which I prepared earlier that has all the setup done. Demo 26 This demo is hosted on Github under https://github.com/edgarjcfn/ MobileWarsaw_Demo First I will show how plurals are behaving wrongly if we use simple .strings 鍖les. Then, by adding the .stringsdict 鍖les to the project the plurals will behave correctly.
- 14. Auto Layouts Superpowers 27 English Hebrew Left to Right Right to Left One really interesting thing about Auto-Layout is its out-of-the-box support for RTL languages. The main reason why the left and right edges are called leading" and trailing" instead of left" and right" is that theyll swap places when the device is con鍖gured to an RTL language. That means if you have been using Auto Layout you should have very little work adapting your screens to Arabic or Hebrew for instance. 28 Language direction Sometimes though, youll want your controls to stay put even on RTL languages. For that you can uncheck your Respect language direction on Interface Builder, and watch that your Leading and Trailing edges now actually become Left" and Right" meaning they are not changing with language orientation anymore.
- 15. 29 Right to left Pseudolanguage One very useful tip is to use the Right to Left Pseudolanguage to test your app, instead of switching it to an RTL language that you dont speak. I almost made a terrible mistake of showing the users they were progressing from master to rookie on the chart shoed here, because I was testing with Arabic, and since I dont speak Arabic myself, I wouldnt have caught the my error. Luckily, testing with Right to Left pseudo language I could spot the error before the app went live. 30 Double length Pseudolanguage Another useful option is the Double Length pseudo language. That appends every localised text to itself, making them double the length. Its useful to test how your controls will adapt to more verbose languages.
- 16. Stuff you have for free 31 Use Foundation classes for formatting Numbers, dates, currency, plurals, etc. Use Trailing & Leading Constraints screen will adjust for RTL languages Test with Pseudo Languages will make it easy to catch bugs early and layout properly In sum, you get a lot of localisation stu鍖 for free, when youre coding for iOS: formatting classes that help you with dates, numbers, plurals, etc. You get automatic support for RTL languages if youre using Auto Layout and also some nifty pseudo languages to help you test your app. Tip 3: Automate Delivery 32
- 17. 33 If your app has been live for a while, you should be familiar with this screen: iTunes connect delivery screen. Thats where you have to send (preferably localised) screenshots of your app every time. 5 screenshotsx x26 languages iPhone 6 iPhone 6+ iPhone 4, 4S iPhone 5, 5S iPad 5 resolutions 650 uploads Spanish Japanese Chinese S. Korean Dutch Danish Swedish English Norwegian Italian Portuguese German Russian Arabic French Turkish Indonesian Finnish Polish HebrewThai Hindi Urdu Vietnamese CzechChinese T. Now if youre localising to multiple languages, and supporting multiple devices, you can see how the amount of work here increases exponentially. In Memorados case we support currently 26 languages, 5 device resolutions and our App Store page has 5 screenshots of our app. That would total 650 uploads. Thats not suitable for a small team, unless you automate the smurf out ouf it!
- 18. 35 Sketch For automating the generation of these app store screenshots we use the power of Sketch. Sketch is a design tool focused on designing UI for mobile apps. It has great support for custom automation scripts and a growing community that has been developing and open-sourcing these plugins all over the place Turbo-speed with Sketch 36 Sketch Plugin: auto rename applies localised names to all layers Sketch Plugin: sketch-i18n applies localisation to layers Sketch Command-Line Tools batch exports layers For the purposes of this demo, Ill use 2 community-generated plugins and the o鍖cial command-line tools of Sketch to localise and re-export all our screenshots
- 19. Demo 37 In this demo I will 1. Show the sketch 鍖le with all our screenshots 2. Duplicate the 鍖le, renaming it with the language I want to localise it to 3. Execute the batch-rename plugin, which will search for all occurrences of EN and replace with PL 4. Execute the i18n plugin which will replace all EN text occurrences with their PL counterpart, reading from the selected JSON 鍖le 5. Show that now the sketch 鍖le is localised to PL 6. Execute the batch export from the command line using sketchtool 7. Show all new screenshots being generated in seconds The precondition for this demo to work is that the Sketch 鍖le is prepared beforehand with some setup, that will have a) One screenshot per layer, b) Every layer named with the desired 鍖le name for that screenshot, c) Every text 鍖eld with a special naming that will allow the i18n plugin to 鍖nd that text 鍖eld and input Upload to iTunes 38 Deliver Command-Line Tool automate screenshot uploading Part of fastlane tools great set of command-line tools that maximise automation After the screenshots are generated, you can automate the delivery of those to iTunes connect by using deliver (https://github.com/KrauseFx/deliver) an open- source command-line tool part of Fastlane (https://github.com/KrauseFx/fastlane). It will scrape the iTunes Connect website and send all your localised info. Worth to note that since its a command-line tool it can also be integrated with your CI.
- 20. To Sum Up 39 Find a good work鍖ow Prepare for localisation from Day 1 and invest in a good work鍖ow for managing translators work Let Foundation do the job Formatting and special cases like plurals, genders can be handled by the framework Automate Delivery Automated delivery can turn the work of days into a self-executing script that 鍖nishes in a few minutes In conclusion, automating the generation and delivery of your app store assets can really save you a lot of cash and time in the long run. Ive seen big companies actually hire interns to do that. Knowing that it can be automated empowers you to start thinking about localisation even when youre a one-man show releasing an indie app. Links Deliver: https://github.com/KrauseFx/deliver Fastlane: https://github.com/KrauseFx/fastlane Sketch i18n: https://github.com/kristof/sketch-i18n/ Sketch Batch Rename: http://git.io/Nl8L WebTranslateIt: https://webtranslateit.com/en Phrase App: https://phraseapp.com/en Plurals: http://www.objc.io/issues/9-strings/string-localization/ Plurals Demo: http://git.io/vsWFM Download our app: http://tiny.cc/memorado Play on your browser: http://www.memorado.com 40