创建移动友好型网站的 10 个最佳实践

引言

随着越来越多的人通过手机上网，公司应考虑开发移动友好型网站以接触客户。

提高网站搜索引擎排名的最有效方法之一是使其移动友好。Statcounter的一份报告显示，约60%的互联网流量来自移动设备，这说明了拥有移动友好型网站的重要性。

如果您的网站是移动友好的，它会根据访问者使用的设备显示不同的版本。移动友好型网站会进行调整，为用户提供更好的观看体验，因为移动设备的屏幕比台式电脑小。

除了屏幕更大之外，桌面浏览还提供其他应用程序和功能，如Adobe Flash和弹出窗口，而移动设备可能没有这些功能。移动友好型网站加载速度快，并具有针对移动设备定制的功能，如点击呼叫和导航。

制作移动友好型网站的最佳实践

为了使您的网站移动友好，请遵循这些最佳实践。

1. 开发响应式布局。

响应式布局允许网站根据用户屏幕大小进行缩放。其响应式设计使其能够显示适合不同屏幕尺寸的内容，并相应地调整其布局。例如，它可以从两列的桌面布局切换到一列的移动布局。如果设计是响应式的，它在改变屏幕大小时不应该影响加载时间。在创建或更新网站时，您可以选择一个移动响应式主题。

由于Google会给移动友好的网站在搜索结果中更高的排名，因此拥有响应式网站也有助于SEO。在对网站进行排名时，Google的算法使用网页的移动渲染版本而不是桌面视图。

Squarespace和Wix等电子商务网站构建器提供了适用于移动响应式网站的可定制主题。您也可以使用WordPress自定义网站。

如果您的网站在移动设备上的表现不佳，请考虑添加视口元标记。该标记将确保网站能够适当地调整以适应各种设备的屏幕尺寸。

要使您的网站响应不同的屏幕尺寸，请将此代码添加到head标签中。

2. 优化网站速度

速度能给观众留下深刻的第一印象。根据Portent的调查，加载时间为一秒的网站的转化率是加载时间为五秒的网站的三倍。

您可以访问BrowserStack SpeedLab，查看您的网站需要多长时间才能加载。输入您的网站URL后，选择“获取免费报告”。此工具可以显示您在桌面和移动设备上的加载速度得分，并验证您网站的速度。桌面和移动版本都需要进行测试。

您可以将视频托管在其他网站上，然后将其嵌入到自己的网站上，从而提高网站速度。这样，视频就不会给您的网站带来负担，从而可能减慢其速度。YouTube和Wistia是两个广泛使用的视频托管平台。

3. 压缩图片

在向您的网站添加图片时，请记住压缩它们以减小文件大小并提高下载速度。当您压缩图片时，您的网站将加载得更快，因为加载它们所需的数据更少。您可以使用Kraken.io等免费工具压缩图片，以减小文件大小而不影响质量。还要使用合适的图片格式；JPEG 2000、JPEG XR、AVIF和WebP是其中一些比同等质量的JPEG和PNG文件大小更小的格式。使用这些格式可以提高网站的速度。

延迟加载是另一个选项，它只在需要时加载图片。这些图片显示在页面的“折叠以下”区域，或者用户无需向下滚动即可看到的部分。如果用户向下滚动，这些图片就会加载。

4. 使用HTML5代替Adobe Flash

Adobe Flash在动画方面很受欢迎，但它与移动设备不兼容。请在您的网站上改用HTML5，而不是使用Flash。

HTML5支持许多在线任务，并且不需要浏览器插件。移动设备支持HTML5，这使您能够创建动画并嵌入音乐和视频。

5. 避免弹出窗口

弹出窗口在桌面网站上运行良好，但在移动设备上却不行。

在较小的屏幕上，弹出窗口很难看到，而且您无法在特定时间触发弹出窗口，例如在用户离开您的网站或点击“联系我们”部分时。此外，由于角落的X可能不可见，用户可能会难以从移动屏幕上退出弹出窗口。

6. 更改按钮大小和位置

移动网站上的按钮如果太小或位置不当，则难以使用。移动设备上的按钮应该足够大，以便大多数用户的拇指能够轻松点击。

按钮应该放在页面底部附近，这样用户在滚动浏览您的网站时就可以用拇指点击任何按钮。

7. 使用大而易读的字体

推荐的至少14像素的桌面字体大小在小屏幕上可能不易阅读。要确定其可读性，最好在移动设备上进行测试。

在移动设备上，避免尝试使用不易阅读的新字体，如手写体。尝试加粗不同行的文本，同时保持字体样式的统一。

对于文本，使用黑色而不是其他颜色。这使得用户在有反射（如阳光眩光）或背景颜色不同时更容易看到。

8. 间距链接

想想用拇指点击链接与用鼠标点击链接的难度。通过间距链接，人们可以更容易地点击他们想要的链接。

为了获得更好的移动体验，建议限制链接的数量，以防止出现大量的蓝色链接和导致访问者重定向到其他网站的数量。如果您有将用户引导至另一个网站的链接，请使用通知告知用户他们正在离开您的网站，例如“点击此处查看XYZ公司的新网站”。

9. 简化网页设计

一个网页上不应该有多个操作提示。如果用户需要采取的操作太多，在小屏幕上可能会令人困惑且难以导航。只使用用户会主动寻找的关键功能，如联系表单。

通过保持设计简洁，确保导航易于理解。利用空白来组织内容，让用户一目了然。为了节省空间并避免让用户感到困惑，建议删除任何过时的内容。

长串的功能和选项不适合用作菜单。尽管包含所有导航选项的菜单可能看起来简单，但它占用了大量的屏幕空间，尤其是在小屏幕上。相反，可以考虑使用汉堡包菜单，这是一个打开长菜单的按钮。它将减少混乱并节省空间。

10. 定期在移动设备上测试网站。

有几种方法可以测试您的网站是否移动友好。首先检查网站在移动设备上的用户体验。请务必使用iOS和Android智能手机进行测试。

还可以使用Google的免费移动友好测试工具进行测试。每个页面都可以进行测试。

请记住要经常进行测试，尤其是在任何网站更新之后。

使网站移动友好的好处

1. 提高有机可见度

Google通过在其搜索结果中优先考虑移动友好的页面来提高网站的有机可见度。因此，将网站针对智能手机和其他设备进行优化符合当前的搜索标准。

近年来，搜索行为发生了显著变化，通过智能手机进行的搜索量超过了通过台式电脑进行的搜索量。原因也很简单。Google的算法反映了这一趋势，认为移动设备是人们获取信息的首要方式。

通过更快的移动页面加载提高参与度指标也可以帮助您获得更高的排名。如果您符合现代可用性预期，Google的算法将为您提供额外的奖励积分。

这不仅仅是保持与时俱进，它还包括将移动友好性纳入您的搜索引擎优化（SEO）策略。这是一个利用易于获得的可见度奖励的战略性举措。

2. 网站加载速度更快

一项对超过40亿次网页访问的分析显示，在不同领域加载速度最快的网站也具有出色的移动优化。速度是参与度和良好移动体验的主要组成部分之一。

许多最佳实践，例如最小化页面权重或启用浏览器缓存，都可以解决移动体验问题。这些实践不仅测试了便携式布局，而且直接提高了Google在排名中高度重视的网站加载速度指标。

本质上，网站速度会同时影响桌面和移动版本。然而，由于现代访客对低质量页面的耐心有限，移动网站的风险更高。通过确保您的网站既移动友好又速度快，您可以为您的网站带来协同的SEO优势。

3. 提高转化率

近33%的移动访问者抱怨常见的挫败感，例如页面加载缓慢、需要反复点击小按钮以及网站布局不兼容。通过解决这些问题，您可以降低网站的跳出率，从而提高移动转化率。

如果您使用响应式设计，您的网站会自动调整以适应较小的屏幕。现在，访问者可以轻松地滚动和点击页面，并且可以在不缩放或放大/缩小的 Requisite 下调整它们的大小。此外，用户友好的号召性用语（CTA）使用户可以轻松地执行所需的操作，例如购买或注册电子邮件。

您可以通过简化移动体验的这些基本方面，鼓励访问者留在您的网站上，而不是因沮丧而离开。