开发出色的移动友好网站的 8 个技巧

开发出色的移动友好网站的 8 个技巧

开发出色的移动友好网站的 8 个技巧

互联网上一般的流量来自移动设备。这意味着,如果你的网站没有针对移动设备进行优化,那么你将损失大量潜在流量。

最重要的是,Google 使用移动优先索引根据网站的移动格式对网站进行排名 - 因此,如果没有适合移动设备的网站,你的排名就不会很好。这都是你需要优化公司网站以进行响应式设计(即,可在多种设备上使用的设计)的两个原因。

但是,如何提高你的移动设备友好性以保持排名第一?下面,我们将介绍有关如何使用响应式设计的八个顶级技巧。

如何有效使用响应式设计的 8 个技巧

创建适合移动设备的网站并不一定是一个困难的过程。通过几个简单的步骤,你可以确保你的移动网站正在为你的企业带来流量。

以下是有关如何在网站上使用自适应设计的八个技巧。

1. 使用加速的移动页面(AMP)

除了标准的响应式设计格式外,你还可以将网站上的某些页面设置为加速移动页面(AMP)。AMP 是页面的精简版本,仅保留基本元素。

这是一个实践普通响应式设计的网页示例:

普通版本的网页

这是 AMP 格式的同一页面:

AMP 版本的网页

AMP 具有许多不同的优势。第一个优势是视觉效果 - 信息少且在小屏幕上显示的图形更少,使 AMP 在人眼上更容易。另一个优势是 AMP 的极简主义可以帮助它们更快地运行并消耗更少的数据。

2. 优化页面加载速度

正确执行页面加载速度始终很重要。大多数用户期望页面在两秒钟内加载,即使在台式机上,你也需要确保你的网站符合期望。但是在移动设备上,它比平时更重要。

移动搜索通常是在人们外出时进行的,并且他们想要的答案比在台式机上更快。

你可以通过以下几种方法来提高页面加载速度:

  • 压缩影像
  • 限制重定向
  • 缩小代码
  • 缓存网页

3. 适当缩放所有内容

设计网站时,你可能会在计算机上进行操作,其中包括移动格式。但是,当你在计算机显示器上工作时,很容易忘记当内容出现在人们的手机上时,内容将缩小多少。

为了弥补这一点,你需要对所有内容进行不同的缩放。这从文本开始。你希望用户阅读的任何内容都应足够大,以使他们无需使用放大镜即可看到(尽管仍然足够小以适合屏幕!)。你不希望任何人都必须在屏幕上,起眼睛,或者用手指拖动来放大。

按钮也一样。你希望人们单击的所有内容都应该足够大,以使拇指可以轻松点击。我们都曾尝试过并且未能在弹出窗口中点击 “X”,因为它太小了,你不希望这种情况在你的网站上发生。

不过,并非所有内容都应该更大 - 例如,应缩小图像比例,以防止它们占据整个屏幕。

4. 避免弹出窗口

对于弹出式窗口,如果可以的话,应该完全避免使用它们。在计算机上,很容易显示不占据整个屏幕的弹出窗口,如果用户不感兴趣,也可以单击 “X” 并继续前进。

但这不是手机上的情况。

关闭移动弹出窗口可能非常困难。即使将 “X” 放大到足以单击的程度,也很难总是在这么小的屏幕上找到它,并且用户经常会无意中点击弹出窗口本身。

通常,移动弹出窗口给用户带来的挫败感要比其他任何事情大得多。除了用户特别要求通过单击某些内容的弹出窗口外,请尝试将其从你的网站中删除。

5. 简化表格

弹出窗口并不是用户在移动设备上遇到困难的唯一原因。如果使用不当,在线表格也会引起问题。但是,与弹出式窗口不同的是,你不能仅完全消除表单,而是经常需要它们来生成销售线索或帮助用户进行购买。

因此,解决方案是使表格尽可能简单。不要创建需要大量信息的表格,也不要包括很多其他要填写的框。带有大按钮和文本框,使它们尽可能地简约,以便用户轻松使用它们。

6. 消除大块文字

移动设备更难摆脱的另一件事是大块文本。即使是在计算机上,巨大的文本块也不适用于 Web 设计,但在移动设备上尤其糟糕。

不要试图一次将数百个单词填入一个小的电话屏幕。取而代之的是,使用尽可能少的文字来表达你的观点。如果你绝对必须传达许多信息,请尽可能将其分解以使阅读更容易。

你可以通过以下几种方法来分解文本:

  • 保持简短
  • 散布图像和视频
  • 合并项目符号和编号列表

7. 简化菜单和导航栏

简化网站内容的另一种方法是优化菜单和导航栏。在计算机上,你可以在屏幕顶部延伸一长行标签,但在移动设备上则不能,屏幕顶部的宽度通常不到 3 英寸。

重新格式化导航栏的第一种方法是使用依靠汉堡菜单的常用技术,用户可以单击该菜单来展开。但是即使菜单展开后,也请确保你没有列出太多标签。为用户提供少量选择,使事情变得简单。

8. 执行移动测试

确保你网站的移动友好性的最后一种方法是经常对其进行测试。你可以使用 Google 的移动设备友好的测试工具来进行此操作,该工具会评估你网站的移动设备友好程度,并提出改进建议。

测试移动设备友好性