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 it? (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 in-built I18n (shorthand for internationalization) extension, we implemented localization without breaking a sweat, thanks to lucid documentation. I am 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 2 main reasons:

  1. YAML is very sensitive to whitespace and special characters. One extra tab and you are screwed.
  2. Web Developers shouldn’t spend time in 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,

  1. It has an excellent Translation Memory feature.
  2. Easy integration.
  3. It is 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 needed, 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 is well, and that ends well? Not yet. We didn’t just stop with localizing the website and integrating it with a Translation Management system, but 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 will save those details for another blog post. Until then, have fun coding!


Published by Shibu Lijack

Frontend Web Developer | Music Enthusiast | Foodie | Technophile

Leave a comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: