CHALLENGES OF LOCALIZING ‘THE DISCOVERER’ TRAVEL BLOG WEBSITE
The Discoverer is a popular travel blog website with enticing imagery and showcases the wonderful adventures of travel bloggers from all over the world. But despite sourcing and featuring content from their global users, the website isn’t localized into any other language other than English. Together with my partner, Camila de Castro, we took a deeper look into the website to figure out why this was the case and find out if there are solutions to manage the website with internationalization in mind. Here is what we gathered after conducting our research about the challenges of localizing this website.
Challenge 1: Using Express Node.js as a CMS (Content Management System)
Learning that this website is built from Express Node.js was quite a revelation. While node.js is great application for scalable content as large as it currently is, given the massive collections of editorials and blog content, this website contained a huge amount of source data to investigate. We easily understood the large scale of translations to be done which, from the website owner’s perspective, would be a costly venture. Switching to a different CMS platform we were both more comfortable working with like WordPress would’ve been a huge migration cost of its own. We decided to narrow our approach and see what we could offer in terms of internationalization solutions.
Solution 1: Learn the CMS (Content Management System)
If you navigate to the website, you’ll find a section labeled ‘Editions’. There are currently 150 editions published, each one dedicated to a specific travel destination and offer the best tips to know when traveling there. These editions are organized into separate html files in the folder directory which Camila and I were able to reference in learning the structure and layout of the page. This also allowed us to track down how text and images are coded in the project, which will be presented as their own challenges later. For this particular case study, we decided to replicate the ‘Editions’ portion of the website starting a brand new node.js project in Visual Studio Code but using our own content to demonstrate how to improve the website for internationalization. Let me introduce, Edition 151: Big Island, Hawaii.
Challenge 2: Text Embedded as Images
There’s a common saying that “a picture is worth a thousand words”, but what about these?
The Discoverer website has a uniform approach in displaying sections of travel information. The simplicity in structure works great for appearance, but after taking a closer look, we realized some parts are clearly not designed with internationalization in mind. Many of their sections contain headers as an embedded image, rather than regular text. This made extracting text for translation not possible with the provided CMS framework. A solution would be to render these images one by one for each locale to be added, but there are easily hundreds of images that would require DTP work.
Solution 2: Reconstruct Images as Text
After studying the source code and using the knowledge I know about html tags, a simple solution was devised to create new header rows instead of referencing an image. There were 7 headers in total that needed to be reconstructed into regular text which could then be extracted for translation using any translation tool. This code below is an example of one of the headers that we added as a new line into the html file. This method eliminates the need to save images for every header that could easily have been written as text in the first place and reduces extra DTP costs this could’ve taken.
<td align=”left” class=”em_defaultlink em_center” style=”font-size: 20px; line-height:20px; color:#4B4B4B; font-family: ‘Open Sans’, AvenirNext-Regular, Helvetica, sans-serif; letter-spacing:3px; padding:25px;” valign=”top”>DISCOVERIES</td>
Challenge 3: Infographics
Another common feature ‘The Discoverer’ highlights in every ‘Editions’ page is a suggested ‘When To Go’ section. This section contains a temperature chart of average high temperatures for each month based on the travel location. The chart highlights suggested months for users to consider for their potential travel plans along with an accompanied description of general weather features. Once again, an amazing feature, but not set up with internationalization in mind. Temperature outputs are only displayed in Fahrenheit and the chart is yet another embedded image. The level of information curated for each travel location is impressive but will definitely need some more work before this website can be localized into other locales. This chart turned out to be a game-changer in elevating the dynamics of the website.
Solution 3: Use Chart.js to Create a Dynamic Temperature Chart
The most important elements of the chart to consider were the temperature outputs and the month labels, since not every locale uses the same conventions. By using Chart.js, we created a dynamic temperature chart taking into account those locale-specific standards. Before adopting Chat.js, users were restricted to seeing static data contained as an image. With the new interactive chart, users can now hover over any selected month, not just the suggested highlighted ones, to obtain even more data than before. The dynamic chart not only addresses internationalization concerns but also enhances the website’s overall user experience, marking a significant advancement to the website’s appeal to a global audience.
Lessons Learned
This case study revealed the many challenges of internationalization of using Node.js as web application content management system. Using a javascript-based program definitely replies on extensive knowledge of coding as opposed to other beginner friendly content management systems. What seemed like a simple formatted webpage turned out to have its own complications with internationalization. Having to rework some of the coding and integrating the chart made using chart.js was also a strenuous task. With its many challenges, node.js does offer much flexibility and dynamic solution to combat localization problems. This was a great case study that helped raise awareness on what any website should consider before internationalizing their website, or even any product.