浅谈关于阿里巴巴中文站的Web重构

在写过《Web技术：易趣 vs 淘宝》与《Web技术：易趣 vs 淘宝 (2)》之后，很久没有关于关于 Web 的东西了。前几天看了一下阿里巴巴的中文站点，感觉还是有点失望的–全球领先的 B2B 站点怎么对 Web Design 这么漠不关心呢?

站点的亲合力究竟重不重要 ? 答案是不言自明的。但是为什么有那么多大的网站还是对此不加以重视呢? 实行Web标准技术上难以实现? 当然不是! 成本太高? 也不是! 那么是为什么呢? 我个人觉得有点类似于我自己每天临睡前发誓第二天要早起跑步一样，虽然看起来简单，但是到时候就是没有那个决心而已!(亲合力不等于 Web 标准,假定这里的意思都是通过这些内容可以让你的用户有更好的浏览、使用体验.)

闲话少说，看看阿里巴巴中文站(http://cn.alibaba.com/)都有哪些我”忍受不了”的地方.首先可以肯定，当前(今天是2005年5月22日)的页面是和 XHTML 4.01 是不兼容的。然后我们用老方法，看看源代码。第一个感觉很糟糕的是一大段 CSS 摆在那里.粗略估计了一下，这段 CSS 大约 有 20K 左右。而实际上首页如果去掉图片的话也不到 140K 。真的不知道页面设计人员维护首页的这段代码是否会感到吃力? :) 我以前说过:

对于一个大型电子商务站点来说，每天节省哪怕5%的网络流量是什么概念？用户浏览每个页面会节省更多的时间，相同的时间里就能看更多的页面。而对公司来说，Web服务器的压力就会越小，最主要是，会节省大量的资金!! 后台的DBA和程序员们可能正在为优化程序而大伤脑筋，但是页面上却在大量的”浪费”。

接触一点的Web重构的人都能说出来:网页分为结构、表现和行为三个部分等类似的话。这段 CSS 在这里已经足够说明 阿里中文站(http://cn.alibaba.com/)的设计人员根本没有考虑到这些。不信，可以点击我要采购链接进去看看这一页的代码，又是一大段乱糟糟的 CSS。潜在的问题就是：整个站点的风格很难统一，维护起来工作量很大。

是的，现在发现了页面的一个最主要的问题：CSS 没有和内容剥离。也就说，结构和表现是基本混在一起的，分不清哪些是骨头哪些是肉。因为没有严格的必须从 CSS 中取得对象的属性，所以有的时候 程序员(写HTML代码的或者是DW 熟练者)可能会对新的对象直接加上一点属性。比如行业资讯那里时间的属性定义：font color=”#666666″ class=”S” 。完全有点随心所欲的性质(甚至我还发现了注释中的错别字).也会造成另一个间接的后果：代码臃肿。

在查看源代码的时候我发现了一个很有趣的现象：阿里巴巴中文站 首页上居然几乎没有使用表格。或许 Web 设计人员已经读过了那篇著名的：为何使用表格排版是不明智的(http://www.onestab.net/seybold/index.html).并已经朝这个方向进行了努力。可以点击站点链接，发现在别的页面还是好多表格.看得出来,使用表格这个事情上,开发人员也是有着不同的理解与习惯的.当然,习惯有好有坏.比如”我要销售”这个页面上,表格的属性就定义的乱七八糟的.现在很多 Web 设计大师都在提倡尽量少用表格.但是也没有矫枉过正,很多人也承认在很多的时候表格还是不可替代的.

接下来我测试了一下页面能否在不同浏览器中显示一致的内容.很糟糕.在 Firefox 中,页面会显示出来一个 Bug.看下面的图:

对阿里巴巴的用户来说,可能国内使用 Firefox 浏览器的相对比较少,可是也不要给用户一个”不专业”的感觉.毕竟,这是”门面”上的事情.

发现了这个问题之后,我又回到首页仔细观察一下首页.嗯,我似乎又发现了一点平时没注意到的东西.比如,字体统一性问题.图片中很多字体和网页上都不是一致的.可以看得出来,这些图片也都不是一个人设计的(至少各有各的风格).假定我是一个初到中文站的用户,可能会感觉不太舒服.

要出去买东西了,暂时告一段落,待续……