Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

On China’s Bleeding Edge: Web Design Trends 2015

There are many parallels between the volatility of the web industry and China’s breakneck rate of change: For one thing, it’s hard to keep a finger on the pulse of either. But add the two together and you get China’s tech scene, a virtual landscape in such constant flux that our only hope of keeping pace is to look as far into the future as we’re able, try to discern what’s coming, and brace for impact.

Make no mistake: The Chinese web is in some ways a different place than the web you’re used to — particularly in two or three crucial respects — and user expectations are not quite the same as they are in the West. In this article, I’ll examine the things all web professionals should know before swan-diving into the Chinese market, including how mobile-only social platforms have become the revolutionary new frontier of Chinese web design, and who’s designing beautiful websites in China today.

A New Paradigm Link

Looking to be pointed in the right direction, I stopped in to see Saber Zou1, who spends his days designing that frontier. Saber is head of creative at Logic Design2, the Beijing-based multi-disciplinary digital studio that concepted AnimalsAsia’s website Exploring Moonbear863, one of the most visually ambitious desktop websites in the country, and one of only a tiny handful of Chinese-made websites ever to receive Awwwards’ coveted recognition as Site of the Day4.

Saber Zou testing mobile websites at Logic Design headquarters5
Saber Zou testing mobile websites at Logic Design’s headquarters (View large version6)

“So, how do you feel China’s coming along in terms of supporting responsive design?”

Saber shrugs at me, like I asked the wrong question. “There aren’t a lot of responsive websites in China, as most clients prefer separate websites for different devices. In terms of responsive, we don’t really relate to the web in that way; we don’t think of the desktop website as a mothership, or even as a scaled-up version of a more streamlined mobile website. Actually, a significant number of Chinese companies are bypassing the desktop experience entirely.”

I don’t know why it took so long for all of the evidence staring me in the face to crack my Western perspective, but Saber’s words finally did it. Total paradigm shift: Here we are, patting ourselves on the back for coming around to a solid mobile-first approach, but in China, mobile is not viewed as some inevitable and expansive outgrowth of desktop browsing that has taken on a life of its own. They’re separate, they’ve always been separate, and today desktops are increasingly the tertiary, potentially optional platform.

Mobile First? Puh-leez. China Is Already Going Mobile Only Link

You hear it all the time, and you’ve been hearing it for years: China’s mobile usage numbers are out the roof. As far back as 2010, Nielsen reported7 that “mobile consumers in China have surpassed their American counterparts when it comes to using the devices to access the Internet.” And the market’s only getting bigger. A July 2014 article from The Next Web8 adds to the throng of media trumpeting that truth:

Chinese users accessing the internet via mobile grew to 83.4 percent as of June 2014, for the first time surpassing the percentage of users who access the internet via PCs (80.9 percent).

“But everyone in the Western world has a smartphone,” you think. You’ve got one, yeah? You probably don’t know anyone who doesn’t, so it’s hard to imagine an increased level of saturation or to imagine that the difference between China usage and non-China usage could be significant. There is, though, and I would argue that the difference is evident not in the number of mobile users, but rather in the level of mobile-centrism. A few statistics out there support this theory, but they don’t encapsulate the story the way that anecdotal evidence does, so let me offer some, based on my own experience:

  • In China, your mobile phone number is nearly as important as a social security number in the United States. If you lose access to your mobile number, you may also irrevocably lose access to e-commerce accounts, digital wallets, social network accounts (which are tied directly to the mobile number) and much more. Because of this, people take great care to go through the process of officially associating their number with their government-issued state ID to prevent identity theft and to ensure easy retrieval in case of SIM loss or damage.
  • Most websites in China use a mobile phone number instead of an email address as the primary identifier for logging in and as the primary password-recovery tool — particularly relevant since email doesn’t have nearly the saturation in China that it does in the West.
    Password-retrieval process on Taobao.com9

    Password-retrieval process on Taobao.com10, one of China’s largest and most popular websites: “Please input your mobile number / username / email address.” (View large version11)
  • For certain Chinese digital wallets that let users scan a QR code to instantly pay for anything from a city cab ride to a fancy dinner to a pay-per-view movie, payment is a single step. They don’t even require password input or verification for purchases under 300 Chinese yuan (CNY) or so (around $50 USD). That being the case, a stolen phone is just as bad as a stolen pocketbook.
  • World Bank data12 indicates that in 2011, China was rocking 69 motor vehicles (cars, trucks and buses) per 1000 people. Compare that with the US’ 768 per 1000 in the same year and you can imagine how many non-car-owning Chinese ride public transportation to work every day — which means long periods of staring at a mobile screen, trying to ignore the lady picking her earwax across from you.

With a culture so completely mobile-focused, it’s no wonder that many companies feel safe turning their back on the desktop, creating experiences that are solely intended to be used on a phone and that have no desktop-friendly equivalent. Those experiences have a name — “light apps” — and they’re quickly becoming one of the most popular ways to interact with consumers.

Light Apps Link

Websites are so 2010. In 2015, Chinese companies are building light apps, or qing ying yong (轻应用). Light apps are one-off, zero-download, hyper-targeted mini-sites that are typically built (and often animated) with HTML5. Oh sure, they do have a dedicated URL and they’ll load in a desktop browser if you absolutely insist, but they’ll probably look awful on a desktop screen. In some cases, they don’t even function at all after the page loads, given that some of them require swipes to navigate.

Light apps are designed for fruit-fly attention spans. They’re often single-page, single-message and intended to be single-use. In other words, users would open a light app once, flip through it, ideally pass it on to friends via mobile sharing, and then never look at it again.

Light Apps in the Wild Link

Live App is a Chinese company that specializes in light app development, and the broad scope of its portfolio is a testament to the light app’s many applications.

Below is a small sampling of Chinese light apps. There are two ways to load these on your phone: the Chinese way, which is to use your mobile device to scan the QR code that auto-loads the website, or the hackneyed non-Chinese way, which is to follow a link to the URL on your phone. If you try to access these in a desktop browser, they might load, but they are unlikely to work well or at all. I encourage you to try to load the direct URLs in any desktop browser to get a feel for how completely development of light apps ignores the desktop.

Brands might create a light app to share an annual financial report, like this one from Cheetah Mobile (scan the QR code13 or go directly to the URL14):

03-cheetah-mobile-app-opt-small15

Cheetah Mobile walks users through its corporate finances in this light app. (View large version16)

This one, from emergent mobile manufacturing powerhouse Xiaomi, is for recruitment (scan the QR code17 or go directly to URL18):

04-xiaomi-light-app-opt-small19

Xiaomi’s light app looks to drum up qualified staff. (View large version20)

Some light apps celebrate corporate milestones, like this one for Lenovo’s 30th anniversary (go directly to URL21):

05-lenovo-light-app-opt-small22

Lenovo celebrates “30 years of memories,” light app-style. (View large version23)

Some whip up excitement in advance of a movie premier, like this trivia game that tests users’ knowledge of the films of Chinese director Jiang Wen (go directly to URL24):

06-jiang-wen-light-app-opt-small25

“Are you a real Jiang Wen fan?” asks this trivia-related light app. (View large version26)

Yet others explain specific news stories, like this look into 2014’s dark year in aviation by Chinese news website NetEase (scan the QR code27 or go directly to the URL28):

07-netease-light-app-opt-small29

This light app from NetEase takes a painful look at 2014’s air disasters. (View large version30)

Want More Chinese Light Apps? Link

Bear in mind that because light apps are usually intended for short-term use, the links to these websites will go down in short order. Happily, more are always going up. See more examples of light apps on LiveApp’s portfolio page31 or on Brand Social’s frequently updated list32 (best loaded on a phone), or check out the mobile articles on Digitaling33, which often feature demos of light apps.

Call to Action Is “Share,” Not “Buy” Link

Getting to the end of a light app sequence, users are most often urged only to share — direct or obvious links to monetization are rare. But unlike most Western mobile sharing functions, which typically give users the choice to share on any one of their preferred social platforms, Chinese light apps only bother pressing users to share on a single network: one that’s frequented by over 83% of China’s mobile Internet community but one that is largely undiscussed in the West.

WeChat: Driving The Light App Revolution With Almost 500 Million Monthly Active Users Link

China has “527 million mobile internet users, according to CNNIC, and 438 million of them are on WeChat” (thanks, Tech in Asia34). That’s almost double the number of monthly active users on Twitter.

While you may be used to asking your non-Chinese contacts whether they prefer to be reached by email, Google+, Twitter, Facebook or SMS, historically speaking, social network fragmentation isn’t a Chinese conundrum, and “What’s the best way to reach you?” isn’t a Chinese question. That’s not to say the country has only one social network, but regardless of whatever other platforms are out there, there has typically always been a centralizing, nearly universal umbrella network that dominates the rest at any given time, scooping up the lion’s share of national users.

Back in the day, that network was Tencent’s QQ. Then, it was Sina Weibo (China’s answer to Twitter).

08-qq-account-panel-opt-small35

QQ International’s management panel (View large version36)
09-sina-weibo-account-opt-small37

My Sina Weibo account (View large version38)

“But Weibo,” says Saber, “has already become a place where people go to read the news and passively consume information. It’s not really as social as it once was.”

In China today, the network du jour is Tencent’s WeChat, locally known by the Chinese name WeiXin (微信). Launched in 2011, WeChat is a mobile-app-only network that combines the features of text messaging (voice and key input), group chat, a Facebook-like feed and timeline (called “Moments”), hookups for lonely folks (WeChat’s “Nearby” feature lists all users by physical distance from your location) and a whole lot of emojis. Perhaps of most interest to web designers and developers, it also has a native browser and offers an API for developers.

10-wechat-1-moments-opt-small39

Friends on WeChat’s Moments having a very Beijing conversation about poor air quality. (View large version40)
11-wechat-2-discover-opt-small41

WeChat’s “Discover” features (View large version42)
12-wechat-3-wallet-opt-small43

WeChat’s Wallet (View large version44)

Du HaiHang45, also known by his English name Seah, is a digital creative designer and developer focusing on branded and advanced interactive experiences, and the lead designer at Activation Nodeplus46, a cutting-edge web design studio headquartered in Shanghai. Like Saber, Seah places great importance on creative experimentation, and he is the only Chinese designer ever to win two unique Awwwards recognitions. Widely lauded by local and international design pundits, Seah is the creative brain responsible for some of the most innovative work coming out of mainland China today.

13-du-fwa-interview-opt-small47

Du Haihang was recently interviewed48 for the FWA. (View large version49)

Three or four years ago, brands spent large budgets on Flash campaign minisites, but not today. Today, these budgets have been moved to WeChat on smartphones. The change started with the death of Flash and the start of the iPhone boom, and the web design trends in China naturally followed it. If your website here sucks on WeChat, it’s meaningless to the marketplace.

Light Apps and WeChat Link

WeChat is so popular that light apps are nearly always optimized specifically for WeChat’s native browser, and “Share to WeChat Moments” is by and large the only call to action in a light app’s interface.

“I read a ton of articles by non-Chinese mobile developers who have to test their work in multiple browsers,” says WeChat expert Thomas Graziani, founder of Beijing-based social marketing firm Walk the Chat50, to my knowledge the first shop specializing in tailor-developed WeChat solutions for foreign companies seeking to enter the Chinese market. “In China, we need only test our light apps in the WeChat browser, and if it works there, we’re good to go. That’s how universal the platform is.”

Though Tencent’s administration interface for WeChat is only available in Chinese, Thomas’ team has opened these golden gates to the non-Chinese-speaking market by building a multilingual WeChat account admin panel (currently available in English and Chinese, but easily translatable to other languages) that talks to WeChat’s API. Thomas explains:

Companies are happy to build experiences that operate exclusively in WeChat, because they get so much more data on their users than they do from standard mobile websites. When a user accesses your website via their WeChat browser, you see their WeChat ID, and if they follow you on WeChat, you get to see seven points of data about them: WeChat ID, nickname, profile picture, location (city), primary WeChat language, gender and date when they started following the account. This enables companies to tightly target their marketing right out of the gate, especially in terms of the gender and geographic variables. On top of that, “WeChat Sign-Up” enables HTML5 game developers to customize the experience for users, with their nickname and profile picture.

QR Codes Everywhere Link

QR codes: fun for 10 minutes, and then they start killing kittens51? Elsewhere, maybe, but QR codes are the Robert Downey Jr. of China digital: They were on shaky ground there for a little while, but now they’re off the coke, back with a vengeance and doing quite well for themselves. They’re ubiquitous in print, but including QR codes in desktop web layouts and TV ads is also common, allowing users to scan directly off the screen into their mobile devices, like this light app holiday card designed by Seah for Activation Nodeplus:

14-holiday-scan-card-opt-small52

Scan the QR code with your mobile device to explore the light app Christmas card. (View large version53)

Scanning a desktop screen might sound bizarre, but it’s a common user behavior in China. Again, because WeChat is everywhere, your basic QR code most typically links directly to a corporate WeChat account that users can follow, or to a light app that loads in WeChat’s native browser. QR codes provide an entry point to WeChat experiences that can be distributed via non-mobile media, such as print ads, business cards and website footers.

It’s hard to overemphasize the importance of WeChat in supporting the rise of the QR code in China. WeChat comes with a built-in QR scanner, and codes scanned with this scanner can interact with WeChat in a variety of ways — linking to light apps, user accounts, URLs that load directly in the WeChat browser, payment systems that enable users to instantly transfer money to each other via WeChat Wallet, and endless other applications. Many advertisements don’t bother spelling out the company’s URL — they simply display a QR code, and users scan it to access the company’s landing page.

Need Some Eye Candy? Link

15-taobao-qr-code-examples-2-opt-small54

The QR code in Taobao.com’s header is capped with the title “Have a stroll around Taobao mobile.” (View large version55)
16-taibai-qr-code-examples-opt-small56

A QR code in the footer of tbclub.net57, the website for a Chinese design collective, links directly to its WeChat account. (View large version58)
17-zhifubao-qr-opt-small59

The desktop home page of Zhifubao (English name, Alipay), China’s answer to PayPal, has a total of five QR codes: one “Log in via QR code” feature near the log-in box, and one QR code in each of the four rotating banners. Yowza! (View large version60)
18-pingan-qr-code-examples-opt-small61

The footer of one of China’s largest insurance companies, Pingan62, has two QR codes: one for the mobile website and one for its Weibo account. (View large version63)
19-cnooc-qr-code-examples-opt-small64

The footer of CNOOC Oil65 has a WeChat QR code. (View large version66)

We could do this all day.

Bringing It All Together: A QR-Code-to-WeChat Light-App Dining Experience Link

At popular table-BBQ restaurant chain Henjiuyiqian67 (很久以前), which draws hungry crowds with its mix of Darwinian caveman decor, techno jams and track-suited wait staff, first-time diners are asked to scan the QR code on the menu and follow the restaurant’s WeChat account before placing an order. The server then asks to see the digital membership card that Henjiuyiqian’s light app issues to each of its WeChat followers. The card entitles diners to immediate discounts on their meal, and as soon as they pay their bill, they receive a WeChat message detailing their receipt. If there’s a long wait to snag a seat, similar apps are used to manage the waiting list: Customers scan a QR code on arrival and then are free to wander off. The light app sends a WeChat notification when a table is free. Thomas explains:

While service WeChat account holders are usually limited in the number of times they can push messages to their followers each month, if a follower has reached out and interacted with a service account in the past 48 hours, the service account may directly contact that user to send “customer service messages.” And since WeChat released their own digital wallet, customers can pay for services instantly via their accounts as well.

20-hjyq-light-app-1-opt-small68

Henjiuyiqian messages me a copy of my bill as I leave. (View large version69)
21-hjyq-light-app-2-opt-small70

My Henjiuyiqian WeChat membership card (View large version71)

All this isn’t to say that desktop has completely gone the way of the dinosaur, but I believe that if desktop websites in China are going to have real value, they will need to make that big screen work for its paycheck through exceptional usefulness or particular beauty.

Chinese Web Typography Is Still Bleeding-Edge Link

The beautification of the Chinese web has been mildly hindered by difficulties in transcending the four standard Chinese web fonts and implementing snazzier fonts à la @font-face. The dependence on such a limited range of options is a dreadful shame, since the hills are alive with sexy Chinese fonts begging to display blog post titles. You can read my blah-blahs on this72 if you’re interested in the long version, but the basic nature of the problem is that Chinese fonts are huge, comprising thousands of characters (think 20,000 glyphs or so), and 3 to 7 MB font files are usually too clunky to embed because they significantly slow down page-loading times. So, until recently, it looked like dynamic logographic73 interfaces would be left dejectedly kicking cans around the backyard as Germanic language-based designs frolicked around in the sprinklers.

Then, along came Youziku1077674, a Taiwan-hosted, Typekit-style dynamic font solution for the Chinese language. Youziku grabs strings of text sent either to its server or to a locally hosted script, renders them and returns the resulting live text.

22-youziku-opt-small75

Youziku1077674 Chinese font library (View large version77)

I’ve had the pleasure of participating in some experimental trials of the Youziku system. It works pretty well, and selecting non-standard Chinese text with the mouse is like running your hand down the body of a brand new Corvette. The tech is still pretty new, though, and I’ve run into three snags:

  1. Thin Chinese fonts don’t render very well and can look painfully ragged in Chrome. If they’re super-duper thin, strokes may even partially disappear. It’s not a big issue with bolder fonts and not (in my experience anyway) an issue in Firefox, but that kink needs some finessing.
    23-thin-fonts-opt-small78

    What happens when Chinese fonts via Youziku are too small and too thin in Chrome? (View large version79)
  2. There’s often a little lag between a page loading and a font loading. So, you might see a visual stutter as the page loads the content and then applies the rendered text.
  3. Youziku’s website is currently only in Chinese, as are the installation instructions. If that’s an issue for you, another rival font library, Justfont80, displays its library and sign-up instructions in English, but its font selection is significantly smaller.

“We’re still using PNG for our special fonts — it’s safest,” says Saber. “We’re excited about the possibility of implementing web fonts, but for now, implementations like Youziku are extremely experimental.”

Seah agrees. “As everyone knows, Chinese typefaces are comprised of a huge number of characters, so they’re difficult to embed on the web. In our office, we use images or SVG for static-text characters, but we still mostly use standard web fonts for dynamic text.”

Some Of The Prettiest Desktop Websites Link

ACNPL\WGL Link

Created by Seah for Activation Nodeplus as an online playground for mucking about with emerging real-time graphics technologies, the ACNPL\WGL website81 took home a much-deserved Awwward win, Seah’s second.

The company was started in early 2012 as Nodeplus by Welson Tu, a Taiwan-based digital marketing pioneer… After two years’ rapid growth, it was acquired as the digital division of Activation Group in May 2014.

I was mainly doing interactive design and Flash development three years ago, and I wanted to start doing some advanced experimentation with real-time graphics, HTML5 canvas and WebGL, something truly world-class and far beyond where China’s interactive design was at that time. Welson was interested in supporting this idea, and his agency provided me a totally free space to pursue it. So, I quit my former job at a creative agency, then partnered with his agency in early 2013, managing to turn my focus from Flash ActionScript to new web technologies. That’s our how our collaboration began and continues: I design, develop or experiment with whatever I’m interested in, on behalf of our agency. At the same time, I support the agency’s projects as well.

24-acnplwgl-desktop-opt-small82

ACNPL\WGL by Seah (Du Haihang) for Activation Nodeplus (View large version83)

Sixpence Link

When Seah was ready to ask his lovely (now) wife to marry him, he developed a custom proposal iPhone app that could only be opened by one person: her. And when her fashion design business was ready to open its doors, Seah poured his whole heart into designing and developing an award-winning website for her. (Beat that, guys!)

This is the website for my wife’s store. The two founders of Sixpence wanted to create a label with attitude. They make hand-sewn limited-edition apparel by reservation only, so the branding of the microsite is meant to convey this indie attitude and offer their audience a unique, modern and seamless browsing experience. There wasn’t a particular commercial goal with the build.

Sometimes I feel it’s difficult to do cutting-edge work in China because many users are still using old technology, and when you use very new technology, you must make a decision either to lose some users or to spend a lot of time creating fallbacks for older browsers. Many clients are unwilling to support experimental work like that.

25-sixpence-desktop-opt-small84

The Sixpence store (View large version85)

Exploring Moonbear Link

This is a beautiful website with a beautiful purpose. Well, two purposes, actually: Exploring Moonbear863 was created for AnimalsAsia87 to raise awareness of the cruelty of moonbear bile farming (bear bile is used in traditional Chinese medicine), but it was also crafted as a Microsoft GCE (Game-Changer Experience), a website intended to exhibit IE 11’s range of capabilities. Saber talks a bit about the process:

IE actually brought another company into project for the coding part, given the tight timeline. That company is named Vision Soar. We came up with the idea, overall architecture, content, design and prototype, and they coded it.

The visual inspiration for this was a tour we took of the AAF Rescue Centre in Chengdu. We took a lot of pictures there. Because one of our goals is to have 3D elements on the website, we did a lot of visual research, and at the time, low-poly style was quite popular, so we also borrowed some of those visual cues. Before doing any actual design, we usually create a mood board, where we collect all sorts of visual inspiration and decide on a direction for the design. We collect screenshots, we explore on the Internet or go out to take pictures.

Creating the 3D bear was the biggest technical challenge we faced. We needed to create a bear that could animate and respond to touch. In addition, it needed to perform well in all major browsers that support WebGL. We ended up using ThreeJS and Unity. In terms of process flow, communication between the various stakeholders was the biggest challenge we faced.

26-moonbear-desktop-opt-small88

Exploring Moonbear (View large version89)

Words Can Be Weapons Link

Created by Ogilvy Asia90 for the Center for Psychological Research in Shenyang, Words Can Be Weapons was intended to increase viewer understanding of the negative psychological impact of hurtful language on children, drawing a link between abusive words and the rise in juvenile crime. The website design shows rude phrases in Chinese turning into guns, knives and other instruments of violence. More information is available on Huffington Post91.

Words Can Be Weapons92

Words Can Be Weapons (View large version93)

30ml Link

This FWA-winning stop-motion website for Chinese creative agency 30ml94 (creatively helmed by Shanghai-based designer Yong Yu) is rendered in clay.

30ml agency website95

Website for the agency 30ml (View large version96)

Adidas Originals Link

Another win by 30ml, the Adidas Originals97 website is evidence that a ton of the great design work happening in China today is being done by agencies for international brands.

Adidas Originals China98

Adidas Originals China (View large version99)

Dashilar Link

G_Lab100 created this website for the Dashilar101 area revitalization project in Beijing, a collaborative effort between government, designers, architects, investors and residents to breathe new life into a once-languishing historic district.

Dashilar.org102

Dashilar (View large version103)

Wrapping Up Link

I do a bit of UI consulting for foreign firms that are thinking of entering the Chinese market, and I find myself saying one thing quite a bit: Localizing for China means more than translating your desktop website into Mandarin and calling it a day. It might sound harsh but here’s my advice: Do China right or don’t bother. If you half-arse it, it will be obvious, and you will lose money and credibility. Know who you’re talking to and how they use the web, and open communication via the channels they expect (WeChat, light apps, QR codes), and you’ll be that much closer to a meaningful connection with your users.

So, Kiddos, What Did We Learn? Link

  • Light apps are China’s new web design frontier.
  • If your website doesn’t work in WeChat’s native browser, it will be irrelevant to the Chinese marketplace.
  • QR codes are relevant and widely used in China.
  • Chinese web font technology is just getting warmed up.

More Resources Link

(ah, il, ml, al)

Footnotes Link

  1. 1 https://twitter.com/saberzou
  2. 2 http://logicdesign.cn/
  3. 3 http://case.inimc.com/moonbear
  4. 4 http://www.awwwards.com/web-design-awards/exploring-moon-bear
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2015/02/01-saber-zou-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/02/01-saber-zou-opt.jpg
  7. 7 http://www.nielsen.com/us/en/insights/news/2010/mobile-internet-more-popular-in-china-than-in-u-s.html
  8. 8 http://thenextweb.com/asia/2014/07/21/in-china-more-people-now-access-the-internet-from-a-mobile-device-than-a-pc/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/02/02-taobao-forgot-password-opt.png
  10. 10 http://www.taobao.com
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/02/02-taobao-forgot-password-opt.png
  12. 12 http://data.worldbank.org/indicator/IS.VEH.NVEH.P3
  13. 13 http://www.liveapp.cn/store/app?custom=1&id=6391420695474
  14. 14 http://www.liveapp.cn/HTML/dev-liebao-finance/index.html
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/02/03-cheetah-mobile-app-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/02/03-cheetah-mobile-app-opt.jpg
  17. 17 http://www.liveapp.cn/store/app?custom=1&id=6271420695474
  18. 18 http://www.liveapp.cn/HTML/dev_mi/index.html
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/02/04-xiaomi-light-app-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/02/04-xiaomi-light-app-opt.png
  21. 21 http://lenovoevents.ovpp.cn/events
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/02/05-lenovo-light-app-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/02/05-lenovo-light-app-opt.png
  24. 24 http://evt.dianping.com/market/20141216/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/02/06-jiang-wen-light-app-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/02/06-jiang-wen-light-app-opt.jpg
  27. 27 http://www.liveapp.cn/store/app?id=4811421304204
  28. 28 http://www.liveapp.cn/HTML/dev_ntes/index.html
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/02/07-netease-light-app-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/02/07-netease-light-app-opt.jpg
  31. 31 http://www.liveapp.cn/store?custom=1
  32. 32 http://brand-social.com/lightapp/mobilefun/?from=timeline&isappinstalled=0
  33. 33 http://www.digitaling.com/articles/mobile
  34. 34 https://www.techinasia.com/wechat-438-million-active-users-q2-2014/
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/02/08-qq-account-panel-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/02/08-qq-account-panel-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2015/02/09-sina-weibo-account-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2015/02/09-sina-weibo-account-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2015/02/10-wechat-1-moments-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/02/10-wechat-1-moments-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/02/11-wechat-2-discover-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2015/02/11-wechat-2-discover-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2015/02/12-wechat-3-wallet-opt.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2015/02/12-wechat-3-wallet-opt.png
  45. 45 http://www.duhaihang.com/
  46. 46 http://www.nodeplus.cn/
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2015/02/13-du-fwa-interview-opt.jpg
  48. 48 http://www.thefwa.com/interview/du-haihang
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2015/02/13-du-fwa-interview-opt.jpg
  50. 50 http://walkthechat.com/
  51. 51 http://www.forbes.com/sites/rogerdooley/2013/10/21/qr-codes-kittens-stratten/
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2015/02/14-holiday-scan-card-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2015/02/14-holiday-scan-card-opt.png
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2015/02/15-taobao-qr-code-examples-2-opt.png
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2015/02/15-taobao-qr-code-examples-2-opt.png
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2015/02/16-taibai-qr-code-examples-opt.jpg
  57. 57 http://www.tbclub.net
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2015/02/16-taibai-qr-code-examples-opt.jpg
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2015/02/17-zhifubao-qr-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2015/02/17-zhifubao-qr-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2015/02/18-pingan-qr-code-examples-opt.png
  62. 62 http://www.pingan.com/
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2015/02/18-pingan-qr-code-examples-opt.png
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2015/02/19-cnooc-qr-code-examples-opt.png
  65. 65 http://www.cnooc.com.cn/
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2015/02/19-cnooc-qr-code-examples-opt.png
  67. 67 http://www.dianping.com/shop/6209476
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2015/02/20-hjyq-light-app-1-opt.png
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2015/02/20-hjyq-light-app-1-opt.png
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2015/02/21-hjyq-light-app-2-opt.jpg
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2015/02/21-hjyq-light-app-2-opt.jpg
  72. 72 http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
  73. 73 http://en.wikipedia.org/wiki/Logogram
  74. 74 http://www.youziku.com
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2015/02/22-youziku-opt.jpg
  76. 76 http://www.youziku.com
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2015/02/22-youziku-opt.jpg
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2015/02/23-thin-fonts-opt.png
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2015/02/23-thin-fonts-opt.png
  80. 80 http://en.justfont.com/
  81. 81 http://www.acnplwgl.com/
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2015/02/24-acnplwgl-desktop-opt.png
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2015/02/24-acnplwgl-desktop-opt.png
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2015/02/25-sixpence-desktop-opt.jpg
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2015/02/25-sixpence-desktop-opt.jpg
  86. 86 http://case.inimc.com/moonbear
  87. 87 https://www.animalsasia.org/us/
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2015/02/26-moonbear-desktop-opt.jpg
  89. 89 https://www.smashingmagazine.com/wp-content/uploads/2015/02/26-moonbear-desktop-opt.jpg
  90. 90 http://www.ogilvyasia.com/
  91. 91 http://www.huffingtonpost.com/2014/09/19/words-can-be-weapons-china-ogilvy_n_5844008.html
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2015/02/27-wcbw-desktop-opt.jpg
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2015/02/27-wcbw-desktop-opt.jpg
  94. 94 http://www.30ml.com
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2015/02/28-30ml-desktop-opt.jpg
  96. 96 https://www.smashingmagazine.com/wp-content/uploads/2015/02/28-30ml-desktop-opt.jpg
  97. 97 http://adidas.30ml.com/
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2015/02/29-ao-desktop-opt.jpg
  99. 99 https://www.smashingmagazine.com/wp-content/uploads/2015/02/29-ao-desktop-opt.jpg
  100. 100 http://stoyard.com/
  101. 101 http://dashilar.org/
  102. 102 https://www.smashingmagazine.com/wp-content/uploads/2015/02/30-dashilar-desktop-opt.png
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/2015/02/30-dashilar-desktop-opt.png
  104. 104 http://www.wechat.com/en/download.html
  105. 105 http://www.liveapp.cn/store?custom=1
  106. 106 http://brand-social.com/lightapp/mobilefun/?from=timeline&isappinstalled=0
  107. 107 http://www.youziku.com
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Kendra Schaefer has been living predominantly in China since 2002. A former front-end designer and art director, Kendra now writes about pretty Chinese interfaces and the Beijing tech scene, taking on the occasional UI design project.

  1. 1

    Great article! So interesting, one question: Are Chinese trends our future at the other side of the world?

    4
  2. 3

    Fantastic article. Thank you!

    So how do you describe the balance between web standards and browser-specific design in China? The WeChat dominance — and hence design focus — sounds like the “best viewed in” debacle (and resulting browser-tailored sites) we went through 15 years ago, at the expense (for a while) of standards compliance for when the Next Big Thing arrives.

    2
    • 4

      Hm, interesting question. First of all, let me say that I’ve never found any documentation on the English-language web on WeChat browser standards and testing – maybe I should poke around in Chinese. I’ve personally never seen a light app or mobile site that worked on WeChat but not on the native device browser, but that’s hardly proof of anything.

      I can add a few observations that might help triangulate that answer: One, the WeChat browser isn’t being used in place of the native device browsers. When you open WeChat, there’s no feature that lets you “Launch wechat browser” and then just paw around the web. You don’t really manually enter a URL into the WeChat browser, there’s no obvious URL bar – it wasn’t intended to be used that way. That type of general web browsing is still the domain of whatever browsers are loaded on the device.

      Rather, the WeChat browser automatically opens almost like a modal window when you scan a QR Code using the WeChat QR scanner, or visit a link (to a site or light app) that was shared via WeChat Moments. In other words, what happens in WeChat mostly stays self-contained in WeChat.

      Two, in terms of light apps, most of these are slated for short-term relevance, like a party flier or something. Many of them are cheaply made, intended to be viewed, shared and tossed. So I’d have to guess there’s a lot of shoddy coding behind them, but I doubt there’s a huge push towards maintaining excellent standards on a product that will be offline in three months.

      In terms of more permanent websites, I think testing with WeChat in mind is no different than testing on any other mobile device – it’s just another (important) item on the browser testing list.

      2
    • 5

      I understand your point, but I don’t think you can compare those.
      During the browser wars, everyone was doing their own thing and inventing tags/technologies that only worked in one browser.

      It sounds like with wechat it’s more a question of how much of the open standards (HTML5, CSS, …) is implemented yet and of course the inbuild API to the wechat user-data.

      2
  3. 6

    I really liked this article, although I won’t need to do work for chinese companies anytime soon. ;)

    While many of the things mentioned wouldn’t work on western “open markets”, especially given our negative feelings towards monopolization, there are a lot of things we could, and maybe should, take as inspiration.

    What I personally like very much are the single-use microsites. I’m really getting sick of our typical everything-and-the-kitchen-sink websites where finding information takes longer than consuming it.

    And (I may be alone in this) I think the use of QR codes is a great thing. Keep in mind though, that due to the overly complicated language, in China it’s typical to convey information in a more visual way and use language to complement icons, not the other way around.

    3
    • 7

      SIngle use microste: It’s typically what the landing pages are build for. Highly productive one page sites focused on one specific action (and giving access to the more global complex site). I strongly believe too in these very focused way of providing interraction

      -1
      • 8

        I hate landing pages, since they usually just make me need more clicks to reach the information I want. So far I’ve never seen a landing page containing anything more than some PR-blah.
        Especially strange are the landing pages for games, that don’t even contain a single screenshot and almost no information about the game. What the hell is the point of those?

        0
  4. 9

    Vicente Sarmento

    February 13, 2015 5:54 pm

    Refreshing article. I really liked reading things from a such different point of view. Thanks a lot.

    0
  5. 10

    Very interesting article. It’s so fascinating to see how other cultures use the web. I never really thought about how many characters Mandarin consists of and the restraints this could place upon web typography. If you ask me, the US would benefit from a global network instead of all the various browsers/networks we have to deal with.

    1
  6. 12

    excellent, this huge population country has an Chinese style design trends: couture, fonts, social platform, user experience… Different from the west

    0
  7. 13

    An excellent article, I’ve had a blast reading through it. One question: from one to ten, how important would in your opinion designing for WeChat be for professional users, i.e. company officials working for western markets? Specifically, if one wanted to create a communication platform for suppliers, would in your opinion be more important to target WeChat or old IEs?

    0
  8. 15

    Imagine my surprise when I had some down time at work, opened up Smashing Magazine, and saw your byline at the top of the page! This is seriously awesome and I’m totally gonna name-drop your name now. Love the article – it really is so interesting how different the culture is and how incredibly mobile-centric people in China are.

    1
    • 16

      Oh, look who’s here! So what happened to your WeChat account since you left China? Still use it to communicate with your friends here, or has it gone dormant? Ever show the people at your office how it works?

      0
  9. 17

    It’s rarely to find an article talk about Chinese Web design , The author seem to be more comprehensive understanding of the Chinese Web Trend than me T_T. Good job~ 希望和作者多交流,已经关注你的微博!

    1
  10. 21

    Really interesting article, Kendra. Enjoyed it alot. Thanks.

    0
  11. 22

    I’ve always had a soft spot for QR codes (I use them all the time), and I think it’s a shame “US centric” design bullies always pooh-poohed them (ditto swipe carousels by the way).

    If camera apps recognized QR codes as easily as they do faces (instead of having to download and use a separate app), QR codes would be far more useful.

    It’s worth mentioning that many US users are mobile only now — I know two young people personally who only own a mobile phone, and only use a laptop (desktop) at work.

    1
  12. 24

    Great article, really helpful to see things from a totally different perspective.

    One question I had though, is how it works with the ecommerce side of things. Presumably mobile payments and buying products online through the mobile device is much simpler?

    I’m thinking things like concert tickets or purchases, and just trying to work out how that fits with the ‘one time use’ light app / wechat model?

    Thanks!

    0
    • 25

      Oh, man, ecommerce in China. I could write a whole new article on that one. China is actually, in my opinion, way ahead of the West in terms of online payment systems. QR Code payments via WeChat Wallet are widely used, so people very often (at least in the larger cities) use their devices to pay for goods and services. And Paypal, if you’ll excuse me for saying so, is a sad, shambling wreck when compared to AliPay (Zhifubao). AliPay is amazing – you can log in and pay your home electrical, water, and gas bill, then pay your college tuition and buy a lottery ticket. Craziness.

      But in terms of ecomm, if you’re accepting payments online or have a product catalog to browse through, naturally, a solid non-WeChat mobile site or app is necessary. That site or app would, however, be bolstered with a solid WeChat presence through which you would do a significant portion of your marketing and outreach.

      0
      • 26

        Ah cool, thanks Kendra – that’s really helpful :-)
        It all ties in with what I’ve read previously – really interesting, particularly the mobile wallets/payments. Hopefully we will catch up in the UK soon!

        I’ll keep an eye out for an article on Chinese eCommerce ;-)

        1
  13. 27

    Great article, a real eye-opener! Thank you Kendra
    I wanted to ask – what are people using in China for email (I’m guessing it’s not gmail everywhere) and for keeping their calendars (on the phone and in sync)?

    0
    • 28

      Sorry for the delay in responding here, folks – it’s Chinese New Year. Happy Year of the Sheep! I’m not familiar with the most popular calendar app,

      Email is another area where China differs – Chinese do not use email the way we do, somehow that all got skipped. I mean, people still have email addresses, but email is not really the central “This is the main place you can find me” tool – again, the mobile device fills that role. But to answer your question, 163 (NetEase) is one of the biggest email providers. Other people still receive email at their QQ accounts. Almost no one uses Gmail, as the service is completely blocked by the Firewall.

      1
  14. 29

    通胀蓄水池

    February 16, 2015 1:07 pm

    牛人,这篇文章有木有中文版

    NIU people! Anywhere I could find a Chinese version of this article? THX

    0
  15. 33

    Justin Spencer

    February 16, 2015 1:14 pm

    Real great article that you have shared here. Thanks. Keep it up!

    0
  16. 34

    Excellent, informative and interesting article. Kudos to you and Smashing for putting this out. We really need to know more about how different countries are using web technologies. Especially rising players in the international scene. Now I am wondering about India and countries in Latin America and Africa!

    0
  17. 35

    Superb article on the state play over there. China is years ahead in the mobile banking space with the melding of wechat and banking incorporation.

    We can learn a lot from this.

    0
  18. 36

    Curtis DeGidio

    February 17, 2015 6:00 pm

    Great article. Do you see this paradigm being important for sites that, for the most part, are not monetized in any way? For example, I do corporate web development for a company that generally uses their website more as a sales introduction, with the actually purchasing done through our sales team (we deal in heavy industrial machinery). Our general call-to-action is geared towards getting the customer to talk with our representatives.

    0
    • 37

      Yes, I specifically see it being important for you. It actually seems like the smaller the business is, the more they can ignore desktop (bear in mind that is totally anecdotal and based only on my experience, not data).

      Your customer service reps should be available via WeChat on a regular basis. The Chinese, like everyone else, value immediacy and instant gratification, perhaps even more so because they use mobile more and email less. So if you’re giving your Chinese clients a landline and an email account as the primary ways to reach you, you’re in trouble. You may even be creating trust issues via your website, because many Chinese feel that if they can’t get in touch with someone right away, or if there’s only an email contact, the company may be a scam (what kind of company doesn’t even have a mobile number!).

      Most small Chinese businesses provide at the very least, a WeChat and someone’s personal mobile phone number as a method of contact, and personal mobile phone numbers are not considered as private or personal as they are in the US – again, your mobile phone in China is like your email address in the US, you give it out to anyone, it defines your online presence. Larger companies may provide a WeChat and a China-based landline, but that landline is (best case scenario) always staffed during business hours.

      My recommendation: Think of your mobile or wechat account as the central touchpoint for your customer service, not email or international phone. Do have a desktop website, but have it contain an intro and product catalog (as it probably already does), and in your website footer or in another prominent location, add a scannable QR code that attaches to your WeChat account. I highly recommend you get in touch with Walk the Chat to get you started with counsel here.

      0
  19. 38

    Kristi guerrero

    February 18, 2015 9:18 am

    Websites must be built for ensuring the ROI and to get proper conversion rate from traffic to sales. An excellent article to go through.

    0
  20. 39

    Maybe I’m alone in this here, but it seems to me a “chinese web experience” is pretty shallow as in not too meaningful. The sites mentioned here are pretty much glorified ads. The attention span of a fruit-fly, combined with relatively small screen makes it pretty much impossible to create something functionally more complicated. As I very much liked how you described “the chinese way” of using web, I would like to ask you about web apps as opposed to just web sites or light apps which I’ll insist are ads :) Thank you for your great post.

    0
    • 40

      I don’t think we should generalize the whole “chinese web experience”. The source of this article are design & marketing agencies who’s primary work are microsites. But i’ms sure there are more out there.

      0

↑ Back to top