Advertisement
  1. Web Design
  2. UX/UI
  3. Design Theory

Notes From Behind the Firewall: The State of Web Design in China

Scroll to top
This post is part of a series called Web Design Across the World.
Big in Japan: Web Design in the Land of the Rising Sun

As more Western-based companies turn one eye towards the Chinese market, I get asked a lot of questions about the complications of designing a website for Chinese clients, and the technicalities of doing online business in China. In this article I’ll address those most commonly asked.

First, a Disclaimer.

China is incredibly diverse, the divide between various segments of society is so massive that it’s impossible to speak about “China” or “Chinese people” in the aggregate. Not only is there a tremendous difference in tech-savviness between Chinese people based in major cities like Shanghai or Beijing and Chinese people based elsewhere on the mainland, there are also many different ways to be “Chinese”. When I speak of “China” in this article, I'm referring specifically to mainland China, and by “Chinese”, I'm typically referring to middle-class, connected city residents.

In other words, the remarks here are based on my own experience in China’s tech industry. I can't cover everyone’s unique experience, and for brevity’s sake, I’ll be making some sweeping generalizations. Hope that’s cool.

Who Can Have a Website in China?

Only businesses with a valid Chinese business license are legally allowed to host websites on a Chinese server; individuals may not own commercial websites hosted within the mainland. This is controlled at the hosting level: every website on a Chinese host must register for an ICP number, which the host will ask for and verify before you’re approved for an account. ICP numbers are only issued to business license holders. The law requires that ICP numbers be displayed on the home page of the site, typically in the footer. Scroll to the very bottom of the Baidu.com homepage and look near the teeny-tiny copyright text for an example.

Anyone can circumvent the whole ICP thing by purchasing hosting from a company based outside of China, but this causes further problems:

  • Websites hosted outside the mainland may be blocked at any time by the Great Firewall (more on that later).
  • Websites based in the US or Europe load more slowly than websites based locally.
  • The Chinese person buying the account usually has to be able to pay for hosting by Visa or MasterCard, which aren’t yet widely available within China.
  • The Chinese site admin needs to read English well enough to be able to work with the server admin panel.

A common solution to this problem is to host in Hong Kong. Hong Kong servers are close to the mainland, less likely to be blocked, are fast, offer Chinese-language admin panels, don’t require an ICP, and can often accept a bank transfer from a mainland account as a payment method.

What Is the Daily Reality of Living Behind the Firewall?

A bit annoying, sometimes more, sometimes less.

Many major non-Chinese sites are completely inaccessible. Trying to load up a blocked site usually gets you a good ol’ Page Cannot be Displayed message, and for reasons seemingly unknown to anyone, also seems to crash your browser’s ability to load anything at all for thirty seconds or so.

Some sites are always blocked—Twitter, Facebook, Youtube—while other blocks come and go (Mashable, Dropbox). Gmail access was spotty for a while, but the PRC (People’s Republic of China) recently pulled the plug on that as well, and it’s been permanently blocked since mid-2014. 

Some sites whose browser-based apps are blocked can still be accessed via mobile apps. Example: at the time of this writing, IMDB can't be accessed via the browser, but the IMDB iPad app functions just fine. Similarly, my mobile device can still connect via POP/IMAP to my Gmail account, though I can't load the web client in my mobile browser on a bareback Chinese connection. App and site blockages change so frequently that many Friday night beers include the which-sites-are-blocked-on-which-devices-today conversation. Instagram was just blocked on September 29th, 2014, in response to the protests in Hong Kong. I very much doubt they'll unblock it. 

How Do You Even Do Your Job Under Those Conditions?

Three letters: V-P-N. Owning a VPN (Virtual Private Network) account is de rigueur in all tech offices, so commonplace it’s hardly worth mentioning. 

For the non-developers among you: basically, VPNs take your web connection and bounce it off an unblocked server before passing your traffic on to its final destination, thus circumventing local blocks. You want to go to Facebook, but Facebook is blocked. So you ask to go to some random computer in Australia instead. Facebook isn't blocked from within Australia, so you can bounce onto friend-request bliss from there. It seems like it would be super illegal, and on paper it probably is, but (and this is pure conjecture) I suspect the government is OK with this on some level: the unwashed masses are not savvy enough to set up a VPN account, and without English language skills, are unlikely to have much interest in what’s happening on the wider web.

Do Chinese Audiences Even Know Their Internet Access Is Restricted? Do They Care?

Again, we run into the question, “Who are ‘Chinese audiences’?” Most big-city, 35-and-younger Chinese and college students are well aware that they can’t access major western networks, and it’s a common talking point on the internet. There’s a lot of low-level grumbling about it, but it’s an atmosphere of annoyance rather than outrage. Part of the reason for this is that there are Chinese equivalents of most popular Western sites, and there is little reason to use Facebook or Twitter when you have Renren, Weixin and Sina Weibo.

renren.com
My Sina Weibo Chinas Twitter user panelMy Sina Weibo Chinas Twitter user panelMy Sina Weibo Chinas Twitter user panel
My Sina Weibo ('China's Twitter') user panel.

Let’s face it: the Firewall has an upside for Chinese tech companies.

I’m as reluctant to acknowledge this as the next person, and I am not a fan of the block, but the fact is that the firewall has provided heavy benefits to local startups by acting as an incubator, giving Chinese webapps the time and captive user base they need to get off the ground. Users that otherwise would have jumped on board with better-established foreign social networks are forced by the Firewall to keep their usage in-country, and in terms of growing local tech powers, that approach has worked.

The Firewall’s Future: Is It Going Down?

No one has the answer to this, but I can offer my own analysis. I personally think that there’s only so much restriction that the government can put in place without damaging China’s economic growth. It would be a huge mistake to completely prevent local technology firms from interfacing with international networks. Plus, the web-savvy kids of today are the legislators of tomorrow. I think that given enough time, internet controls will gradually erode until China’s only blocking degrees of pornography and some politically sensitive topics.

Then again, who knows? As a region, China has been historically prone to taking inadvisably drastic reclusive measures.

What Major Problems Does the Firewall Cause for Web Designers and Developers?

1) Google API Connection is Totally Borked

That embedded Google map on your contact page? It doesn’t load in China. Neither do your Google fonts. With the exception of Google Analytics, any whisper of Google API connection in your site code causes the site to hang. Sometimes it finishes loading. Sometimes it doesn’t.

How do we solve it? The Google API shut-down is a fairly recent problem, and Baidu Maps doesn’t offer a great embedding function at the moment—I don’t know that anyone has come up with a standard alternative yet. We’re currently depending on open source options such as OpenStreetMap

Webfonts are transferred to and hosted on an unblocked or China-based server—we no longer connect to Google’s API.

2) Embedded Videos Don’t Load

There’s a big empty sadface square where your Cats Playing With Boxes video is supposed to be. Youtube and Vimeo are both affected.

How do we solve it? We host a duplicate video on a Chinese-based video site, like YouKu or TuDou, then we run a script that loads the right video depending on the user’s IP.

Embedded Webfonts and the Chinese Language

Oh yay, my favorite topic.

Everyone wants to get away from China’s four standard webfonts—they’re so, so, so overused and designers are sick to death of looking at them. I wrote a post about this a while ago, but to spare you the read: technically, sure. Chinese language webfonts can be embedded with @font-face, just like any other font. The problem is that because the language is so huge and contains so many characters, the font file sizes are enormous—think 3–7Mb per font weight. Forcing a full download of the font file on load is impractical at best.

Until very recently, there was really only one non-ideal solution to this: if you had a static number of Chinese characters you wanted to to use, you could generate a special pared-down font file with only those characters in it. This is impractical for CMS theme design, clearly.

Google and Adobe also recently debuted Chinese language webfonts (Noto Chinese and Source Han Sans, respectively), but Typekit can load slowly here, and the whole Google API block prohibits use on China-hosted servers.

Source Han SansSource Han SansSource Han Sans
Source Han Sans
Google Sans Hakka Chinese 100 weightGoogle Sans Hakka Chinese 100 weightGoogle Sans Hakka Chinese 100 weight
Google Noto Sans Hakka Chinese (100 weight)

The problem was solved in the last year or so by Youziku.com FontSelect, a Typekit-y webfont embedding tool. They have a very solid library of font files, and will host your custom font for you if you have one made. If you use their hosted service, there is a character limit of 999 different characters per page (the same character/word used twice does not count towards the 999), so if you want to host the fonts with them, best keep non-standard font usage to a minimum—used just in post headers, for example. If you need an unlimited option, they offer a solution you can host yourself to run the processing on your own server. 

UX-Wise, What Are Some Differences Between What Chinese Users Prefer and What Western Users Prefer?

No one likes over-complication.

In our pre-article Q&A, @jmshome asked via Twitter whether or not Chinese people prefer word-heavy designs, rather than minimalism.

I get this question a lot, and it’s actually a pretty common misconception. Chinese people appreciate simplicity as much as the next guy, and I was thrilled to hear Daniel Szuc from Hong Kong usability firm Apogee back me up on this at a conference a few years ago—they’ve been combating that perception for years. In my own experience, Chinese tend to perceive super-minimalist interfaces as high-end—the smaller the text and the more pure, clean and serene a design is, the more it’s perceived as a luxury brand design.

No one likes over-complexity. So why does it seem to abound on the Chinese web? I think the main problems here are low awareness of web usability and a culture of duplication. There is an incredible amount of copy-catting that goes on between Chinese websites. One guy does a text-heavy design on a site that become popular, the next guy is terrified to change a successful formula. My Chinese clients have always been much more reluctant than my non-Chinese clients to take a step into the total unknown, and many a client meeting begins with a speech about why it’s better not to copy a competitor’s website. This isn’t because Chinese people are less creative than non-Chinese—it’s a cultural perception that when you launch a new product, the best way to ensure its success is to take the pieces of your competitor’s formula that have already been proven, then modify the least number of variables.

Chinese Are Not Yet Used to Wide, Breezy Grids

In terms of real UX preference differences, I can say that the Bootstrap-3 big-grid-spacing revolution has not hit here yet, and many Chinese feel like a 30 px margin is too loose, that it leaves the webpage feeling too disconnected. The local eye seems a little more tuned into smaller grid spacing a-la 960.gs. It’s not that you can’t sell a client on wider grid spacing, it’s just that it often takes a bit of a pitch and you can expect it will look a little “off” to them.

Steer Clear of Black and White Headshots

I spent a couple of years wondering why I met resistance whenever I suggested black-and-white “Our Team” bio headshots to Chinese clients. Someone finally spilled the beans: black-and-white personal headshots are typically displayed at funerals, the black-and-white color indicating the subject of the image has died. Oops.

Tech

Operating Systems

Stick your head in the sand about it if you want, but 50% of Chinese internet users are still on Windows XP, with Windows 7 coming in second at around 33%. Only slightly over 1% of the country is running iOS. When Microsoft dropped support for XP, there was a whole lot of freaking out over here . And you wonder why China is scrambling to develop their own operating system. However, just because people are running XP it does not mean they’re browsing via IE6 (though 20% of users were still using that dinosaur in August 2012—ouch).

Browsers

Guess what? As of September 2013, the most popular browser in China is one you’ve probably never heard of: Qihoo 360 Secure, followed by IE, and then a big fat “everything else”.

What’s the Deal With Chinese SEO?

China’s answer to Google is a search engine / app developer called Baidu, which is by far the biggest player in the Chinese marketplace. 

As with all search engines the Baidu algorithm is a secret, but I can tell you that it primarily indexes sites on .cn domains or sites hosted within China. If you want good Baidu rankings, the bottom line is that you’ll need a local web outpost.

The Mobile Situation

Mobile browsing outpaced desktop browsing in China long before it did in the west, and mobile access statistics from Asia will blow your mind. Usage is so heavy that if your site isn’t mobile-friendly, you’ve lost the majority of your audience. For the latest developments in the China mobile market, check out China Internet Watch.

WeiXin

WeiXin, known in the West by its English name WeChat, is riding a massive wave of almost universal popularity. 

WeiXinWeiXinWeiXin
WeiXin

Weixin is a mobile app that incorporates elements of several other social networks, functioning as a chat application that supports text chat, voice chat, and on-the-fly group chats, a Twitter-esque personal feed with photo capabilities, a hookup-with-strangers feature, and all kinds of other nonsense.

Weixin Corporate Accounts

As of this year, Weixin has begun offering corporate accounts, meaning companies can use Weixin to push updates to their subscribers. Again, you'll need a Chinese business license to apply. Take a look at the signup portal for more information.

Wrapping Up

The overall tone of the industry here is largely positive, tempered by a mild and distant nervousness that the ground could be yanked out from under you at any time by a restrictive law or unexpected decision from above (heaven forbid the government deploys an effective VPN countermeasure, for example), but also with a good dollop of faith that that is unlikely to happen. The market for designers is absolutely huge, with companies in most major cities vying to hire design talent, and clients beginning to really value work that is well-crafted, rather than just cheap and fast. Fingers crossed that the general uptrend lasts for many years to come.

Have questions? Ask in the comments!

Further Reading

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.