China Web Design
1、HTML静态化
其实大家都知道，效率最高、消耗最小的就是 纯静态化的html页面，所以我们尽可能使我们的网站上的页面采用静态页面来实现，这个最简单的方法其实也是最有效的方法。但是对于大量内容并且频繁更新 的网站，我们无法全部手动去挨个实现，于是出现了我们常见的信息发布系统CMS，像我们常访问的各个门户站点的新闻频道，甚至他们的其他频道，都是通过信 息发布系统来管理和实现的，信息发布系统可以实现最简单的信息录入自动生成静态页面，还能具备频道管理、权限管理、自动抓取等功能，对于一个大型网站来 说，拥有一套高效、可管理的CMS是必不可少的。
除了门户和信息发布类型的网站，对于交互性要求很高的社区类型网站来说，尽可能的静态化也是提高性能的必要手段，将社区内的帖子、文章进行实时的静态化，有更新的时候再重新静态化也是大量使用的策略，像Mop的大杂烩就是使用了这样的策略，网易社区等也是如此。
同时，html静态化也是某些缓存策略使用的手段，对于系统中频繁使用数据库查询但是内容更新很小的应用，可以考虑使用html静态化来实现，比如论坛中论 坛的公用设置信息，这些信息目前的主流论坛都可以进行后台管理并且存储再数据库中，这些信息其实大量被前台程序调用，但是更新频率很小，可以考虑将这部分内容进行后台更新的时候进行静态化，这样避免了大量的数据库访问请求。
2、图片服务器分离
大 家知道，对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是基本上大型网站 都会采用的策略，他们都有独立的图片服务器，甚至很多台图片服务器。这样的架构可以降低提供页面访问请求的服务器系统压力，并且可以保证系统不会因为图片 问题而崩溃，在应用服务器和图片服务器上，可以进行不同的配置优化，比如apache在配置ContentType的时候可以尽量少支持，尽可能少的 LoadModule，保证更高的系统消耗和执行效率。
3、数据库集群和库表散列
大型网站都有复杂的应用，这些应用必须使用数据库，那么在面对大量访问的时候，数据库的瓶颈很快就能显现出来，这时一台数据库将很快无法满足应用，于是我们需要使用数据库集群或者库表散列。
在数据库集群方面，很多数据库都有自己的解决方案，Oracle、Sybase等都有很好的方案，常用的MySQL提供的Master/Slave也是类似的方案，您使用了什么样的DB，就参考相应的解决方案来实施即可。
上 面提到的数据库集群由于在架构、成本、扩张性方面都会受到所采用DB类型的限制，于是我们需要从应用程序的角度来考虑改善系统架构，库表散列是常用并且最 有效的解决方案。我们在应用程序中安装业务和应用或者功能模块将数据库进行分离，不同的模块对应不同的数据库或者表，再按照一定的策略对某个页面或者功能 进行更小的数据库散列，比如用户表，按照用户ID进行表散列，这样就能够低成本的提升系统的性能并且有很好的扩展性。sohu的论坛就是采用了这样的架 构，将论坛的用户、设置、帖子等信息进行数据库分离，然后对帖子、用户按照板块和ID进行散列数据库和表，最终可以在配置文件中进行简单的配置便能让系统 随时增加一台低成本的数据库进来补充系统性能。
4、缓存
缓存一词搞技术的都接触过，很多地方用到缓存。网站架构和网站开发中的缓存也是非常重要。这里先讲述最基本的两种缓存。高级和分布式的缓存在后面讲述。
架构方面的缓存，对Apache比较熟悉的人都能知道Apache提供了自己的缓存模块，也可以使用外加的Squid模块进行缓存，这两种方式均可以有效的提高Apache的访问响应能力。
网 站程序开发方面的缓存，Linux上提供的Memory Cache是常用的缓存接口，可以在web开发中使用，比如用Java开发的时候就可以调用MemoryCache对一些数据进行缓存和通讯共享，一些大 型社区使用了这样的架构。另外，在使用web语言开发的时候，各种语言基本都有自己的缓存模块和方法，PHP有Pear的Cache模块，Java就更多 了，.net不是很熟悉，相信也肯定有。
5、镜像
镜 像是大型网站常采用的提高性能和数据安全性的方式，镜像的技术可以解决不同网络接入商和地域带来的用户访问速度差异，比如ChinaNet和EduNet 之间的差异就促使了很多网站在教育网内搭建镜像站点，数据进行定时更新或者实时更新。在镜像的细节技术方面，这里不阐述太深，有很多专业的现成的解决架构 和产品可选。也有廉价的通过软件实现的思路，比如Linux上的rsync等工具。
6、负载均衡
负载均衡将是大型网站解决高负荷访问和大量并发请求采用的终极解决办法。
负载均衡技术发展了多年，有很多专业的服务提供商和产品可以选择，我个人接触过一些解决方法，其中有两个架构可以给大家做参考。
硬件四层交换
第 四层交换使用第三层和第四层信息包的报头信息，根据应用区间识别业务流，将整个区间段的业务流分配到合适的应用服务器进行处理。 第四层交换功能就象是虚 IP，指向物理服务器。它传输的业务服从的协议多种多样，有HTTP、FTP、NFS、Telnet或其他协议。这些业务在物理服务器基础上，需要复杂的 载量平衡算法。在IP世界，业务类型由终端TCP或UDP端口地址来决定，在第四层交换中的应用区间则由源端和终端IP地址、TCP和UDP端口共同决 定。
在硬件四层交换产品领域，有一些知名的产品可以选择，比如Alteon、F5等，这些产品很昂贵，但是物有所值，能够提供非常优秀的性能和很灵活的管理能力。Yahoo中国当初接近2000台服务器使用了三四台Alteon就搞定了。
软件四层交换
大家知道了硬件四层交换机的原理后，基于OSI模型来实现的软件四层交换也就应运而生，这样的解决方案实现的原理一致，不过性能稍差。但是满足一定量的压力还是游刃有余的，有人说软件实现方式其实更灵活，处理能力完全看你配置的熟悉能力。
软 件四层交换我们可以使用Linux上常用的LVS来解决，LVS就是Linux Virtual Server，他提供了基于心跳线heartbeat的实时灾难应对解决方案，提高系统的鲁棒性，同时可供了灵活的虚拟VIP配置和管理功能，可以同时满 足多种应用需求，这对于分布式的系统来说必不可少。
1. Don’t be ‘Mrs. I Don’t Know What I Want, But I’ll Know it When I See It.’
This kills budgets and…sometimes…graphic designers. Have a clear understanding of how you envision your site, including what you want and what you don’t want. With the help of the project team, nail down your aesthetic values and preferences. If you’re lost, start with 5 sites in your business vertical and make lists of 10 visual likes and 10 visual dislikes. Write them down. If there are several people involved in design decisions, you may want to hold a meeting with them beforehand to make sure there aren’t any internal conflicts. Have everyone do this exercise and then compare notes. This will allow the design team to better meet your needs and expectations and avoid wasted budget.
2. Don’t play “Stake-holder Surprise!”
Waiting too long to involve decision-makers can lead to costly changes, timeline extensions, and frustration for everyone involved. If the words “time and materials” fill your heart with joy, then by all means wait to unveil the designs to your boss or your owners until the last moment. But if you want a product delivered on time and on budget, keep all stake-holders involved from the beginning. Time invested upfront reviewing progress, will save these busy people more time later.
3. Don’t make design changes after design is approved.
Understand that once the designs are approved and build-out has started, it can be extremely costly to make any design changes. Any design changes to the site will involve more design time, and the developers may need to partially rebuild the site. Just as you wouldn’t tell your architect to add another bedroom to the blueprint after construction has started on the foundation, don’t change your website blueprint in the midst of development.
4. Don’t build that inscrutable moving-target, chinese character flash nav because it’s cool or edgy. You are niether.
It’s great to come up with unique ideas and stand out from the crowd, but be sure your design follows established usability principles. Conventions are the good guy here. Your web designer should have a clear understanding of these rules, and should let you know if any of your ideas are breaking them. For more information on usability, read Steve Krug’s Don’t Make Me Think. It’s a one sitting read.
5. Don’t break visual hierarchy.
The basic hierarchy should go: Logo > Page Title > Body Copy. Never enlarge body copy to a size larger than the page title to make something stand out, you will only confuse your users and your site will not look professional.
6. Don’t use long lines of text.
Magazines and newspapers use columns of text on a page because it is hard for the eye to follow a long line of text. The same holds true for websites. Keep the horizontal length of your lines of text short.
7. Don’t display more than one motion graphic on a page.
It is very distracting and confusing for a user to have two motion graphics fighting for their attention while they decide what their next action will be.
8. Don’t use more than 3 fonts throughout your site
(This doesn’t include your logo). Using more than 3 fonts will give the site a cluttered, inconsistent, unprofessional look. Also, maintain consistency in typeface and size for page headers and body copy. Pink, bold, 30pt text for that one event teaser (because it’s so important!) will only make people look to a more professional site for event information.
9. Shoot for a content-area with a width of around 900 pixels plus or minus
The 800 X 600 pixel days are gone. Those with screens at that resolution either live in Baluchistan or an old folks home. For the latest stats on browser display sizes, visit the wc3 (http://www.w3schools.com/browsers/browsers_display.asp). Similarly, if you’re on a gargantuan late-model iMac, don’t ignore the standard screen size of 1024 X 768 pixels. Many of your viewers will approach your site from laptops and will need space for scroll bars on either side. Gutters allow the page to breath. It may look small on your 30 inch monitor, but your site must cater to the status quo.
10. Don’t use drop shadows on navigation.
Heavy drop shadows (on just about anything) will make your site look so 1996. On navigation, it will usually make the text harder to read. Other lame 1990s tricks include glaring gradients, anything to do with rainbows, flashing gifs and garish backgrounds.
How is the web different from the print media？
In contrast to print media, the Web is a different ball game altogether. Here the designer has little control on the page display since it depends mainly on the browser. Though frustrating, making a web page look similar on the various browsers is great fun because it’s so challenging and one ends up learning a lot!
When creating a site, the web designer has to keep the following:
• The various browsers
• The various versions of the browser
• The operating system used by the visitor
• The color depth of the visitor monitor
• The screen display area
• The availability of plugins
Know more on the variability of web page displays across client machines.
With such a number of variables governing web page display, it is not always possible to have a web page display correctly across different client machines. And like I mentioned, this is the real excitement of web design.
However, you need to bear in mind that a web site is not designed for you or boss – Just because there is a Flash intro on another site does not mean you need to have one for your web site. The take home message is that your web site has to be designed for its audience – your prospects and customers! Good web designers look at their web site through the eyes of the prospect.
For example, if you run a site which sells products for the elderly, you should make the layout easy, the font size large and the design simple. You should regularly analyse your site statistics to check which browsers the majority of your visitors use, or if they have JavaScript turned on, or the browser plugins installed on the client system etc. It is thus, of utmost importance to understand the demographics of the visitors and the technologies they use.
Optimal web page file size and optimizing web pages
MKT web pages is the most important aspect of web site design. An optimized web page loads quickly on the client system so your web site visitors can quickly get the information they had come for. Making visitors wait patiently while a Flash intro loads is a sure method of saying goodbye to them. Remember, the browser Back or Close Window buttons are just a click away! Does this mean that Flash intros should not be used? Now, that’s a tough question… and you will find the answer in – www.mkt-china.com
One of the elements of good web design is a lack of the elements that make bad web design. If you stay away from everything listed on the page about dorky web pages, you’ve probably got a pretty nice web site. In addition, keep these concepts in mind:
Text
Background does not interrupt the text
Text is big enough to read
The hierarchy of information is perfectly clear
Columns of text are narrower than in a book to make reading easier on the screen
Navigation
Navigation buttons and bars are easy to use
Navigation is consistent throughout web site
Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
Frames, if used, are not obtrusive
A large site has an index or site map or Blog
Links
Link colors coordinate with page colors
Links are underlined so they are instantly clear to the visitor
Graphics
Buttons are not big and dorky
Every graphic has an alt label and a matching text link
Graphics and backgrounds use browser-safe colors
Animated graphics turn off by themselves
General Design
Pages download quickly
First page and home page fit into 640 x 460 pixel space
All of the other pages have the immediate visual impact within 640 x 460 pixels
Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages.
Please look at the home page of China’s most-popular website (all of these screen shots are a bit old, but things haven’t changed much). You can click on the image to see it in detail.
Above is the home page of 163.com, showing just what you can see “above the fold” (in other words, without scrolling down).
Now, here’s the above-the-fold home page of an International news site:
For those of you who might argue that 163 is a “portal” and not really a news site, here’s the above-the-fold home page of most popular portal site in the US:
In addition to preferring higher information density per square inch, Chinese readers also seem to prefer higher density per page view. Once again, here’s the home page of Yahoo, showing the entire home page.
Here’s the full-length home page of Sina.com, from the same day:
In case my point isn’t clear, below I’ve placed the full-length web pages of the three sites side-by-side, to scale:
Most International are by now nodding their heads: “Yep. Love those US sites. Much more advanced. Clean, simple design. Not cluttered. Guess those Chinese guys will figure that out sooner or later.”
What’s fascinating is that my Chinese friends have a very different take on the International sites: “They look skimpy, and empty. Where’s all the content?? The home page is just navigation.”
After talking about this issue with many friends, it appears that Chinese and International look at/read websites in very different ways. [To forestall critics, when I say "International " I mean native English speakers and readers who live in America, even though there are obviously many International who don't speak English natively].
While it’s clear that both peoples “scan,” and then only sometimes “read”, the way they scan is very different. Chinese people strongly prefer a density that is far beyond what most International can tolerate. In addition, Chinese people seem to be scanning for keywords (or more precisely “key-characters”), while International like to read “headlines” (aka short pithy phrases) and look at arresting photos.
So here’s my question: “Do Chinese online users and International online users scan/read web pages differently? if so, why? What does that mean for online business?”
Then I started to think about what might explain the differences online, since they seem to exist only there. Said another way, are there unique “online” circumstances in China that might be influencing home page design?
I think the answer is yes.
In the US, online advertising is (mostly) sold by “page view”. For example, an advertiser buys a certain amount of page views over time. In China, most online advertising is still sold by time-period, as in “buy an ad on the home page for one month.”
Is this the explanation?? If so, does this mean that when (if?) China moves to a per-impression model, home pages will get shorter and less dense? Or has the online audience in China become accustomed to super-high density? If so, then how come newspapers are no longer as dense as they were?
MKT hope you’re starting to find these questions as interesting as we find them. Any ideas or comments please let us know.
MKT SEO Team.
