Advertise here with BSA

English might be the mother tongue of the internet but the times, as Bob Dylan once noted, they are a-changin'.

According to Internet World Stats, China alone had more than 384 million internet users as of December 2009 (more than the combined populations of the UK and USA), while web access continues to increase in other large markets such as South America.

The web quite literally puts the world at your fingertips, but there are few tips and tricks to consider when it comes to making your website both accessible and appealing to visitors who speak a language other than English.

Make sure you're understood

Good quality translation is so important when it comes to making your website accessible. The simplest and cheapest way is to add a translation widget such as Google Translate, however, machine translation can throw up contextual and structural errors.

Try pasting a block of text into a translation program, translate it to Spanish, then Arabic and then back to English. It's likely that the original text will be changed dramatically as if in some online game of 'Chinese whispers'. If you are using machine translation, keep the source or original content as simple and clear as possible, avoiding any jokes or specific cultural references.

If resources allow, you should prefer human translation by a native speaker of your new target market. This should help avoiding any errors or cultural faux pas as well as allowing for a more natural flow and tone.

If the budget isn't enough for translation services, it may be handy to double-check any machine translation with the help of a native speaker.

Use of CSS and UTF-8

If you're using any custom fonts (@font-face), make sure that the font supports any special characters that the language may have.

UTF-8 is a variable-length character encoding that is compatible with over 90 written languages. You might not see the need for a localized site written in Arabic or simplified Chinese at the moment, but using UTF-8 from the start will ease adding a new language if required in the future.

Make navigation simple

In English and other languages that read from left to right, it's common to have a vertical navigation bar on the left-hand side of the page. Some languages, such as Arabic and Hebrew, read from right to left and the right-hand side would be the natural location for a vertical bar.

You can switch the location of navigation bars quite easily, but it may be better to use a horizontal navigation bar for all your localized sites.

Go for flexibility in design

Different languages require different amounts of space to say the same thing. For instance, German has a lot of compound words, which means it can take a up a lot more space to write a phrase in German that in English: think of "speed limit" versus the German ‘Geschwindigkeitsbegrenzung’.

Similarly, the Chinese and Japanese written scripts take up far less space to communicate a message than languages using the Latin alphabet. Try to keep everything fluid in order to prevent your layout from breaking.

Avoid (too much) Flash

Ok, a high-quality Flash file can look great but the text embedded in it won't be translated by automatic translation programs.

And, if you're creating different Flash files for every language, try to keep the number of them in minimum to simplify updating your website.

On the other hand, a good method can be creating them smarter where they'll be able to pull the text inside from database, XML file, etc. and you'll be able to show the right text for the right language.

Avoid using text over images

This is for similar reasons with the use of Flash.

Also, be sure to optimize your image tags for the different languages.

Consider your color scheme

Colors can mean so different things in different cultures. For instance, orange is associated with creativity in much of the west, except in Ireland, where it has connotations of religious conflict, while in Egypt it’s the color of mourning.

Blue and green have been found to be the most universally appealing colors, but remember that while many Eastern cultures will appreciate a colorful design scheme (such as the Bank of India), many western and north European prefer a more muted, minimal color scheme (such as Deutsche Bank).

It’s worth carefully considering your color scheme before moving forward. This color meanings by culture list might come in handy.

Consider localized domains

When bots crawl your page for information, they're looking for the domain itself as well as relevance. Hosting your localized sites on separate country code top-level domains (e.g. .fr for France or .ru for Russia) will help boost your localized rankings on Google and other search engines.

This can be expensive and another option is to use a subdomain (such as  fr.yourwebsite.com). Just set each page’s location in Google Webmaster Tools using the Geotargeting tool and Google will have them listed as relevant to their target area.

These are the basics for designing websites that work around the world, good luck with your plans for website world domination!

Author: Christian Arno

Christian Arno is the founder and Managing Director of global translation agency Lingo24, experts in the foreign language internet.

Launched in 2001, Lingo24 now has over 130 employees spanning four continents and clients in over sixty countries.

In the past twelve months, they have translated over sixty million words for businesses in every industry sector and their projected turnover for 2010 is £6.3m. You can follow Lingo24 on Twitter: @Lingo24.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

GoogieSpell is Gmail-like spell checker that you can use in your applications.

It is AJAX based, supports over 27 languages and well-documented.

This AJAX spell checker simply sends a query to Google’s spell checking address:  "https://www.google.com/tbproxy/spell?lang=" and displays the results and recommendations according to the result of this data.

GoogieSpell is well tested to work in all major browsers.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Google AJAX Translation API is a library for translating words or sentences from one language to another using Google Translate database.

Check this example:

google.language.translate(‘Beaucoup’, ‘fr’, ‘en’, function(result) {
  alert(result.translation);
});

This Google AJAX Translation API example simply translates "Beaucoup" from French to English.

A great feature of the API is getting the language of the input and best of all the accuracy ratio of the results.

Languages supported are limited with the ones in the Google Translate service.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)