网站建设之5个简单的响应性错误（以及如何避免它们）

全球将近49％的网络流量来自移动设备（平板电脑除外）。如果您不设计适合移动设备访问的网站，则很可能会失去目标受众的这一大部分。此外，如果您希望改善SEO，则不能忽视智能手机。Google通过移动优先索引将移动优先。

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

响应式网站建设

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

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

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

一个好主意是采用移动优先的方法，即在您的网站上为最小的屏幕构建网站，然后慢慢将其缩放到更大的屏幕尺寸。如果可穿戴设备对您的网站很重要，则应该从这些设备开始设计。 

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

使用此方法，仅在需要断点时才引入断点，而不是根据设备大小来引入断点。这可以帮助您在所有设备上为访问者提供无缝的浏览体验。您可以使用LambdaTest或BrowserStack之类的工具来检查您的网站在新设备上的呈现效果是否良好。

2.不考虑文件大小

视觉元素可以使您的网站对用户更具吸引力。但是，将它们添加到您的网站时必须小心。它们通常比文本文件大，并且可能减慢页面加载速度。随着页面加载时间的增加，跳出率也会增加。事实上，根据Akamai的说法，在2017年假期期间，页面加载时间增加1.5秒时，跳出率增加了6％。 

因此，有必要优化图像和视频以减小其尺寸。您可以使用TinyPNG或  Compress JPEG之类的工具来实现此目的。如果您是WordPress用户，则可以安装Smush插件来为您完成这项工作。 

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

3.不使用自适应映像管理

虽然图像的文件大小很重要，但其尺寸也很重要。您可能不必担心在常规网站设计中使用不同尺寸的图像。但是，当涉及到响应式设计时，错过图像管理可能会对您的用户体验造成灾难性的影响。您希望访客看到的最后一件事是在小屏幕上显示大图像。

为了避免这种陷阱，您应该使用自适应图像管理技术。您可以使用以下方法来实现此目的：

• 基于分辨率的选择：提供具有不同分辨率的相同图像；
• 基于设备像素比率的选择：根据屏幕尺寸，使图像显得清晰并减少可察觉的伪影；
• 基于视口的选择：根据使用的设备及其方向改变图像；
• 美术指导：根据显示更改或裁剪图像以改善其观看体验。

4.隐藏内容

创建网站的自适应设计时，您可能犯的最大错误之一就是隐藏内容。您可以这样做，以使您的网站适合较小的屏幕或提高页面加载速度。但是，您必须不惜一切代价避免它。请记住，人们不会只是为了寻找一个小样本而来您的网站。他们希望获得与台式机相同的浏览体验。

您的目标应该是为他们提供这种全渠道的体验。这是必要的，因为其中许多人可能在一天内会通过多种设备访问您的网站。因此，必须确保在响应式设计中保持内容的一致性。当然，您可以通过渐进增强功能在不同设备上对内容进行优先级排序。

5.保持一致的导航

在所有设备上为访问者提供一致的浏览体验至关重要。但是，绝对一致性也不好。尝试执行此操作时可能犯的最大错误之一是在所有屏幕尺寸上保持一致的导航。 

当屏幕尺寸减小时，一致的导航栏可能最终会占据屏幕的一半，并且可能会完全破坏浏览体验。您应该考虑使用屏幕尺寸缩小导航范围，并可以将其更改为汉堡菜单。

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

最后总结

如果您希望覆盖整个目标受众，则无法避免进行响应式设计。但是，在实施它时必须小心，并避免所有可能的错误。在所有设备上为访问者提供一致的浏览体验，并且不要向他们隐藏任何信息。优化文件大小以提高页面加载速度。此外，根据屏幕尺寸，使用自适应图像管理技术来减小或增大图像尺寸。 

不要保持导航一致，因为这可能会破坏浏览体验。相同的规则也适用于按钮和视觉布局。最后，选择真正响应快速的设计，不要将自己局限于基于当前设备的设计断点。关键是在设计网站时首先要移动优先。