Friday, February 26, 2010

Hongkiat.com: Design Multilingual Website: A Beginner’s Guide

Hongkiat.com: Design Multilingual Website: A Beginner’s Guide


Design Multilingual Website: A Beginner’s Guide

Posted: 26 Feb 2010 05:33 AM PST

By: Christian Arno

The ‘look and feel‘ of a website is the cornerstone of any successful online venture. But the very nature of the internet means that the instant you upload your carefully constructed pages onto the World Wide Web, you’re global.

multilingual
Image: via YukoTVXQ

Indeed, regardless of whether you intend to make buckets of cash from your website or simply build a strong international following online, there are numerous aspects of your site’s design you should consider from the start, to ensure it’s flexible and adaptable to international requirements. If you want to build a number of foreign-language equivalents of your main site, they need to be properly localized before you launch and the process can be made much less painful if you plan from the start.

1. Text

multilingual
Image: via subgrafik

For those more inclined towards the front-end design aspect of websites than the ‘behind the scenes’ system-related aspects, consider this technical truism: computers deal with numbers, not letters.

Indeed, letters and other characters are displayed by having a number designated to each one through a system of encoding. Traditionally, there were lots of encoding systems covering different languages, but Unicode changed all that.

Unicode provides a unique number for every character, regardless of platform, program or language. It has been adopted by industry leaders such as Apple, HP, IBM, Microsoft, Oracle, Sun and many others. Importantly, it is supported in most of the common operating systems and browsers. The development of Unicode is one of the most significant global software technology trends in recent years.

Most of the popular web design applications such as Dreamweaver and, for real beginners, Microsoft Front Page, facilitate the development of Unicode web pages.

Unicode can currently be used for over 90 scripts, and has a repertoire of over 100,000 characters. UTF-8 is a variable-length character encoding for Unicode that is familiar to most programmers. It is the best option when creating websites for international markets, as it allows you to use characters from many different languages. For example, German uses the ‘Eszett’ symbol (ß) in place of ’ss’, whilst three German vowels use the Umlaut (ä, ö and ü).

In short, you’re best using Unicode if you’re planning on adapting your website for other languages.

2. Color symbolism

color platette
Image: via djFargo

Color is an important facet of any website. Your choice of colors will depend on whatever product or service you’re selling. If you’re an environmental company from the west, you may have a lot of green on your site…if you run a water sports business, there may be a lot of blue.

However, your choice of colors should also reflect your target audience. For example, red can denote ‘danger’, ‘love’ or ‘passion’ in Western cultures; whilst it signifies ‘purity’ in India and ‘good luck‘ or ‘celebration’ in China.

Orange has religious connotations for Protestants in Northern Ireland, whilst it also represents ‘autumn’ (‘fall’), ‘Halloween’ or ‘creativity’ in many Westerns cultures too.

Green represents ’spring’, ‘nature’ and the environment in many cultures, but if you’re ever thinking of depicting a green hat on your site, it’s worth knowing that this signifies that a man’s wife is cheating on him in China. It can also represent an exorcism.

Other examples are Purple: ‘royalty’ (Western) or ‘mourning’ (Thailand). Interestingly, black denotes ‘funerals’ or ‘death’ in Western cultures, but in many Eastern cultures white is used to denote this.

To avoid having to overhaul your website when targeting a new market, carefully consider your color scheme from the start.

3. Content

color platette
Image: via leekrya

Nobody will visit your website for the design alone. The online marketing mantra ‘content is king‘ certainly rings true for most websites – you have to offer genuinely useful content for your domestic and international visitors.

Adapting your content for international markets requires a two-step process: localization and optimization.

Localization

The localization aspect simply requires a professionally qualified native-speaking translator for each of your target markets. If you’re serious about making money from your international websites, then you have to consider dialects too.

For example, many words mean different things in French (France), Canadian French and Swiss/Belgian French. ‘Lunch’ is déjeuner in France, but dîner in Switzerland and Belgium. And in France, dîner is the word for ‘evening meal’. Coche in Spain is the word for a ‘car’, whilst in many South American countries, it means a baby-stroller. Indeed, a baby-stroller will be unfamiliar to UK readers, who’ll be more likely to use a ‘pushchair’ or ‘buggy’.

So you get the point. If you’re serious about your global endeavors, you have to treat each of your target markets as separate entities.

The translation of your website is made a lot easier if you use minimal Flash content on your site, as it’s difficult to edit, copy and carry out word counts, processes that are crucial to the translation process. Moreover, words are the food of search engines, and given that the likes of Google can’t detect words embedded in Flash files, these kinds of sites aren’t very SEO friendly.

Optimization

In terms of optimizing your website for international markets, you shouldn’t translate your keywords and phrases directly from your English language website. People may use abbreviations, acronyms or synonyms to search for a product locally, so you have to research what terms consumers actually use to search for items in each of your markets.

These phrases should then be incorporated into your professionally translated website, preferably on a dedicated ‘in-country’ domain (see below).

4. Domains

color platette
Image: via Heberger Site

It may be cheaper and more convenient to have a single domain for all your target countries, but from a Search Engine Optimization (SEO) perspective, there’s an argument that says it’s best to have a dedicated top-level domain (TLD) for each of your target countries, (e.g. ‘co.uk’ for the UK or ‘.ch’ for Switzerland etc). Search engines use the top-level domain to help establish the ‘location‘ of the website (‘geo-targeting’), which will affect your position on country-specific search engines (Google.co.uk, Google.fr, etc)

Similarly, it’s best to check that each of your domains is hosted on a server in your target country too, as search engines use this information to determine your website’s location.

The website address of the domain you purchase is important too as Google reads the words in the URL. So if your company produces software, for example, you may want to have the word ’software’ in the URL, though this should be translated into the language of your target country.

Developing websites to support multiple languages is a challenging endeavor; if you choose to have one domain to host several multi-language versions of your site, ensure you create a different sub-domain for each language. So if, for example, your TLD is: http://www.mycompany.com, then the sub-domain for its German language version would be http://de.mycompany.com. Conversely, the in-country domain would be: http://www.mycompany.de.

5. Navigation

color platette
Image: via Little Miss. Sunshine

Navigation is a crucial aspect of the web design process. Consistency and ‘landmarking’ help web users find their way around your site and. Navigation should be intuitive.

If you have a vertical menu bar on the left of your English-language website, it’s worth considering switching this to the right for languages that read ‘right to left’ (RTL), such as Arabic. This isn’t essential, as you can have menus on the opposite side of the page, but it all depends how you want your website to appear to your visitors. Alternatively, use a horizontal menu bar to eliminate the need to make any amendments at all.

You might also want to consider creating an ‘entrance page‘ to your site, where users choose the navigation language of the site. Or, you can use English as the default language, and have clearly labeled options for switching to other languages.

Some businesses use IP2Country services that automatically detect the country of the visitor based on their IP address. Some simple, dynamic code on your web pages will enable this – however, this method isn’t always 100% reliable, so it’s perhaps best leaving the language selection process to the user.

And there you have it. These are just some of the basic issues to consider when building a multilingual friendly website. Good luck conquering the world!

About author: Christian Arno is the founder of Lingo24, a multi-million dollar international translation and localization company with more than a hundred employees in over 60 countries. Learn more about multilingual web design.

60 Creative Flash Websites You Should Not Miss

Posted: 25 Feb 2010 08:37 PM PST

Flash has been around for ages; from the days of Macromedia Flash to Adobe's acquisition. It is a platform that opens up a whole new room of opportunities and possibilities how website can be presented.

flash websites

Despite the fact that Flash has limitations like SEO-unfriendly, plug-in required, slow loading (sometimes), etc, it is still one of the best approaches to create interactive websites that will impress your visitors. In today’s post we’ve collected 60 really creative Flash websites created by expert Flash developers all over the world. Take a look, your inspiration could start from here.

More flash related articles we’ve previously published:

Enjoy!

Brought to you by:

The 3rd Generation Prius

3rd Generation Prius

Tag Galaxy

Tag Galaxy is a very good flash application that uses Papervision3D with beautiful transition effects to explore Flickr photos via virtual planetary systems. You enter a tag and related tags appear with beautiful planetary systems.

Mercedes-Benz | B-Class

Mercedes-Benz B-Class

The CLUE Virtual Mansion

Flash 3D game. Beautifully made.

CLUE Virtual Mansion

If Your Milk Carton MoOOos, You Win!

Moo You Win

Case-Mate: I Make My Case

You can design your custom iPhone case in this cool Flash application.

I make my case.

Plate Interactive

Creative idea with fantastic effects.

Plate Interactive

SposiAmo

Wedding planner site from Italy. Elegant design with romantic background music.

DG Estilistas

DG Estilistas

Cheese & Burger Society

Cheese and Burger

GT3 Creative

GT3 Creative

Skoda Yeti – Catch and Win!

Skoda Yeti

Lois Jeans | SPRING SUMMER ‘09

Lois Jeans 2009

Harajuku

Harajuku

Christmas Tweets

Christmas Tweets

IKEA Soft Toys AID

IKEA Soft Toys AID

Infrared5

Infrared5

Pearl Jam Ten Game

Pearl Jam Ten Game

Stefan Kovac – Portfolio

Flash presentation of Stefan Kovac's selected web & interactive work.

Stefan Kovac

The Scruffs game – unofficial site

The Scruffs Game

Herbal Essences Spice

Beautiful graphic design, and nice animations. The website also has game.

TheOleg | Freelance designer

This is the site of Ukrainian freelance designer Oleg Kostyuk.

Daniel Kusaka

Interactive Design Portfolio of Daniel Kusaka from Brazil. Interesting design.

Wonderful Moment Project

Volkswagen Efficiency : Volkswagen UK

PIAGGIO MP3

Kasulo.ws

Portfolio of Ricardo Dias featuring web and print contents. Gorgeous design, and inspiring idea.

Lech.pl

LECH beer in 3D

Pritt – Knutselwereld

GOOD | How do we achieve harmony?

Verbatim Championship

Cool robots with cute animation.

McCafé / Make Your Own Cappuccino Art

You can make your own cappuccino art and save to gallery. McCafe from McDonalds.

HBO Imagine

TESTEMALE-PHOTOS.COM

Bernard Testemale's professional photography portfolio site.

Levi’s® 501® 2007

THE PROFILER™

Use The Profiler to visualize what's behind your profile picture, and discover what goes on in your friends' heads. You can connect with your facebook.

Red Bull Soapbox Racer

Red Bull Soapbox Racer is a 3D racing game in Flash.

Toyota: Every 5 seconds

Featuring Toyota cars: Yaris, Auris, Corolla, Avensis, Camry, RAV4, Prado.

hiroshi seo / photographs TIME:LINE

hiroshi seo is a photographer from Japan.

Samsung Jet | Smarter than Smartphone

Bloody Rage 2

Bloody Rage 2 is a 3D Fighting game created in flash using Away3D engine.

Volvo FH16 700

Polo

2Advanced v5 – Attractor

2Advanced Studios

The Economist: Thinking Space

Virtual Sean | The Official Sean Kingston Site

Sean Kingston Sing Along with Lil Sean Karaoke

TWIGITAL

Twigital is an interactive 3D twitter visualisation in Flash.

thetoke™ interactive / broadcast

interactive, broadcast, art, motion, sound design, and flash development.

EnergyLab

Maria Filó – Verão 2010

FIFA Street 3

Coke Live Music Festival

The RailAway Express

The RailAway Express is an Away3D experiment looks like a roller coaster.

Aerial Virtual tour of New York City, USA

Amazing view of New York City 2009 virtual tour.

Relapse

Eminem's new album website.

the951 – The legend is back.

DJ Hero

DJ Hero website for DJ lovers.

Morgan Stanley Matrix. Ideas into action

Honda Accord 2008

SAIZEN MEDIA STUDIOS

NIGHTWISH – Saizen Media Studios portfolio of selected works. Extremely beautiful graphic design and stunning animations.