在您创建的每个网站上遵循的移动友好清单

创建一个在移动设备上运行良好的网站并不容易，但可以做到。 只要您在发货前彻底检查您的网站，移动用户就没有理由不应该拥有出色的体验。 但是，您可能想知道哪些元素最需要您注意。

在本文中，我们将为您提供一个简单的清单，其中包含您的网站应满足的七个标准。 如果是这样，您的用户可能会拥有出色的移动体验，如果不是，我们会告诉您如何扭转局面。 让我们从第一点开始！

拥有适合移动设备的网站的重要性

如今，拥有一个适合移动设备的网站比以往任何时候都更加重要。

“移动友好”这个词听起来有点含糊。 简而言之，如果您可以轻松地使用其内容并使用任何类型的移动设备与其交互，则可以认为该网站适合移动设备。

您可能知道，移动浏览正在兴起，这意味着很多人将它们用作浏览网络的主要方式。 如果您的网站不易于使用，用户可能会寻求替代方案。 幸运的是，有几种方法可以测试您的网站是否适合移动设备。 例如，Google 提供了一个测试，任何网站都可以通过粘贴其 URL 来使用该测试：

但请记住，没有任何自动化测试是完美的——因此您还需要运用一些常识。 为此，这里有一些技巧可以帮助您确保您的网站对移动用户尽可能友好。

在您创建的每个网站上遵循的 7 步移动友好清单

鉴于移动流量的重要性，您构建的每个网站从一开始就适合移动设备，这一点至关重要。 该清单将帮助您确保每一步都符合要求。 让我们来看看！

1. 以多种分辨率测试您的网站

使用正确的工具可以轻松地以多种分辨率测试您的网站。

对于移动网站，最重要的事情之一是您的网站看起来不像是从桌面版本缩小的。 这意味着您的每一个元素在多种分辨率下都应该看起来不错。

另一方面，如果您的元素在移动设备上看起来都不好看，则可能会对您的跳出率产生负面影响。 明智的做法是事先以多种分辨率测试您的网站，看看是否出现任何问题。

幸运的是，这个过程并不像听起来那么复杂，而且你不需要拥有多个设备来完成。 有很多服务可以让您快速测试不同分辨率下的任何网站，例如：

• Chrome 开发工具：这个内置的 Chrome 浏览器功能包括一个设备工具栏，您可以使用它以多种分辨率测试您的网站。
• Screenfly 和 BrowserStack 等服务：这些第三方服务使您能够以更广泛的分辨率测试您的网站。

我们提到的所有工具都是免费的，所以预算应该不是问题，没有理由跳过这一步！

2. 确保您的菜单和导航在较小的屏幕上显示良好

确保您的菜单在移动设备上显示良好对于保持您的网站可用很重要。

在大多数情况下，菜单是人们浏览您网站的主要方式。 如果您的链接在较小的分辨率下难以点击或阅读，则会影响可用性。 此外，您还希望确保所有菜单项都可以轻松访问，而不管用于浏览的设备如何。

考虑到这一点，让我们通过几个步骤来确保您在测试移动菜单时不会错过任何内容：

1. 检查所有菜单元素是否可见。 如果不能确定他们是否可以通过滚动到达。
2. 确保每个链接都对齐，并且子菜单是嵌套的。
3. 仔细检查您是否可以阅读每个菜单项以及单击它。

大多数现代 WordPress 主题（例如 Divi）都会自动为您创建响应式菜单。 如果您在网站的这方面遇到问题，可能值得考虑更新到新主题。

3.检查您的图像在较小的分辨率下是否好看

无论分辨率如何，您网站的图像都应该看起来同样令人惊叹。

图像是任何网站的关键组成部分，但有时您的图形在较低的分辨率下可能看起来不是最好的。 例如，如果有人通过移动设备访问您的网站时您的徽标不可读，这显然会影响您的品牌。

在大多数情况下，人们更担心“扭曲”他们的图像，但缩小图像也可能是一个问题。 并非每张图像都可以调整为在每种分辨率下看起来都很完美，但您可以采取措施减少问题：

1. 将您的精力集中在对您的品牌很重要的图像上。
2. 寻找流行图像类型的可扩展替代品，例如 SVG。
3. 只要有可能，请选择裁剪得更好的图像，这样它们在较小的尺寸下看起来会更好。

只要您牢记这些提示，就可以顺利进行。 请记住，当涉及非常复杂的图像（例如信息图表）时，可能无法将它们完全适应低分辨率。

4. 测试您的内容的可读性

小屏幕会影响可读性，但很容易适应它们。

对移动设备可用性影响最大的一方面是可读性。 当您使用较小的外形尺寸时，您需要通过确保您的文本仍然以可读的大小显示而不是简单地缩小来进行补偿。 这里的目标很简单——您的用户不应该在您的网站上进行缩放和捏合操作。 毕竟，对于一个恼怒的访客来说，这是一个完美的食谱。

幸运的是，可读性是一个相对容易解决的方面：

• 为您的内容正文选择一种高度可读的基本字体。
• 尽可能使用副标题将您的内容分解为易于浏览的部分。
• 选择一个可以让您更好地控制文本显示方式的主题。

关于我们的最后一点，许多现代主题应该为您提供您正在寻找的控件。 例如，Divi 使您可以微调桌面和移动设备的任何模块文本的大小。

5. 确保您网站的元素易于交互

使用手指与元素交互可能很棘手，因此您必须调整设计。

这一步可能涉及很多方面，但请耐心等待。 到目前为止，我们已经介绍了让您的菜单易于使用的重要性，但您网站的其他交互式元素也是如此。 按钮、链接、表单等等——它们都需要在移动设备上保持可用。

当然，这里的关键考虑因素是尺寸。 当我们降低分辨率时，我们讨论过的大多数元素也会缩小。 您的工作是测试它们是否太难交互，因为这会影响您网站的可用性。

至于怎么做，我们这里推荐使用真实的移动设备，而不是我们之前提到的服务。 毕竟，您需要知道您的元素是否易于用手指而不是鼠标使用。 以下是您需要注意的事项：

• 确保您的号召性用语 (CTA)、表单和菜单项易于点击。
• 检查关键元素之间是否存在重叠，这可能会导致用户点击错误的元素。

一旦您知道哪些元素给您带来了麻烦，只需根据需要调整它们的大小即可。 如果您使用的是 Divi 等主题，则可以从每个模块的设置屏幕执行此操作。

6. 确保你没有过度依赖弹出窗口

弹出窗口可能很有效，但它们也会影响您网站的可用性。

选择在弹出窗口和转换等通常会导致非常显著上升。 然而，他们也倾向于惹恼至少与他们转换的人一样多。

如果您使用侵入性移动弹出窗口，很难准确确定您吓跑了多少人，但我们可以告诉您，某些搜索引擎（例如 Google）会因此而惩罚您。 如果您使用任何隐藏您的主要内容的弹出窗口或强迫用户在访问之前先浏览它们，您的搜索引擎优化 (SEO) 将因此受到影响。

我们知道弹出窗口很有用，但也有较少侵入性的替代方案，例如：

• 时尚的选择加入表格。
• 优化的 CTA。

这算不上是开创性的，但从长远来看，优化您的表单和 CTA 可以为您带来更大的回报，因为您会疏远更少的用户。 此外，您的搜索引擎排名也不会受到影响。

7. 测试您网站的加载时间

如果您的网站在不到一秒的时间内加载完毕，您会对结果感到非常满意。

如果您是 Elegant Themes 的常客，您就会知道我们总是尽可能地强调性能。 快速加载的网站并不是很多人会注意到的，但当相反的情况发生时，他们肯定会注意到。

高加载时间通常会导致跳出率增加，并使您的网站可用性降低。 此外，它们对移动用户尤其重要，因为他们中的一些人可能会使用不太理想的连接来浏览您的网站。

优化您的 WordPress 网站是一个可能需要整篇文章的主题，但这里有一些快速提示：

• 如果可能，请尝试针对移动设备优化的主题，例如 Divi。
• 优化您的图像，使其占用更少的空间。
• 为您的网站实施缓存解决方案。

这些都是可靠的步骤，但它们并不是您可以保持低加载时间的全部。 有关更多信息，请查看我们不久前发布的有关如何优化 WordPress 设置的完整文章。

结论

确保您的网站对移动设备友好比以往任何时候都重要。 如果当前趋势保持不变，您将在未来几年看到大部分流量来自移动来源（如果还没有）。 您现在可以做的最明智的事情是在桌面和移动设备上提供同样丰富的体验。

如果您不确定您的网站是否适合移动设备，这里有一个简单的清单，可帮助您找出答案：

1. 以多种分辨率测试您的网站。
2. 确保您的菜单和导航在较小的设备上显示良好。
3. 检查您的图像在较低分辨率下是否看起来不错。
4. 测试您的内容的可读性。
5. 确保您网站的元素易于交互。
6. 确保您没有过度依赖弹出窗口。
7. 测试您网站的加载时间。

您对如何确保您的网站适合移动设备有任何疑问吗？ 让我们在下面的评论部分中讨论它们！

32 像素/shutterstock.com 的文章缩略图。