Managing Localized Language Websites, ReFreshingly Easy
We recently updated most of the localized language websites of Freshdesk. But it wasn’t just an upgrade on the design front. Our aim was to build a robust and scalable system to efficiently manage translations. Now, if I say that I could get a new language website live in under 15 minutes, would you believe me? (Yep, you should!)
Here’s what we did.
Static Website Generator with I18n
We decided to build the website from scratch using Middleman (a really cool static site generator). Since Middleman is a RubyGem with an inbuilt I18n (shorthand for internationalization) extension, we implemented localization without breaking a sweat, thanks to lucid documentation. I’m not going to explain I18n in detail because that would require a post on its own. In short, the process of localizing a website consists of abstracting strings in the web pages into keyed dictionaries. For more information, check out this article.
We used YAML, a human-readable data serialization language, to store the translations. But soon, we realized that we couldn’t manage the huge .yml files for two main reasons:
- YAML is very sensitive to whitespace and special characters. One extra tab and you’re screwed.
- Web Developers shouldn’t spend time managing the translations. After all, that’s what started the project in the first place!
Approach #1
Create a Google Spreadsheet with translation keys and automate the generation of YML using Google Apps Script.
We created a new Google Spreadsheet for each language, with multiple sheets. Each sheet contained key-value pairs of one particular web page indicated by the sheet name. Then we wrote a Google Apps Script [View GS source] which parsed the spreadsheet and generated a valid YML file.
While this method seemed to work at first, we faced a few problems eventually. For starters, collaborating with multiple translators was chaotic. More importantly, there was no translation memory (the ability to reuse already translated words)! That’s when we decided to look into alternative solutions.
Approach #2
Integrate our Middleman setup with a Translate Management System.
We fiddled with some of the best Translation Management Tools and zeroed in on OneSkyApp because,
- It has an excellent Translation Memory feature.
- It’s easy to integrate.
- It’s one of Freshdesk’s customers (just kidding!).
We set up Grunt, the JavaScript Task Runner, so that we could automate the exporting and importing of yml files to and from OneSkyApp. What does this mean for a developer? He can focus on coding the template files and leave the messy work of managing translations to OneSkyApp!
Whenever a new language site was required, translators and the reseller team inputted the necessary translations into OneSkyApp; developers downloaded the YML with a single Grunt task and generated a whole new static site for that language!
That’s how we pushed more than 10 new language websites within a couple of months!
All’s well that ends well? Not yet. We didn’t just stop with localizing the website and integrating it with a Translation Management System but we went on to,
- optimize the performance of these websites by implementing best practices, thus resulting in a PageSpeed score increase of over 50%.
- automate the testing and deployment process using Travis CI.
- build RTL websites using automated CSS flipping.
Relax, I’ll save those details for another blog post. Until then, have fun coding!
