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.
Bruce LawsonBruce evangelises Open Web Standards for the Opera browser. He's on the Web Standards Project's Accessibility Task Force and co-wrote Introducing HTML5 with Remy Sharp. Bruce drinks Guinness and works off the stout-related stoutness by kickboxing. He's a purple belt and aims for black before he turns 50. Bruce is one of the volunteers behind www.html5doctor.com.
