在设计响应网站时会遇到很多令人讨厌的陷阱，我们应该尽量避免。R/GA的Brad Frost揭示了其中最严重的五种误区，并且阐述了如何避开它们。

使响应设计具有良好的用户体验所需要的东西远远不止媒体查询这么简单。如果你认为响应设计只是创建柔美的布局，那只能说明你 不得要领。实际上，我们需要将固有的用户体验在越来越多的移动设备上进行实现。如果只是简单地在每种设备上独立地实现用户体验，从长远来看是不可扩展的。创建自适应的用户体验是个明智的选择，但实现起来是很具挑战性的。

下面是一些在进行响应设计过程中应该避开的误区：

1.         隐藏内容

因为采用响应设计的诸多网站共享同一个代码库，这样很容易实现 内容一致，而内容一致是个很不错的方案。然而，也有例外，有许多响应网站都为了适应小屏幕设备而隐藏或删除内容。

请遵守这一简单的原则： 不要让稀客失望。用户满怀希望来访问我们网站、享受我们的服务，满足用户的需求是我们的职责。桌面用户所使用到的功能，移动用户同样也需要，而且一定要让移动用户可以正常地使用这些功能。所以，要尽最大努力，尽量使更多的用户可以访问你的网站、使用其功能。

另一点值得注意的是：带有CSS的内容虽然被隐藏了，但还是会被加载。这是很影响性能的。这正好引入下一个应该避开的陷阱。

2.         内容膨胀

不应该在小屏幕设备上略去主要内容，而且你一直在努力实现完美的用户体验而从来不考虑网页内容。貌似一切都很合理，不是吗？其实不是，因为现在有太多的东西需要加载，这需要消耗时间。 如果一个页面用了5秒钟还没打开，74%的移动用户将会离开（PDF），不幸的是：所有响应网站当中，只有3%的小屏幕版本比其相应的大屏版本更轻量级。这就意味着用户要忍受后台大量下载所带来的时间开销。

Barack Obama的响应网站上一般的页面大小都在4MB以上。这在任何标准下都是不可接受的，更别说在EDGE、３G或是低速WiFi的联网环境下。

对于一个面向普通用户群（无论是何种种族、何种信条、何种肤色、何种宗教）的网站来说，这会导致很严重的访问问题：

的确，其中一部分是RIM所需要的东西，但这些也的确是我们需要关注的。

进行web响应设计时最大的挑战之一是：提供完整的用户体验时各因素能很好地协调，并且使所有的用户都能得到很好的体验。去掉程序中的冗余内容，遵循性能最佳实践，不要以为默认连接是健壮的，想法探索先进技术（如 conditional loading）使原始页面大小尽量减小。

3.         忽略设备上下文约定

手机不是平板电脑、不是笔记本电脑、不是台式机、也不是电视机。

每种设备都有自己唯一的外形尺寸、接口标准、限制和使用机会。为了让用户体验更加自然，我们应该把所有这些因素都考虑在内。我并不是建议在浏览器中为每种平台都创建各自的本地UI，但我们的确有必要留意一下用户使用设备的习惯，比如：他们习惯于看什么样式的图标等等。浏览器中好的响应设计应该能够避开沙箱效应，不管用户如何使用也不管是何种设备上下文。 按照定义，web响应设计并不等同于移动设计，所以是否在设计中考虑上下文环境因素取决于我们自己。这就意味着，要使响应导航能够跨上下文、设计能够很好地适用于触摸屏、避免让移动用户下载一些不必要的内容。

考虑到设备之间的差异如此之多，自然会理解折衷处理的必要性，这里只是提出一种融洽地处理上下文环境的思想。

4.         同一尺寸应用于所有设备

各种移动设备之间的差异有很多方面，不仅仅是屏幕大小的不同。由于新型设备不断涌现，也就会滋生更多全新的用例、出现更多的使用模式、也会出现更多意想不到的情况。我们不应该仅仅因为创建响应布局就妄自菲薄。例如，我们有时会忘记手机可以定位、通话等等。这些设备上的浏览器有望在不久的将来提供更多的访问设备的APIs，这样，web的功能将进一步扩充。

我们应该充分发挥设备的硬件功能。处理约束为我们打下了很好的基础，而后，我们可以利用渐近增强、特征检测等技术使用户体验进一步地提高。

5.         依赖设备的分辨率

320px. 480px. 768px. 1024px. 各种各样的分辨率，样式实在太多了。

实质上，我们无法控制用户的设备屏幕大小，也无法左右制造商生成何种设备。请相信我，他们正在尝试生产所有的型号。

永远不要依赖于设备分辨率

另外，由于浏览器上书签栏、chrome和Ask Jeeves工具栏的使用与否，会引起页面高度不断变化。但是，目前在移动web领域根本不会通过浏览器来衡量用户体验的好坏。我们通过Facebook、Twitter及其它应用业来访问链接，所有这些应用都内嵌了自己的浏览器。当然，链接层次太多仍然是个问题，而你想要的是网页加载速度越快越好，但是，在现有像素高度的情况下，链接层次和速度不可兼得，所以要学会放弃。

Jeremy Keith在其文章“ Fanfare for the Common Breakpoint”中铿锵有力地指出“关键问题不是在断点处发生了什么，而是在断点之间发生了什么。”这就是说，我们设计的东西，无论尺寸大小，都应该是一个良好结合的整体。

让设计本身来决定何处应该出现断点。我很喜欢Stephen Hay的建议：“ 从小屏幕开始，然后不断放大，直到图像看起来不像样时，插入断点。”

在响应设计中，把断点放置的决定权交给内容本身。我们的目标是，让我们的设计不仅现在看起来美观，在将来也一样很好看。

 要不断发展:

我们创建自适应的用户体验，这只是冰山一角。为了创建自适应的用户体验，我们应该无条件地避开这些陷阱（当然还有更多本文未提到的陷阱）。每天都有很多不同型号不同尺寸的设备问世，作为web开发人员，我们总会碰到这些设备。这的确有点令人生畏，但我们应该接受挑战，把握机遇，尽量扩大我们的用户群。

作者：Brad Frost，发表于2012年４月27日

译者：林建光

原文链接： http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid

您可能也喜欢：
关注Web响应式设计的局限和误区	2012年Web设计和开发的15个趋势	18款精美CSS3 Web设计	6条建议帮助你开发优秀Web应用程序
无觅