Web设计者一般都从页面设计的构想开始，然后竭尽全力实现该设计，并向网站的每个访问者呈现相同的页面生成效果，而不论访问者的浏览器或者平台是什么。为了实现这个页面生成效果相同的目标，设计者常常都会使用浑身解数用CSS代码hack、浏览器检测脚本和其它技术及技巧。但是如果要重新评估这一方法并质疑Web页面要对每个访问者都是一样的实用性和正确性，那么现在可能就是时候了。



了解不同之处

Web页面生成效果会有所不同是一个无法避免的事实。现在，你可以在显示器、电视机、PDA和移动电话上浏览Web页面。没有哪个Web页面能够在这样大范围的输出设备上具有相同的显示效果。与这些重要的、形式上的差别相比较起来，浏览器通常碰到的兼容性问题看起来就不是那么显著了。

这并不是说不同厂商的浏览器和计算机平台之间就不存在显著的差别了，也不是说符合标准的浏览器与不符合标准的浏览器之间的差别就会更大了。这只是提醒你要正确看待这些浏览器之间的差别。

要考虑的另外一个问题是用户的首选项设置如何影响页面在浏览器生成的效果。尽管一般来说，Web的访问者从来都不会更改其缺省的设置，这是一个事实，但是还是有相当多的访问者会自定义这些设置以满足其个人偏好。有的时候，访问者会一时兴起更改自己浏览器的首选项；但是更加通常的情况是，对浏览器首选项的更改是为了满足残障人士的需要，例如那些存在视觉灵敏度过低、色盲以及其他障碍的人。浏览器的用户可以更改他们缺省的文本字体大小，设置自己的前景、背景和链接颜色；可以选择显示或者不显示图像，并调整屏幕分辨率和浏览器的窗口大小。

所有这些改变都可能影响页面显示的效果，所以向每个Web访问者呈现相同的页面效果是不可能的。即使通过技术来消除页面生成效果上的一些或者所有的差别是有可能的，这样做也是不合适的，因为这将无法避免地干扰访问者掌握自己Web体验的能力。在很多情况下，Web的构建者具有法律上的义务来遵守可访问性指导方针，以允许和鼓励访问者调整页面的显示。

所以，如果任何特定的Web访问者会碰到这样差别极大的页面显示效果，那么为什么还是有这么多的Web构建者会想方设法地掩盖常见浏览器之间页面生成效果的相对较小的差别。

陷在僵化的车轴印里

有的时候设计者忘了Web的初衷就是高度灵活的文档表现媒体。它的一个重要长处就是能够允许动态地重新安置文本和图像，这也就是说Web文档不再被限制为严格符合打印页面的要求了；相反的，它们被设计为灵活地自动适应可调大小查看窗的大小和比例。

当图形设计者首先开始向Web页面加入视觉增强效果的时候，他们对这一独特的特性常常并不感冒。这些设计者中的大多数都具有文本打印设计的背景，在文本打印上设计都是通过精确控制页面元素的大小和位置来实现的。很自然的，设计者在设计Web页面的时候倾向于使用相同的方法。典型的结果就是页面设计是以固定大小的元素（例如表格或者div）为基础的，而元素都被放在浏览器窗口里。固定大小的元素被用作背景，而其他所有的页面元素都放在这个背景上，所以这就让设计者能够在一个熟悉的环境里控制这些元素的大小和位置，而这个环境不会受到浏览器窗口大小变化的影响。

固定大小的背景元素仍然被用作今天大多数Web页面的背景元素。这就意味着Web构建者不得不长期地、不断地尽力迫使浏览器去做它们设计用途之外的一些事情，比如去显示一个静态的页面图像，而不是去重新调整文本以适应浏览器窗口（的大小）。

我相信，以对每个页面元素大小和位置的精确控制为依靠的Web页面设计的流行，要对Web构建者不愿意接受在不同浏览器里产生页面生成效果差别负部分责任。我怀疑利己主义也在作怪，因为不同于预想的页面布局可能会让人觉得设计者／构建者技术的失败。

实现优秀Web设计的关键

设计的真正目的是通过用户的参与以及用视觉效果提升内容的可读性，例如与主体的文本相区别的标题，来加强沟通。

优秀设计的关键是成功地处理元素的相互关系和比例。对于大多数设计者来说，控制元素的相互关系和比例意味着页面元素的位置和大小的精确控制。但是页面元素之间的关系才真正起关键作用的东西，而不是它们的绝对大小和位置。大小和位置只不过是设计者用来向访问者传达这些关系的工具。

要说明好的设计并不依靠绝对的大小和位置是很容易的。你需要做的一切就是按比例重新调整由各种媒体组成的精美页面布局。好的基本设计在任何尺寸都可以正常工作，从缩略图到海报尺寸，甚至更大。大多数优秀的布局甚至可以不按照比例调整大小，而不会出现紊乱。这几乎总是成立的，因为正是页面元素的顺序和相对大小才造就了设计的成功，而不是它们的具体大小和页面位置。

从理论上讲，将相同的概念应用到Web页面设计上并不是太困难。浏览器并不会重新调整（缩放）基本的页面设计以适应浏览器窗口的不同大小，事实上，它会重新安放文本和图像。这一重新调整会保留页面元素的顺序和相对大小，这就保留了大多数重要的设计元素。允许页面元素在浏览器窗口里浮动和调整将是极富挑战性的，但是这是充满机遇的。

这不仅仅是在把理论付诸实践；它是一种经过测试和验证的Web设计方法，叫做流动布局（liquid layout）。成功地使用流动布局要求远见卓识和规划。但是首先，人们需要愿意去放弃对每个页面元素的严密控制，并允许你的页面设计自己来伸缩和排列。这就表示要按照结构和排列的方式来考虑你的布局，并定义页面元素之间的关键关系，而不是去尽力苛求精确到像素的控制。（同时使用结构标记和CSS样式并不冲突。）

在页面设计上使用更加灵活的方法有很多优势。一旦你接受了页面布局是一个流动变化以满足不同浏览器窗口的动态设计，那么你就很快会意识到页面并不需要为了看起来漂亮而在每一个浏览器窗口里都看起来完全一样的。这就让你去接受很多可以接受的生成效果，而这反过来会让生成的页面在目标浏览器来看起来漂亮，并使得页面在所有浏览器都保持清晰易读的目标更容易实现。

页面设计对浏览器差别的容忍度越大，你就越可能需要使用更少的代码hack和其它技术来处理浏览器的兼容性问题。（你可能无法完全避免不使用hack，但是任何对hack使用的减少都会让你的代码开发更加迅速也更容易维护。）最后，使用流动布局将有利于鼓励和推动更好的代码编写实践，例如结构标记和CSS样式的联合使用。