响应式 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先是愚蠢的。重点在于用户体验，而非“先为手机终端开发”。说到这，顺便说一句，你的意见比文章更有指导性。干的不错。全部的文章都会说“这会导 致返工和大量的错误”，可是开发者不该该在没有理解缘由的状况下盲目的跟随这写建议。