Brand: Vemlidy

Project Description: Responsive Digital Banner Ads (mobile and tablet) with ISI

Scope: Translation of Banner Ads into Vietnamese and Chinese (Traditional), created in HTML5 . For this project, we received 4 banner ad sizes. Each banner was created using a single graphic element to be animated into multiple scenes using Javascript and CSS styles for positioning. Important Safety Information is written in HTML with references to the same CSS stylesheet.

Challenge meets Expertise

While the localization of HTML5 banners presented an opportunity to showcase our digital expertise, we called upon our experience in typesetting and graphic design, localization engineering (coding) expertise and attention to detail in browser testing to complete the task.

Recreation of Graphic Elements

The Scope: The graphics in the banner were created in Photoshop. The Photoshop file did not match the layout of the sprite used to animate the graphic elements and had to be recreated in English before we could use it for translation. Positioning had to be exact as margins were tightly set by the CSS file. We spent time to check every banner for proper display in English before we moved forward with production in Vietnamese and Chinese.

Our experience is that preparation is everything. Knowing that your source language design files are optimized for localization is a key step in ensuring that efforts do not need to be duplicated when it comes to producing reliable results in the target language. In particular, issues can duplicate in multiple languages so going the extra mile in optimizing the source language first is always a good investment.

Coding for Localization Expertise

Graphics were repositioned to fit the Chinese and Vietnamese translation. Vietnamese often created spacing issues due to the expansive language. Graphics that were modified to fit the translations had to be repositioned using CSS and browser testing to ensure that no graphic was cut off.

Font Resolution Expertise

Certain banner sizes required small fonts to be displayed. Since Vietnamese uses a lot of accents, the margins in the English source were set too tight to display these correctly in the HTML file in Vietnamese and had to be adjusted in CSS to increase the line heights. The Chinese font in certain banners required font weights that looked similar to English, but not too dense so as not to be able to display the characters clearly. For the HTML content, we made adjustments to the CSS encoding to ensure that the text was justified and loaded the proper fonts.

Font expertise will forever be an important factor in localization. The choice of a font can have an effect on the ability to localize properly in other languages. If a font is limited in language support, suitable fonts need to be found to replace these. When fonts do not fit well in other languages due to the fact that line spacing has not been taken into account with accented characters, those adjustments can also lead to other problems such as fit and misalignment of elements. These issues need to be handled with a great deal of attention to detail, as they often require the coordination of different experts working together to get everything looking good.