|
Author: Jim Ramsey
《San Francisco Examiner》最近成为美国最畅销的报纸之一，其原因是什么呢？答案是，他们完全采用WEB标准来发布站点，利用有效XHTML来替代tables的排版方式。
我在《Examiner》做站点主管有4年多了，并且很多次的重新设计网站。但每次重新设计，HTML代码和JavaScript都显得很笨重、麻烦。最终，还是给我留下令我感到异常复杂、并让人气馁的经历。
之后我发现了WEB标准。然后就频繁地出入于A List Apart ，Douglas Bowman的Stopdesign ，还有Dan Cederholm的SimpleBits 这些站点。与那些依靠着图片和动感为基础的FLASH站点相比，这些站点更注重内容、排版、简洁的制作和更实用的页面架构设计。
这些网站看起来真是太棒了。更重要的是，它们依靠HTML代码和单独的CSS来支撑起整个页面架构。看完这些页子的代码之后，我简直都不想再用table了。
我渐渐的开始将更多的CSS合并到以table为基础的页面中。那还是在几个月前，我打开《San Francisco Examiner》网站广告时就下定决心——要求彻底重新设计。我意识到，这无疑是一个创建完全适应WEB标准站点的完美机会。
整个"旅程"大概要一年时间，并且要经历许多个版本。它不只一次的让我感到灰心和进度缓慢，不过WEB标准的优势是不可否认的。
再见，我的老朋友
一些苦乐参半的小经历就是在利用WEB标准设计的时候，补白图片（spacer.gif）的消失。还记得我最初开始学WEB设计的时候，那是不可思议的方法，利用1像素（1px）透明图片就可以让table变成任何你想得到的样子。但是现在，这种补白图片（spacer.gif）也将"濒临灭绝".我再使用它也是为了查看在《Examiner》站点中的效果有何不同。
三月，当我们的网站还处于table与CSS架构过渡阶段，光是补白图片（spacer.gif）就独占了90MB的带宽，占每月总流量的0.3%.七月，当我们转换到以CSS为基础的站点后，它只占用了2MB（0.004%）不到的当月带宽（那只是一些还没有来得急更新的旧文章）。
不可否认，削减掉不到1%的月流量是无足一提的，但是消失的补白图片（spacer.gif）却显得和抛弃tables转换为CSS与WEB标准的站点一样有趣。当它开始为我们节省带宽的时候，补白图片（spacer.gif）简直就像是冰山一梢。
够简洁，伙计！
这是我们在进行重构之前，最后一年导航栏的基础链接代码。
<tr> <td class="navmenu" height="18" onClick="javascript:rolloutNav(this);document.location='/home/index.cfm'" onMouseOver="javascript:rolloverNav(this);" onMouseOut="javascript:rolloutNav(this); " colspan="2"><a href="/home/index.cfm" class="nav">HOME</a></td> </tr> <tr> <td bgcolor="#EEEEEE" class="navmenuspacer" colspan="2"><img src="../site_images/spacer.gif" width="1" height="2"> </td> </tr> 看看现在的Examiner 的导航栏都是像这样的代码。
<li><a href="/home/">Home</a></li>
那是很大的差别。事实上第一种真是糟透了，我很困窘把它包括在这里。但是我又拿什么去填充那额外的部分？基本上，没有任何东西。用JavaScript产生的滚动效果和用table控制的网格间隙，所有这一切都可以用样式（styles）来解决。
让我们看另外一个例子。这是一个采用标准前，由一个文本片段链接到一篇故事的代码。
<img src="../site_images/sfex/homekickerarrow.gif" width="6" height="8"><span class="kicker">Movie Review: Dickie Roberts<br></span> <a href="../templates/story.cfm?displaystory=1&storyname=090503a_dickie" class="headlinesm">Problem 'Child'</a><hr noshade size="1" color="#EEEEEE">
而这是利用标准完成同样效果的代码。
<h5>Movie Review: Hero</h5> <h4><a href="/article/index.cfm/i/082704a_hero">Holding out for a 'Hero'</a></h4> 重复一下，一旦第二种应用了样式（styles）会达到和第一种同样的效果。当你可以用这种方法简化你的代码时，它将在节省你的带宽中起着重大的变化。
用我们新的基于标准的站点同最后一年基于table的站点相比较，我们首页的信息总量是相似的。二者基本上包含相同的元素，然而HTML只有13K小于CSS版本的19.6K.
结果表明，尽管我们2004年7月的通信量高于2003年9月，但是这两个月我们的带宽基本上是一样的。
正确位置的链接
从站点中的一个链接直接连接到打印页中一篇文章的做法在普遍不过了，我也能理解这种动机。有些网站会预防盗链。然而这也会警告网站的发布者谁产生了广告收入。
打印页很少提供广告并且通常不提供像常规网页一样的导航。结果，访问者就只访问了这个页子而很少喜欢再去访问这个站点里的其他网页。
在基于标准的站点中，然而，打印模板被替换成打印样式，这些样式被应用于常规页和只提供打印服务的页面。它们直接连接到那些规则的文章页里。不仅可以节省带宽，更可以重复使用文件，而且站点的管理者还可以保证站点的商标持续存在，增加广告收入，并且还可以使浏览者查询或浏览到站点里的所有页面。
"Making a silk purse out of a sow's ear"把WEB标准提供的无数个"under the hood"的优势累积起来，作为一个站点的正文，CSS——设计师的梦。电脑屏幕并不是迄今为止最好的文本阅读器，所以令"观众们"有更好的体验是一个以文本为主要内容的网站的设计者应当首要考虑的问题。
一份印刷报纸的版面是有限的，所以空间与线之间都会紧密相连，以便更可能有效的来布置内容。然而在网页中，设计者们则不必要去用同样方法处理空间的局限性问题。即使不用基于标准的全新设计，大多数站点也可以利用提升重要性(using line-height)或增加文章段落空隙(using margins)来改善可读性。
取得飞跃
其实我有点担心越来越多的报纸和媒体网站开始采用WEB标准。它有举不胜举的优势，当浏览器对其的支持得以改善，不利条件就几乎不存在了。
但是这仅仅是给各位一个正确的导向，这里是来自五大主流报纸站点的有趣的统计：
Newspaper Spacer gifs HTML size *
Washington Post 20 120.7K
New York Times 62 69.8K
Los Angeles Times 66 83.0K
USA Today 153 79.3K
Christian Science Monitor 215 74.1K
*每日HTML变化的精确大小。
一年内反复检查这些数字的变化是件非常有趣的事。我希望这些网页都能采用WEB标准，即使意味着让那些补白图片（spacer.gif）统统下岗。
出处：蓝色理想
责任编辑：moby
◎进入论坛网页制作、网站综合版块参加讨论
|
