Notes on Designing Websites for the Asian Market

What follows is a subjective and incomplete list of notes on developing sites for the Asian market which, if you define "Asia" as including India and China, accounts for over 40% of the population of the planet. I’ve compiled it out of personal and professional interest; I lived in Asia on and off for 7 years, and recently travelled to Indonesia, Japan and India to tour Universities to talk about web development on behalf of Opera, my employer (who have high market share in Asia).

Zombie browsers

Old Internet Explorer is big in Asia (and especially China). One of the reasons for this is that many computers in Asia run Windows XP, which is still the most widespread Operating System in the world (49%).

  • There are zillions of pirated CDs of Windows in circulation, sold openly in places like Bangkok’s Pantip Plaza
  • Microsoft won’t backport IE9 to run on pre-Vista versions of Windows, so the latest version of IE you can run on XP is IE8 (and there’s no compelling reason to upgrade from IE6 to IE8).
  • Many “old” computers running Windows 2000 and XP find their way to Asia where they live long and happy lives in schools, colleges and rural villages

China is the biggest market in the world and the biggest user of IE6 (25% of China still use it). There also plenty of local browsers which you should test, though they are mostly IE or WebKit with different skins. Examples of desktop browsers include Maxthon and Sogou.

Mobile is huge

It’s also important to ensure that websites work in Opera Mini for the Asian market. A friend in the UK has been making a site for a school in Asia and was doubtful that mobile mattered; "it’s a for a school website; not many children will be using mobile phones to access that", he replied.

However, in Asia, mobile use is surprisingly different from the West (although we’re already understanding that in the West lots of "mobile" use isn’t mobile at all – people surf on their mobiles while watching TV, while on the toilet).

In Asia, and particularly Asian capital cities (which are often primate cities), population has grown much faster than the infrastructure, especially roads. This means that citizens spend hours in cars travelling to and from work or school. When I was a teacher in Bangkok, it was not unusual for even the youngest school children to arrive at school at 8 am and leave at 6pm with a 1.5 hour journey each way, and do their homework in the car. That’s usually done on a mobile phone or on a tablet device. In South-East Asia, Android is the tablet of choice over iPad as devices and components are made and assembled locally, while the operating system is available for free. Opera Mini and Opera Mobile are available for Android, with the same look and feel that people are accustomed to from their phones.

In countries where feature phones are prevalent, or where web usage is charged by the megabyte, or simply where network coverage is spotty, we see lots of games downloaded through Opera Mini to play while offline, on buses or in traffic jams. In India, for example, getjar.com, a Java apps download site, is consistently one of the top 10 sites that people visit.

As Paul Rouget of Mozilla wrote when visiting Taiwan,

My impression is that there was no computers anymore. Only tablets and phones. The main difference was about the diversity.

Some Apple devices, but not that much. Most of the smartphones are Samsung and HTC phones (no surprise here), but also a *lot* of feature phones and not-that-smart-phones (old smart phones). And also tablets. Everywhere. Some iPads, some well-known Android tablets, and a lot of tablets I never heard about.

Therefore, assume any website that you build will be accessed on range of phone and tablets, so build and test accordingly.

In China, the mobile browsers UCweb and QQ are popular. Opera Mini is customised for China and known as Oupeng.

Typography

Some Asian websites have used embedded EOT fonts in order to display certain fonts. Don’t: EOT is a format that’s only available for Internet Explorer. These days all browsers can use CSS embedded fonts. Embedding fonts allows you more flexibility with spacing, the slants and the curves of the letters (see a Hindi demo) but don’t do this, except in controlled environments such as Intranets; some Asian languages have so many characters that a single font file can be nearly a megabyte to download; sluggish on desktop and customer-infuriatingly heavy on mobile.

Instead, make sure you serve your pages using the UTF-8 encoding by adding
 
<meta charset="utf-8" />

into the <head> of your pages. Using UTF-8 is especially important in double-byte languages to avoid gobbledy-gook on the screen.

If you’re working with a design team but don’t read their language, it’s good to know that typography can look "busier" to Western eyes than to Asian readers because many Asian scripts don’t have separate upper and lower cases. Thus there is little variance in the ascenders and descenders of characters. This "slab of text" effect is noticeable in Thai which, like other South East Asian languages, doesn’t have spaces between words.

There are two new HTML5 tags that aren’t yet implemented in browsers but which offer greater control of typography for some Asian languages.

Languages like Urdu (in Pakistan) are written right-to-left, unlike European languages which are written left-to-right. On pages that use only one writing system, this doesn’t present a problem but on pages with bi-directional ("bidi") writing, browsers have to make decisions about where to put punctuation, bullets, numbers and the like. Usually browsers do a pretty good job using the Unicode Bidirectional algorithm, but there can be cases where it gets it wrong, which can seriously dent the comprehensibility of the content

HTML5 gives us a <bdi> element that allows an author to override the Unicode Bidirectional algorithm and make the text more comprehensible. For a further description of the problem and how <bdi> solves it, see HTML5’s new <bdi> element by Richard Ishida, the W3C Internationalization Activity Lead.

Work continues on CSS Writing Modes Module Level 3, but vertical text is not yet easily displayed in a cross-browser manner. Internet Explorer has used a proprietary CSS -ms-writing-mode attribute since IE5.5.

Some languages have scripts that are not alphabetic at all, but which express an idea rather than a sound. Occasionally, it’s necessary for an author to provide readers with pronunciation help for especially rare or awkward characters, usually with an alternative script in small writing above the ambiguous character. In print, this was traditionally done with a very small 5-point font called Ruby, so HTML5 gives us three new elements for marking up ruby text – <ruby>, <rt> and <rp>.

For more information, see The HTML5 <ruby> element in words of one syllable or less by Daniel Davis, a Tokyo-based colleague of mine.

Forms

Designing forms for an Asian market can have pitfalls for Western developers. For example, it’s common to require both given name and family name and give an error if both are not completed. But what is the Indonesian person with a single word name to do?

When echoing names back, remember that many Asian languages write names with family names first and given names afterwards.

Be careful when sending emails based on names people have entered in forms. A Thai lady with the given name "Nongyaw" and the family name "Surawongse" would be bewildered if she received an email addressed to "Khun (=Mr / Ms) Surawongse", as Thais rarely use their family names – a formal way to greet this Thai customer would be "Khun Nongyaw": honorific + given name. If you wanted to be clever, and avoid this by being informal and just say "Dear Nongyaw", you’d be wrong, too; every Thai has a nickname which is used for informal situations – so you would really say "Dear Meow", which is Nongyaw Surawongse’s nickname.

Richard Ishida has an excellent article Personal names around the world with concrete suggestions about form design.

Do not limit the amount of characters in Address fields. Thai addresses, for instance, are long, and don’t necessarily conform to any particular format. My address in Bangkok, for example, was Tamara Court room B7, Petchaburi Road, Between Sois 15 and 17 (opposite Indonesian Embassy), Ratchatwei 10400, Bangkok.

Culturally-appropriate designs

While choosing your colors for your design, keep in mind that certain colors have different connotations across cultures. For example, red is lucky for Chinese people. On the other hand, Thai people will be offended if you print their name in red — it’s the color that monks employ to write names on coffins, so to write someone’s name in red is to "wish them dead".

Mobile handsets

A glance at the monthly State of the Mobile Web report (latest look at South East Asia) will show you that Asia is still a heavily feature phone market. The iPhone is an aspirational device, while many Android smartphones, BlackBerry devices with QWERTY keyboards and Galaxy Tab Android tablets are used. Therefore, don’t assume touch devices – listen for touch and mouse.

Japan

On desktop, Japan still has a a very high IE6 share (6.8% at time of writing.)

On mobile, until recently it was a nation of weird, walled-garden mobile devices that had so many functions that the Japanese cried Boohoo For You to those with silly, open standards. Recently, however, Japanese consumers have moved en masse to iPhone, Android. Daniel Davis writes

My wife’s colleagues laughed at her when she got an old-style phone last year – "You do know everyone’s getting smart phones now?", they said.
Interestingly, Sharp introduced a hybrid old-style phone (flip-phone with keypad) running Android this year but it flopped. People want apps and the web and they want it on smart phones.
Of course, there are still lots of users on traditional phones but designing for those is nigh-on impossible because they don’t allow much in the way of "design" – all WAP style.

Thanks to Apple, sleek, simple designs are now popular, but so are hideous, what-were-they-thinking designs. The Japanese are quite comfortable with what we could consider ugly, complicated web pages – as long as it’s all in Japanese, of course. And none of that automatic translation crap, by the way. It always fails miserably.

Web designers should not go to extra lengths to make their design "Japan-friendly" Don’t "Japanize" your site with design cliches such as a Japanese flag, bamboo, cherry blossom or a bowl of rice. Do "Japanize" your site with a native translation. That will create a sense of reliability and familiarity which is so important here.

Finally, you’re no-one without a cute mascot. At the very least, stick eyes and rounded corners on your product/logo and call it [something]-chan. The Benefits of a Japanese Mascot is spot on.

Good practice is still good practice

I hope that preceding list of notes is helpful; please add your own ideas and experiences. Please don’t fall into the trap of thinking that Asian websites are fundamentally different from any other websites. It’s a World-Wide Web, remember. Writing valid, semantic code and testing across browsers is still important; the basics of making mobile-friendly sites that work well across devices still hold true.

As @maxart, a developer working in Bangkok, writes:

Try to keep websites "light" (people want your content, not the full jQuery library). Similarly, websites should work without JavaScript (feature phones, older Blackberries, etc.). You still can make quality sites without JavaScript and CSS3. It’s not a constraint to build websites for non-iPhone phones & low-bandwidth markets, as in the end, it actually makes you a better developer (and designer); you become cautious about quality, performance/speed, and usefulness (over the fancy).

Thanks Maxart in Thailand, Shwetank Dixit in India, Daniel Davis in Japan, Zi Bin Cheah in China.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.akhbar-tech.com Mahmoud

    thanks for advices..will look at it

  • http://www.azhowto.com Bernard Peh

    Useful tips for people venturing into asia as the market is so different. Perhaps their lifestyle forces them to use tablets and mobile phones more often.

  • http://blog.solid1pxred.com Tieg Zaharia

    Haven’t the ruby tags been there the whole time? I remember seeing them on MSDN at least as far back as 6 years ago.

  • Phil Doughty

    Interesting article. I worked designing websites in Indonesia for about 6months & found a lot of designers/developers didn’t test on anything other than Firefox 3.5 & up. And also told me not to waste time with testing Internet Explorer. But I compromised & left ie6 then tested on ie7, ie8 anyways (:

  • http://www.getshopped.org Dan Milward

    Very interesting. We are venturing into the Asian market and targeting users with iPhones only – for us that market is big enough. One interesting fact I read last year was that the Japanese are starting to adopt to iPhone quicker now then anywhere else in the world. Unless that has changed since then that says something about the tech culture happening over there.

    I wonder if it is safe to assume that this particular demographic do actually upgrade their browsers and use more modern web technology?

    Thanks for an interesting read.

  • Paul

    @bruce

    It’s great that you mentioned Thailand.

    Let me tell you this, believe it or not, there is only 1 typeface for webpage in Thai language that can be used across platform, it’s called Tahoma.

  • http://www.primemethods.com Khalid Munir

    Wonderful ideas. I’ll love to seek advice on how to re do my website for markets all over the world. I’ll also love to learn about best key words for the SEO of my website,

  • http://www.amas.ie @Fiachra

    Thanks! That’s a good read. We work with lots of exporting companies (mostly Irish companies selling to the US, UK and continental Europe) so we’re keenly aware of these types of issue for those markets.

    What you have written reinforces a lot of what we practise – especialy our key message that it’s not just about translation, that what is required is true localisation, including, cultural, regulatory and business practice factors as well as language, terminology and naming.

  • http://www.accuvista.co.uk Michael Bullard

    Thanks very much – most useful. I have worked with a customer’s Chinese agent to produce a bi-lingual site for China. I had already discovered what you say about IE6 and Typography, but it was nice to have it confirmed. However, I did not know about the Forms issues and have today adjusted our forms to reflect this. Other aspects that you could cover are the requirement to host sites in China for the Chinese market and the associated need for ICP Registration; also problems with any embedded YouTube content blocking the site in China.

  • Dave

    One thing I’ve noticed a lot of Asian websites do, is using flash for the menu, and images for text. Not good for the SEs, and not good for users.

  • Sunee

    I am looking for information about what kind ok articles I can advertise in Asian Market. Any idea about that? Thanks a lot!

  • http://www.brucelawson.co.uk bruce

    There were some proprietary ruby implementations, but HTML5 standarises them.

  • http://Hi-IT.org Cico

    Mobile device is the most convenient tool for commuting people in Asia Market.