响应式网页设计_响应式网页设计大战策略

自2013年以来，似乎每个人都将响应式Web设计 （RWD）称为移动站点开发的救星。这也是合理的，因为RWD是当前唯一一种普遍有效地处理任何设备分辨率的方法。 它试图将这个混乱的，基于浏览器的世界统一起来，这个世界因硬件业务竞争而导致的碎片化问题。

但是可惜，响应式Web设计并不是您要寻找的救世主，因为它有其自身的一系列缺陷。 然而，这对于Web设计的未来而言太突出了，因此冲突在Web设计人员之间引发了一场火焰之战。

由于我们严格实践“做设计，而不是战争”的理念，因此今天我们在这里探讨响应式Web设计的5个核心缺点，以及减轻设计人员和客户不得不承担的破坏性后果的各自论据和解决方案。 如果您不确定RWD是否是您要寻找的道路，请在此处获得启发。

1.消耗加载时间

成功的网页设计的第一条规则：使其尽可能快。 对于移动速度相对较慢的移动用户而言，这一点尤为重要。 但是，响应式Web设计显然反对快速加载速度 。

这意味着，如果您拥有一个响应Swift的网站，则很有可能您的竞争对手的针对移动设备进行优化的网站会比您的网站更快。 延迟是因为要访问响应式网站，您必须首先加载网站的所有图像和脚本 ，即使不需要其中的某些图像和脚本也可以在移动设备上显示。

这导致网站加载速度急剧下降，所需时间比专门针对移动设备优化的专用网站长7倍 。 确实是一场大灾难，尤其是当您正在建立电子商务网站时，或者如果您的网站不具有足够的知名度来冒险测试访问者的耐力时，尤其如此。

在支持方面

实现是这里的问题。 如果您不想要该内容，则可以不加载它，或者有选择地加载它-这就是条件标记的作用。 还有许多工程解决方案可用于优化脚本的加载行为，例如， 自适应图像可检测屏幕大小并动态将适当缩放的图像传递到网站。

另一个聪明的方法是使用惰性加载 ，该技术命令站点在稍后阶段加载图像内容 ，从而将文本内容置于最高优先级。

在其他情况下，您也可以切换到单独的样式表，以防止加载不必要或过大的元素。

2.它破坏了功能驱动的网站

用户在任何设备上访问网站时，都希望获得每项核心功能-从搜索到导航，从类别到操作按钮 。 那时问题就来了，因为响应式网站最常见的方法是将其压缩并堆积成冗长而乏味的功能列表，有时甚至隐藏在某个地方。 准备看到导航菜单挤满整个屏幕，或者找不到真正需要的按钮

隐藏不必要的功能？ 这也不是一个理想的解决方案，因为每个用户在某些功能上都有自己的喜好，而删除其中任何功能肯定会破坏可用性。

就是说，响应式Web设计更适合以内容为中心的网站，而不是功能驱动的网站 。 您必须以可用性来换取灵活性 ，而像PhoneGap这样的移动站点开发框架可以解决上述所有问题。

在支持方面：

尽管与移动站点开发框架相比，RWD的功能非常有限，但实际上有许多技术可以优化响应式Web设计的可用性。 对于导航菜单，可以将其转换为用于移动设备的下拉菜单 ，并且相同的方法也可以应用于类别部分，或者甚至可以为子类别实现手风琴布局 。

最棒的是，您甚至可以将它们隐藏在屏幕右上方的按钮中，并且仅在需要时才会弹出 ，因此为操作按钮留出了更多空间。 所有这些都可以通过传统CSS和JavaScript轻松实现。 无需复杂的开发框架。

3.破坏广告模式

与其他任何Web元素不同，作为发布者，广告不是我们可以完全控制显示的内容。 即使我们可以调整广告尺寸来满足“响应式网页设计”的要求，但由于大多数网络广告业务都是基于广告展示位置，因此这将破坏与广告客户的交易。

由于所有内容都已绑定到预定义的分辨率中，因此这迫使广告商重新考虑您网站上广告的价值 ，并且排名靠前的广告可能会被迫移至网站的其他位置，否则会破坏版面。

该死的是那些依赖广告网络（例如Google AdSense）的网站，这些网站不提供自适应广告。 也不要指望他们会为您解决问题 。 它们的实现很复杂。

在支持方面：

相当“幸运”的是，大多数广告客户对响应式Web设计了解不多，但是如果他们开始对此问题提出疑问，这是对您的绝妙建议- 打包出售广告 。

简而言之，与其在桌面版本的网站上销售排行榜广告，该广告将以特定的分辨率消失，而应包括针对一组不同设备分辨率的其他类型的广告 ，然后将其打包销售。

重点是也要响应您的网络广告模型 。

对于Google AdSense，您可以根据设备分辨率在Google广告之间进行切换 ，例如iPad的排行榜广告，iPad Mini的横幅广告和iPhone的文字广告。 最安全地说，这是唯一的方法，因为如果您更改广告代码的任何部分，都有可能违反Google AdSense服务条款，因此请对其进行处理。

4.不兼容IE 8

在您将响应式网站提交给公司客户的第一天，希望他与您联系，并询问为什么该网站无法在其计算机上运行。 询问他正在使用哪种浏览器，是否有机会在IE上运行该网站。

您如何通知他，他的网站与当前在全球浏览器使用量中占24％的浏览器不兼容？ 这听起来完全是您可以做出的最糟糕的决定，但这是一个令人痛苦的事实，Internet Explorer 8及以下版本不支持RWD的基础StrutsCSS3媒体查询。

在支持方面：

在RWD首次亮相时，IE8的兼容性是该方法的巨大缺点，但是您现在可以使用Scott Jehl开发的Respond.js在数小时内解决这个看似注定的问题。

该脚本的效果非常简单，它支持min-width，max-width和IE8及以下的所有媒体类型 。 或者，选择支持相似功能集的CSS3-Media-Queries 。

每个脚本肯定都有缺陷，但是比看到天空落在头上要好得多。 但是，这还不是世界末日，因为只有少数移动用户使用Internet Explorer 8浏览Web。

5.经验，时间和成本密集型

对于Internet上任何流行的技术流行语，我们经常会持非常乐观的态度（我盯着你看， HTML5 ），直到我们将其实际应用到产品中为止。 从上面讨论的4个缺点中，您可以理解，实现响应式Web设计需要丰富的Web技术和设计模式经验 。 用试错法达到目标真是太疯狂了。

最重要的是，该方法在浏览器将完美显示设计而没有错误的前提下工作。 当然，这不是事实。 考虑到RWD的流动性， 每次布局根据屏幕分辨率和方向更改其结构时 ，都会出现无法预料的错误 。

这意味着您需要在每个移动浏览器上测试所有分辨率，以使每个分辨率都能正确呈现。 有点夸张的功能，不是吗？

在支持方面：

除非您要显示用于移动设备的网站的桌面版本，否则其他任何可行的方法（针对移动设备优化的网站或混合应用程序） 都将消耗与RWD一样多的经验，时间和成本 。 得益于所有出色开发人员的努力，RWD现在是最容易烘焙和测试且学习曲线相对较低的工具。

预防胜于治疗，如今，防止浏览器错误很简单，因为存在许多可帮助Web设计人员的教程 ， 框架和工具 。 对于初学者，您可以从Twitter启动Bootstrap ，以轻松地集成响应式布局，并避免大多数知名的浏览器错误。

在测试阶段，尽管需要特别注意的是， 在真实设备上进行测试总是更好 ，但在线测试服务也得到了显着改善，可以显着减少您的工作量，例如，请使用Screenqueri.es 。 它甚至允许您模拟风景模式的视图 。

响应式Web设计不仅仅是功能。 在过去的2.5年中，框架，开发和测试工具的改进表明，大多数Web设计师真正相信响应式Web设计是未来 。

反射

没有什么比创造术语“响应式网页设计”的作者的话更可信的了：

最后，这只是一种方法，而这种方法在得到良好建议后效果最好： 它取决于 。

RWD的开发流程应该是弄清楚您将要打造的网站类型，从客户那里衡量需求和不需求，检查每种移动方法的价值和结果，然后最终确定RWD是否最适合网站。

您是响应式Web设计的热心追随者吗？ 还是您以前曾经实施过该方法，并且发现这种有前途的方法实际上存在更多缺陷？ 无论哪种方式，我们都渴望听到您的意见和反馈！

翻译自: https://www.hongkiat.com/blog/responsive-web-design-war/