Web Design For Every Culture (with jQuery And the Google Translate API)

Hey guys. Today I’d like us to look at a topic that can sometimes be overlooked in web design projects – the power of designing based on culture. Lets start off with a simple question – do you know how many of your visitors come from countries where English isn’t their first language?.

I didn’t until quite recently and the statistics really surprised me. Over half..that’s right..over half of the visitors to my site come from countries with a different first language (and a different culture). Knowing this opens up a number of new opportunities for site owners that find themselves a similar boat.

For starters, you can improve the experience these visitors get on your site by simply introducing translated versions of your articles or even a design that compliments their culture. Not only this but you can also open your site up to a much much broader audience, simply by making your posts easily available in multiple languages and making your content location friendly.

In this article, we’re first going to discuss the concept of localization in more detail with the help of Christian Arno (an expert in this field from translation company Lingo24) and I’m then going to show you how you can start offering ajax translation of your posts or pages using jQuery and the Google Translation API.

Web design for every culture

There are 1.8bn people now online around the world (according to Internet World Stats), of which only 495.8m are English speakers. That means that as soon as your site is online, it’s accessible by all of those people, but less than a third of your potential audience will be able to read your site if you stick to English as your only language.

This is especially important if you’re an online business, since a study by the Common Sense Advisory found that 85% of online shoppers, even those who speak multiple languages, will only buy from a site where they can read about the product in their own native language.

If you want to effectively sell to all those online shoppers who aren’t native English speakers, then the key is to localise. You need to identify exactly which countries will have a gap in the market for your product or service, and then create individual domains for each country, with local URLs, and preferably hosted on servers in the target country (to assist with your local search engine page rankings).

When it comes to building localised sites, there are a few things to keep in mind. You can’t just create the one template for every URL and simply switch the language, as different cultures have different requirements and preferences when it comes to website design. Your aim should be to create a template which will stay consistent in its branding, but also be flexible enough to change slightly between local versions. Here are a few of the points you should keep in mind.

Multicultural design

There are fundamental differences in design between sites designed for ‘High Context’ and ‘Low Context’ cultures. For instance, take a look at the differences between Youtube, which was designed with a Western, ‘Low Context’ culture in mind, and the Chinese version Tudou. Playing a video on Youtube involves the clip simply playing on your main screen, with the option for full screen – but playing  a video on Tudou takes you into a virtual cinema, with a background designed to look like a theatre and a host of pop-up animations.

This is a good illustration of the fundamental difference between ‘low context’ cultures, which like minimalism and straight-up information, and ‘high context’ cultures, which get a lot more of their information from the background or context of a site.

Essentially, you need to look at your competitors in each market to see what they’re doing successfully with their site designs, and then one-up them, while keeping an element of consistent branding across every site – for instance, look at the differences and similarities between Coke’s Swedish site and its Chinese site.

Navigation and colour

Your main issue with navigation is going to be the switch between left-to-right and right-to-left languages. Handily, cascading style sheets (CSS) make it quite easy to switch the direction of your text, or to flip your template, by adding the right-to-left dir="rtl" attribute to the necessary areas – but more on CSS later.  If you use a horizontal navigation bar, that will prevent problems caused by having to move your navigation bar from one side to the other. Alternatively, keeping your site as symmetrical as possible will save you from having to redesign your page when switching the direction of your language.

You should also think carefully about the colour scheme you go for with each site. Obviously you don’t want to be changing colours drastically between each site, but you should also be aware that colours have different meanings in different cultures, as shown by this graph. Going for a light coloured background with dark text is your best bet – and blue is generally considered to be the most universally acceptable colour.

CSS and Unicode UTF-8

Keeping your content separate from your design is rather handy when you have to change your text and images between multiple sites, so that’s why CSS is your best choice for cross-cultural web designing. You’ll also need a character encoder that can handle multiple scripts, from Latin, to Cyrillic, to Arabic and Simplified Chinese. Unicode UTF-8 does all that and more (90 scripts in total), and is supported by all the major browsers, making it your best bet as a character encoder.

Geolocation

Imagine being able to channel your visitors from any region in the world directly to a web page that’s localised for their language and culture. Geolocation can identify a web surfer’s location by checking the country in which their IP address is registered, and there are a number of companies – such as Hexa Software’s IP2Location and Digital Envoy -  which collate IP addresses and can lease you access to integrated databases that allow you to funnel site visitors directly to their localised domain.

The only problem is that IP addresses aren’t always hosted in the country where the end user resides – for instance, lots of servers are hosted in China, so while a visitor may live in Germany, their IP address will show up as being from China, and if you use geolocation you’ll end up automatically routing them to your Chinese site.

In any case, if you have each localised domain hosted on a server in its target country, it will appear as the preferred option in the local Google search – for instance, if you have www.yourcompany.fr hosted on a server in France, when people search for ‘your service’ on Google.fr, they’ll get your French site, rather than www.yourcompany.com.

Translation and copy-writing for localised sites

Most importantly, you need to make sure that your content is correct and appropriate for each local site. While it may be tempting to just run your English copy through Google Translate and post up the results, that’s not your best option for a trustworthy, reliable looking site.

Machine translation is often fine to get the gist of a piece of foreign language text, but when it comes to marketing material, which requires a fine balance to be trustworthy and also sell to the customer, you’re best off getting a professional who lives in the target country to either write your copy from scratch, or translate it and check for any potential points of offense or ‘wrong notes’. The last thing you want is to commit a translation faux pas, such as when General Motors introduced their new Chevy Nova into the Mexican market, obviously not realising that ‘no va’ in Spanish means ‘no go’.

Translation widgets and inline translation

If you’re running off a tight budget, though, and can’t afford the expense of professional translation and copy writing, there’s always the option of adding a translation widget to your home page, or using inline translation. There are plenty of translation engines out there, and by simply copying a bit of code into your site you’ll get a box that lets visitors know they can automatically translate the text into any language.

Google Translate is probably the best known – and was the most popular in a recent review of translation engines – but it’s not your only option. Microsoft also has a widget for Windows Live Translator, and then there’s widgets for Bing, which was voted superior for Italian and German translation, and pioneer Babelfish, which rates well for Chinese to English translation. There are plenty of others available with different specialisations, most of which are stocked at Widget Box.

Alternatively, for a smoother interaction experience, if you’re up to date with inline functions you can build inline translation code into your site to offer your visitors an instantly localised browsing experience. Javascript libraries like jQuery offer a host of useful advice on how to use asynchronous JavaScript and XML (Ajax) to incorporate code into your site and create rich and engaging websites that adapt intuitively to your visitors’ language needs and offer your visitors a high definition, ‘no refresh’ browsing experience.

Harnessing the Google Translation API with jQuery

To add instant jQuery translations to your site, I recommend the use of the jQuery Translate plugin. This nicely interfaces with the Google Translation API giving you instant access to translation of your content across a number of different languages. Here’s a demo of it in action on JS-Bin. To get started, first download the translate plugin here.

Next, include the plugin after jQuery as follows:

< script type="text/javascript" src="js/jquery-1.4.2.min.js">
< script type="text/javascript" src="js/jquery.translate-1.3.9.js">

If you want to use the plugin on page load in most cases you can call it inside $(document).ready() but in some cases you have to define a callback function to be executed when the Language API is loaded. It’s not $(document).ready() but $.translate.ready():

$(document).ready(function(){
  //this will work,
  //returns a jQuery object and translates the text when the Language API is loaded
  $('body').translate('english');
  //this will work too,
  //returns an internal object and translates the text when the Language API is loaded
  $.translate( 'some text', 'de', {
    complete: function(){
                console.log( this.translation )
    }
  });
  //this won't (always) work!
  //the Language API may not be loaded, the return value cannot be determined
  $.translate.getLanguages();
  //this will work, as it will be executed when the Language API is loaded
  $.translate.ready(function(){
    $.translate.getLanguages()
  })
  //you can also use a shorter alias as in jQuery:
  $.translate(function(){
    $.translate.getLanguages()
  })
})

As you can see above you can translate an html element (first example) or only some text (second example). This plugin is great because you could easily add in a few flag icons to the top of your articles and trigger the Google Translate API to translate your post’s content via Ajax. Remember that if you’re applying the translate function to ‘body’, your layout may need to be flexible enough to accomodate longer text labels. The safest way to apply it in my opinion would be to just the post-container or in the case of a standard site, the container of your main text. Use your best judgement here!

In conclusion

By researching your markets and getting some assistance from in-country experts before you build and launch your localised sites, you can save yourself a lot of hassle later, and have a much better chance of finding success with your localised sites first time, no matter what culture you’re marketing to.

About the guest author

Christian Arno is the founder and Managing Director of global translation agency and localisation specialists Lingo24. Launched in 2001, Lingo24 now has over 120 employees spanning four continents and clients in over sixty countries. In the past twelve months, they have translated over thirty million words for businesses in every industry sector and their projected turnover for 2010 is £6.3m.