响应式 Web 设计应该避免的错误

英文原文：Mistakes to Avoid With Responsive Web Design By Ramya Raju

当下，尤其是几乎人人都有一台智能手机或者平板电脑的时候，开发手机端用户体验友好的网站的重要性不言而喻。其结果是，企业所有者会因为这样的交互 网站设计能够给不同平台下（桌面端到手机端到平板电脑）的用户带来不一般的体验而去触碰交互式web设计这一想法。开发一个带有响应式交互设计的网站变得 非常有意义，因为其可以在不同的设备运行，因此，你可以节约针对不同平台开发不同网站的成本。

但是，要做最大限度相应的网页设计，有些错误你应当避免。

不要优先为桌面版设计

开发者通常会犯的一个常见错误是，但他们设计网站时优先考虑桌面版，因为在这些人严重，将基于桌面版的网站转变为针对其他设备的响应式web设计是 件很轻松 愉快的事情。但是，这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题。甚至会造成返工，当然，大量的错误也会蔓延出来。

然而，基于移动设备开发网站看起来会消耗一些时间并且在刚开始会有些困难。这是因为它迫使你在包含什么内容上做出取舍，并且以一种你不习惯的方式去 思考。然 而，这样做会使得内容和设计整体上更优秀。粗略来讲，你可以首先尝试在比较小的设备上。一旦你在手机上做出了不错的设计，适配到更大的屏幕上会变得很轻 松。

导航栏菜单的麻烦

当为移动端进行设计时，导航栏设计的问题可能会成为你的一个祸根，所以不得不避免产生麻烦。不想是固定宽度的设计，响应式设计的导航应当根据设备类型进行确定（所以智能手机的导航菜单可能和平板电脑，当然还有桌面版的导航菜单互有差异）。

许多设计者会发觉他们自己被这样一项任务搞的很崩溃——尝试设计一个可以适应所有屏幕的导航菜单。在很多情况下，设计者奋力将水平列表菜单转换为垂直列表菜单，尤其是在适配较小的手机屏幕时。然而，由于该导航栏并不是根据屏幕进行设计，这可能会导致一项很差的用户体验。

不应隐藏内容

响应式设计通常会有更少的空间展示图片和内容，但是这并不意味着你的内容应当被忽略。你不得不采取一种方式重新安排内容，使其能够保证易读性。这个 比较容易 实现，可以通过创建导航链接并且使用锚，是用户在一个页面中能看到他们一直在寻找的内容。那些通过CSS布局控制内容隐藏的应当明白，这些内容依然会被加 载，因此，你通过为用户提供完整的观看体验也没什么大不了。简单而言，用户不应该由于他们所使用的设备而遭受开发者的“惩罚”。

单独的移动端网站地址

单独为移动端网站分配一个地址整个就是一个灾难，这摧毁了我们起初交互设计的目的，并且是可以论证的。当用户在访问网站时，重定向到移动端版本，结 果是不得 不浪费了很多宝贵的时间。此外，这也能非常严重地影响到你的搜索排名。但是，理所当然，使用不同的URL也有许多优势。它可以确保你能够架构具有更轻便页 面的移动端网站，并且能够在智能设备上表现更好。该站点也能照顾到在特定平台上的性能和表现。不幸的是，具有单独移动端网站地址的消极影响远大于积极影 响。

糟糕的用户体验

你不能简单的把桌面版的内容压缩成移动版；这么做将会影响你的用户的体验，用户可能会抛弃你的产品。在手机的有限空间内创建一个友好的界面是十分重 要的。你 可以采取一些措施，比如，使用一个下拉菜单代替桌面上的导航条，这样会节省你的空间。如果你先设计的是移动端，那么这通常不会是一个令人头疼的问题。

不要忽视跨情景的公约

当你在做一个响应式的设计，你不能只考虑台式和移动手机设备，你还应该考虑到其它类型的设备。人们可能会通过内嵌浏览器的智能电视或机顶盒来访问你 的网站。 在现在，甚至掌上电脑都有不同的类型。但是，这并不意味着你可以为所有的设备创建一个相同的用户界面，你最好是为不同的设备创建不同的网站。你所需要做的 是创建一个响应导航和一个用户容易理解的设计。创建的这个导航可以清楚的保存设备的上下文环境。

不要忽视页面的加载时间

随着宽带的普及，网页开发者开始习惯在页面上大量的使用相对来说较大的资源。然而，当我们使用手机时，我们的用户使用的是较慢的2G和3G网络。同样的，那些保持minf国际的用户，他们是按使用的带宽量来付费的。

一个页面在台式机上很快的加载进来，但是，在手机上加载一个页面会花费很长时间或者去使用额外的、昂贵的带宽。更糟糕的是，当用户被迫去等待页面加载时，即使是几秒钟，他们会离开这个页面，同时你就会失去了你的流量

不要为触摸屏设备开发

今天大多数手持的设备使用的是触摸屏，甚至是很多笔记本也开始使用触摸屏了。因此，当你设计响应式设计时，很重要的一点是不要忽略掉处理触摸的重要 性。有以 下两个方面原因：第一，可点击项，比如按钮要考虑到用户的手指的大小（不要让用户缩放点击）。第二，你要正确的处理触摸事件。这么做可以克服300ms的 点击事件延迟。

总结和讨论

由于疏忽，上述这些错误难免会发生。设法去避免它们，就要确保你的响应式设计能在所有的设备类型上正常工作。

Will： “不要先在桌面端做设计”，老实说来，仅仅是个意见，我不会过多严肃的对待；

Den McHenry ：你说的可能没错，但在这篇文章中的例子看来，这确实是个正确的选择。

Will： 文章标题是“响应式Web设计应该避免的错误”，“不要先为桌面端做设计”是给出了一个例子。这里有两个自然段来解释为何不先为桌面端做设计，或者说是扩 大了对响应式web设计的无知。为什么首先在桌面端设计是错误的呢？建议可能是错误的，盲目跟风而不是明白自己为什么这样做是更大的错误。

Den McHenry： 我理解你这种对趋势的下意识反应，但是手机先的设计原则并不像扁平化设计或者其他的设计。这是事实，基于大量的证据，当这种观点被听众所获得时，它更关注 于什么是最重要的，并且提供了针对跨设备的最好的经验。若要将两种既定的方式进行类比，桌面先是优雅退化，而移动端先则是渐进增强。在第一种情况下，您创 建您想要的网站，并决定需要移除什么或如何做出改变已适应其不能匹配的设备。在第二种情况下，您的构建则完全像盖房子从地基开始，为各种视图考虑最佳的经 验。这并不是说你不能在真正的设计（如需求，构建，测试，迭代）开始前和在构建中完成桌面端的理想设计，但是针对适应性和可用性而言，做减法相比做加法确 实会产生更多的错误从而增加时间成本。想象一下一个汽车制造商首先构建一个昂贵的模型，然后将组件做的更适配。想象一下一个建筑设计师先设计一个房子，然 后规划房间来满足你的需求。你失去了结构完整性和具有凝聚力的设计，同时在每个阶段引入新的 bug。老实说来，上文中关于首先在桌面进行开发的缺陷已经写的非常清楚了，我不明白你的意思，看起来有点无脑黑的感觉。

Will： 不好意思，我不接受你的观点。你的类比并没有道理，因为在web开发中，你其实是可以非常容易的减少空间适配更小的空间。此外，手机端首先怎么避免这些问 题呢？你主观上强迫减少了这些情况的展示。我觉得现在手机终端做设计和在经验丰富的桌面端做设计都是可行的，但是可能缺乏比较好的用户体验。这就是为什么 我觉得X先是愚蠢的。重点在于用户体验，而非“先为手机终端开发”。说到这，顺便说一句，你的意见比文章更有指导性。干的不错。所有的文章都会说“这会导 致返工和大量的错误”，但是开发者不应该在没有理解原因的情况下盲目的跟随这写建议。