你在用智能手机看这篇文章吗?如果你是，这并不令人惊讶——考虑到仅在2019年，就有39亿移动互联网用户．这就是为什么谷歌在2019年7月推出了移动优先索引——迫使网站所有者考虑其网站的响应性。
那么，你的网站响应性好吗?在这一页，我们将检查您广泛的响应式设计清单，以确保您为所有用户提供最佳的网站体验-无论他们使用什么设备。我们甚至还将介绍一些用于确定站点响应性的工具。
如果你想跟上最新的设计趋势和提示就像在这个页面，订阅每周收入电子邮件!
什么是响应式设计?
在我们进入响应式网页设计清单之前，有一个重要的问题需要讨论响应设计。
响应式设计，或移动友好型设计，确保访问者对你的网站有一个奇妙的体验，无论他们使用什么设备。
这意味着无论他们使用台式电脑、智能手机还是平板电脑，你的网站在外观和功能上都是一样的。如果你用你的智能手机访问一个网站，它有以下特征，它可能没有响应:
- 文字太小了，几乎难以辨认
- 如果您试图填写表单，它会保持很小，您必须放大才能填写
- 很难点击导航栏元素
- 照片似乎没有对齐
- 您可以在页面上从左到右滚动
正如你在下面的例子中看到的，你必须在你的智能手机屏幕上从左到右滚动，才能看到这个沙龙网站的整个主页。也就是说，这个网站会被认为没有响应。
另一方面，如果你用你的智能手机访问一个具有以下特征的网站，它可能会响应:
- 文本部分填充页面
- 设计模块是对齐的，易于消化
- 你不需要放大来阅读菜单
- 导航栏通常采用汉堡菜单的形式，直到扩展
- 表单可以扩展以填充页面，使得在小屏幕上填写更容易
在下面的例子中，您可以看到这一点瑞士小姐热巧克力有一个响应性站点。当你从在台式电脑上查看网址切换到智能手机上时，该网站仍然提供了同样棒的体验。
现在我们已经讨论了响应性和非响应性站点之间的区别，是时候直接进入我们的响应设计检查表!
完整的响应式设计清单
如果你不想让你的客户(和谷歌)把你当成行业权威，那么拥有一个专业的、响应性强的网站是很重要的。方法如下:
响应性检查表项目1:测试您当前的网站
如果你不确定你当前的网站是否响应，你会想要测试它来找出答案。您可以使用各种响应式设计测试工具，包括:
这些工具可以帮助你了解网站在不同设备上的外观。记住，如果你的网站响应不灵敏，它将与你在小型设备上的桌面版本看起来不一样。当你在各种响应式设计测试工具上测试当前网站时，你也会希望在各种设备上测试它们。
许多响应式网页设计测试工具允许你看到你的网站在不同设备上的用户是什么样子的。例如，使用谷歌的大小调整工具，你可以在手机和平板电脑版本之间切换你的网站，看看它们对用户来说是什么样子的。
响应性检查表第2项:确定哪些元素不是响应性的，并修复它们
在使用了上面提到的响应式网页设计测试工具后，你就能很好地判断哪些网站元素是响应式的，哪些不是。例如，你的整个网站可能在移动设备上看起来很棒，除了你的图片。在注意到响应性和非响应性元素之后，您可以开始研究如何修复它们。
检查响应性的一些站点项目包括:
- 导航栏
- 图片
- 字体
- 形式
- 按钮
这些都是最重要的网页设计元素，对良好的用户体验非常重要。
响应性检查表项目3:在不同设备上的测试站点速度
页面速度是提供一个用户体验非常棒．你的网站应该在所有设备上快速加载，否则就会有用户从你的网站跳转的风险——这就是为什么网站速度是我们的响应式设计清单中的第三项。百分之八十三对于希望网站在3秒或更短时间内加载的用户来说，无论他们使用什么设备，都应该确保网站加载速度快。
您的网站加载缓慢的原因有以下几种:
- 图像没有被浓缩
- 站点元素没有响应
- 凌乱的代码
- 像视频这样的重元素太多了
您可以使用谷歌的PageSpeed Insights工具了解更多导致网站变慢的原因。如果你对你的分数不满意，你可以随时求助于a响应式设计和开发机构比如WebFX页面速度优化服务!
响应性检查清单4:考虑轻敲手指
当用户在不同的设备上浏览你的网站时，他们可能会使用不同的项目来点击你的网站元素。例如，对于智能手机，用户可能会用手指点击网站元素，但对于平板电脑，他们可能会使用触控笔。你要考虑到你的网站元素与这些不同的选项，以确保它提供了一个伟大的体验，无论“点击设备”的网站访问者使用。
你应该考虑这样的事情:
- 在平板电脑上，触控笔的按键够大吗?
- 智能手机上的按钮够大吗?
- 导航栏汉堡菜单在任何设备上都容易点击吗?
- 用手指轻敲或手写笔填写表格容易吗?
响应性检查表项目5:测试您的导航
正如我们之前提到的，在大多数移动响应式网页设计中，你会发现导航就像汉堡包菜单一样，而不是沿着页面顶部延伸。这使得用户不必放大导航栏来查看选项。下面，你可以看到一个Dunkin ' Donuts响应式网站的例子，以及他们的导航菜单如何采用汉堡菜单的形式，当用户点击时，菜单会展开。
你要确保你的导航菜单在所有设备上都能正常工作，当用户打开它时不会中断任何东西。导航菜单是网站非常重要的一部分，因为它为用户提供了一个路线图，让他们准确地找到他们想要的东西。如果没有一个工作正常，用户可能会从您的网站跳出来。
响应性检查表第5项:使弹出窗口响应性强
在我们的移动友好设计清单上的第五项是让你的弹出窗口反应灵敏。弹出窗口通常由特定的操作触发。例如，你可能会访问一个网站，当你试图离开该网站时，它会显示一个弹出窗口，鼓励你继续浏览。
其他可能触发弹出窗口的操作包括:
- 写到了一页纸的底部
- 点击一个特定的链接
- 在主页上停留一定的时间
这些弹出窗口可以提供特别优惠，或者鼓励用户注册订阅时事通讯。在下面的例子中，Bones Coffee为用户提供了一个弹出窗口，让它出现在用户主页的底部。如果你输入一个电子邮件地址，第一次购买就有九折优惠。
然而，如果你从智能手机的角度来看这个弹出窗口，确切地说，是iPhone 6、7或8，你会发现这个弹出窗口没有响应，用户很难注册。
记住弹出窗口的响应性同样重要，因为它们为你的业务提供了巨大的好处。
响应性清单第6项:确保你的网站在所有设备上都具有视觉吸引力
响应式设计清单中的第六点是确保你的网站在所有设备上都具有视觉吸引力。当你专门为桌面设计网站时，很难让你的网站元素在智能手机和平板电脑等其他设备上看起来正确。即使你使你的网站的所有元素响应，确保你的网站的每个元素在每个设备上看起来都很好仍然是至关重要的。
你要确保:
- 图像不会占据整个屏幕
- 菜单并没有被切断
- 项目列表格式正确
- 桌子看起来整齐有序
- 正确呈现服务列表
- 产品图片和描述格式正确
- 形式是美观和有效的
- 购物车有条理，使用方便
因为它只接收用户50毫秒要形成对你网站的看法，确保它在所有设备上都是赏心悦目的是至关重要的。
响应性检查清单第7项:使自己成为网站访问者
现在，你已经遵循了我们的响应式网页设计清单的每一步，是时候审核你的努力通过让自己成为网站访问者。绕着你的站点转几圈，以确保你没有错过任何响应式设计元素。例如，你想:
- 测试提交表单的每个步骤
- 测试购买产品的每个步骤
- 测试导航条链接
- 测试站点的不同区域，如博客和产品页面
把你自己放在驾驶座上，对你的网站进行一些调整，可以确保你的响应式网页设计清单中没有遗漏任何东西。
使用WebFX完成你的移动友好设计清单
让你的网站完全响应用户是你的在线形象和你的公司在线成功的关键部分。随着手机用户每天都在增加，你无法承受一个不响应所有设备的网站。如果你发现你仍然需要帮助来创建一个响应式网站，即使在遵循我们的响应式网站设计清单之后，WebFX可以帮助你。
我们是一个提供全面服务的数字营销机构提供60多种营销策略针对不同行业和地区的客户。我们已经创建了超过1128个响应网站在我们十几年的业务中，我们帮助像您这样的公司看到更多的网站流量，增加线索，并最大化收益。如果你准备好开始了在线联系我们免费报价，或给我们打电话888-601-5359！
