如何避免简单的响应性错误

全球近49%的网络流量来自移动设备（不包括平板电脑）。如果你不设计适合移动设备的网站，你可能会失去大量的目标用户。此外，如果你希望提高你的搜索引擎优化，你不能忽视智能手机；百度优先使用移动优先索引。

所有这些都需要响应式的网页设计，通过这种设计，您的网站的元素可以根据屏幕尺寸进行调整。在创建响应式设计时，您可能会犯一些常见的错误。为了帮助您避免这些问题，我们在下面列出了一些可能的响应式设计陷阱及其解决方案。

1、使用设备大小作为断点

根据OpenSignal的数据，2015年有超过24000种不同的AndROId设备；这个数字在过去五年中有所增加。由于有这么多种类的设备，屏幕尺寸也有很大的不同。为了确保您的网站在所有设备上提供无缝的浏览体验，您需要正确设置断点。

如果您在响应式设计中只关注设备大小的断点，则您的网站可能无法在新设备上正确显示。不要将自己限制在当前断点设备的维度上。相反，选择真正的响应式设计，可以在任何大小的屏幕上调整。

一个很好的想法是采用移动优先的方法，即您为最小的屏幕构建网站，然后慢慢地将其扩展到更大的屏幕。如果可穿戴设备对你的网站很重要，你应该从这些设备开始设计。

随着规模的扩大，您的网站设计可能会开始感到紧张。在这种情况下，可以向其中添加媒体查询，以便进行必要的更改。这将帮助你的设计在每一步都保持舒适。你需要继续这个过程，直到你达到最大的屏幕尺寸。理想情况下，这将是2800像素，因为大多数用户的分辨率低于这个。

使用这种方法，您的断点只在需要时才会被引入，而不是根据设备大小。这可以帮助你提供一个无缝的浏览体验，你的访客跨所有设备。你可以使用LambdaTest或BrowserStack等工具来检查你的网站在新设备上的表现是否良好。

2、不考虑文件大小

视觉元素可以让你的网站对用户更有吸引力，然而，你必须小心当你添加到你的网站。它们通常比文本文件大，会降低页面加载速度。随着页面加载时间的增加，跳出率也会增加。事实上，Akamai表示，在2017年的假期期间，网页加载时间增加了1.5秒，而回弹率增加了6%。

因此，有必要优化您的图像和视频，以减少其大小。您可以使用TinyPNG或压缩JPEG等工具来实现这一点。如果你是WordPress用户，你可以安装Smush插件来完成这项工作。

缩小CSS、Html和Javascript文件也会有所帮助。您还应该考虑浏览器缓存，它可以提高返回访问者的页面加载速度。最后，删除所有不必要的第三方工具和JavaScript依赖。要检查当前页面加载速度并找到可能的解决方案，可以使用百度PageSpeed Insights。你也可以使用百度的移动网站速度工具来查看你的网站在移动设备上的加载速度。

3、没有使用自适应图像管理

虽然图像的文件大小很重要，但它的尺寸也很重要。你可能不用担心在传统的网站设计中使用不同尺寸的图像。然而，当涉及到响应式设计时，错过图像管理可能会给您的用户体验带来灾难性的后果。你最不希望你的访客看到的是在小屏幕上显示的巨大图像。

为了避免这个陷阱，您应该使用自适应图像管理技术。你可以采取以下方法来实现这一点：

基于分辨率的选择：提供具有不同分辨率的相同图像；

基于设备像素比率的选择：使图像看起来清晰，并根据屏幕大小减少可感知的人为影响；

基于视图的选择：根据使用的设备及其方向改变图像；

艺术指导：根据显示改变或裁剪图像，以改善其观看体验。

4、隐藏的内容

在创建响应式网站设计时，您可能犯的最大错误之一是隐藏内容。您可以这样做，以适合您的网站在一个较小的屏幕或增加您的页面加载速度。然而，你必须不惜一切代价避免它。记住，人们访问你的网站不是为了寻找一个小的样本。他们想要和在台式机上一样的浏览体验。

你的目标应该是为他们提供这种全方位的体验。这是必要的，因为他们中的许多人可能在一天内从多个设备访问您的网站。这就是为什么您必须确保在响应式设计中保持内容的一致性。当然，您可以通过渐进增强在不同设备之间对内容进行不同的优先级排序。

5、保持一致的导航

在所有设备上为访问者提供一致的浏览体验是最重要的。然而，绝对的一致性也不好。在尝试这样做时，您可能犯的最大错误之一是在所有屏幕大小之间保持一致的导航。

当你的屏幕变小时，一个一致的导航条可能会占据一半的屏幕，并可能完全破坏浏览体验。您应该考虑使用屏幕大小缩小导航，并可以将其更改为一个汉堡包菜单。

除了导航之外，按钮大小和视觉布局也不应该保持一致。然而，字体、链接和颜色处理应该是一致的。

总结

如果你想接触到所有的目标受众，你就不能避免响应式设计。但是，在实现它时必须小心，避免所有可能的错误。让你的访客在所有设备上都有一致的浏览体验，不向他们隐藏任何信息。优化您的文件大小，以提高您的页面加载速度。此外，使用自适应图像管理技术来根据屏幕大小减少或增加图像尺寸。

不要让你的导航保持一致，因为它可能会破坏浏览体验。同样的规则也适用于按钮和视觉布局。最后，进行真正的响应式设计，不要局限于基于当前设备设计断点。当你在设计你的网站时，关键是要以移动为先。