专家提示，让您的网站在 2022 年适合移动设备
已发表: 2022-01-02
您很有可能正在智能手机上阅读这篇文章。 如果这是真的，那么您就是每天使用手机访问互联网的数百万人中的一员。 根据 2017 年的统计数据，智能手机和其他移动设备占全球网页浏览量的 49.73%。 移动互联网日益增长的重要性可以从谷歌本身推出大规模更新其排名算法的事实进一步估计，要求所有网站、博客和登录页面都进行移动优化。 因此，公司不仅要在互联网上拥有强大的影响力，还要拥有适合移动设备的网站，这才有意义。
制作适合移动设备的网站会带来一层复杂性，这对于某些业务团队来说可能很困难。 因此，我们整理了一些令人惊叹的技巧，为您提供有关如何使您的网站适合移动设备的想法。
使您的网站对移动设备友好非常重要
避免受到谷歌的惩罚不应该是你“移动友好”的唯一理由。 拥有适合移动设备的设计有很多很好的理由。
*这是智能手机的时代。 我们生活的时代无疑是智能手机的时代。 据谷歌称，当今全球 76% 的人使用手机。
*移动网站可以成就或破坏您的品牌。 这不仅仅是一个声明； 它由谷歌数据备份。 如今，绝大多数人都拥有智能手机，您的移动网站体验会影响他们对您品牌的看法。 例如，如果加载您的移动网站的时间过长，您就有失去客户的风险。
越来越多的移动用户表明，通过为用户提供无可挑剔的移动体验，您可以吸引相当多的客户。
如何检查您网站的移动友好性
适合移动设备的网站是针对移动设备进行了优化的网站。 它确保您网站的内容和功能能够在移动设备上正确加载，同时为访问者提供类似于传统网站的体验。 话虽如此，现在让我们讨论检查您网页的移动友好性的方法。
有三种方法可以做到：
1. 在手机或平板电脑上打开您的网站，看看它是如何工作的。
2. 访问Google Mobile-Friendly check 页面，输入您网站的 URL 并点击分析按钮。 （见下图）
3. 谷歌还在谷歌搜索控制台内提供免费报告，移动可用性报告，帮助网站管理员适应最新的移动搜索算法要求。
如果您的网站没有通过上面列出的三个试金石测试，那么您可以采取以下措施使您的网站更加适合移动设备。
使您的网站对移动设备友好的提示：
1. 让您的网站具有移动响应能力
响应式网站具有与传统网站相同的内容和信息，但它的制作方式是为了在各种设备上提供最佳的观看体验。 它确保轻松阅读和导航，而无需滚动、调整大小和平移。 除了为您的网站提供适合移动设备的设计外，响应式设计也有利于 SEO。 针对移动设备进行了优化的网站将如下所示：
您选择使您的网站响应的方法将取决于您愿意花费的时间和金钱。 有三种方法可以做到：
* 获取响应式 WordPress 主题
*使用媒体查询 (CSS3)
它只是意味着在样式表中添加一个代码，告诉浏览器如何以不同的分辨率显示您的网站。 下面是一个媒体查询的例子：
@媒体屏幕和（最大宽度：480px）{
#sidebar {显示：无；}
}
*找专业人士为您做
像Enuke这样的公司
可以帮助您找到可以为您完成工作的专业人士，以便您可以专注于业务的其他重要方面。
2. 始终包含视口元标记
视口元标记是您的网站在移动设备上正常运行的关键代码。 您可以命令视口来控制许多配置。 这是您可以在文档开头使用的示例。
<meta name=”viewport” content=”width=device-width, initial –scale=1”>
3. 不要使用闪光灯
曾经在互联网上非常流行的 Flash 几年前就失宠了，因为它不仅对 SEO 不利，而且还会让用户感到沮丧。 它对网站有以下缺点：
*它需要一个插件
*加载速度可能非常慢，尤其是在网站内容很多且浏览者的互联网连接速度较慢的情况下。
*这对您网站的 SEO 不利
* Android 和 iOS 设备均不支持 flash
以下是 Flash 的一些不错的替代方案：
* Jquery JavaScript 库：
它可以做 Flash 可以做的所有事情，而且文件大小要小得多。
* HTML5：
它强调各种设备对最新多媒体的可访问性。
* CSS3：
它是动画友好的，还提供了设计交互式网站的新方法。
4. 为表单添加自动完成功能
自动完成或自动填充功能可以使用户与您的网站的交互更加方便。 如果您的网站上有要求提供姓名或地址信息的表格，自动填充功能会自动将文本添加到字段中，从而消除一次又一次输入信息的麻烦。 以下是如何在编辑器设置中启用它。
*选中“自动完成”复选框
*接下来，单击“保存所有设置”按钮以保存您的设置。
*瞧！ 你完成了。 在编辑器设置中启用自动完成功能后，您将在编辑器的 HTML、CSS 和 JS 面板中键入时看到自动完成建议。
进行广泛的跨浏览器测试以确保您的表单在不同的浏览器中运行良好，这一点非常重要。
5. 让你的按钮尺寸大到足以在移动设备上工作
用鼠标点击任何大小的按钮都很容易，但是当您尝试用手指点击一个小按钮时，真正的挑战就出现了。 如果有多个彼此靠近的小按钮会变得更加困难。 这对游客来说可能很烦人。
您可以使用更大的按钮轻松解决此问题。 现在的问题是——它们需要多大？ 平均而言，移动设备上的任何可点击按钮的高度至少应为 45 像素。 标准化可点击区域和按钮将具有以下好处：
*通过您的网站导航的错误更少。
*它将保持观众的参与。
*也可能导致更多转化。
6. 使用可缩放矢量图形
要进行响应式设计，拥有可缩放矢量图形非常重要。 与图像文件 (jpg/png) 不同，SVG 可以无限扩展。 使用可缩放矢量图形可确保图标或图形在所有设备上保持清晰，而不必担心分辨率。 此外，由于 SVG 的文件大小通常要小得多，它们也可以为您的网站节省一些加载时间。
7. 压缩你的图片和 CSS
谈到网站加载时间，我们都希望我们的网站加载速度非常快。 更快的加载时间可能意味着访问者留在您的网站或离开网站之间的差异。 速度对于任何网站都非常重要，这意味着要有一个适合移动设备的设计，重要的是压缩任何占用网站大量空间并减慢加载时间的内容。 这包括您的高分辨率图像和 CSS。
建议使用同一图像的两个不同版本。 例如，桌面页面可能需要 1200 像素宽的图像才能获得全分辨率，而移动版可能只需要 400 像素宽。 因此，将其复合在页面上以获得明显更快的加载体验。
8. 允许一种简单的方式切换到桌面视图
虽然当今许多用户确实更喜欢在手机上查看网页，但仍有很多人更喜欢查看桌面版网站。 因此，请始终在您的网站底部添加“查看桌面版本”选项。 移动友好型设计的一个重要特征是您希望访问者能够以他们最满意的方式与您的网站进行交互。
9. 利用设备功能
智能手机允许您执行多项任务。 您可以同时拨打电话、打开应用程序、发送消息。 利用您网站上的这些功能，使您的网站对移动设备友好、用户满意并提高转化率。
例如，您可以对社交媒体图标进行编码，当点击时，如果安装在该人的手机上，它们将直接在应用程序中打开，而不是在浏览器中打开。
10.定期进行移动测试
确保您网站的移动体验良好的最佳方法是定期检查您网站的移动友好性。 这不仅意味着在一台移动设备上进行多次测试，您还必须在不同的设备上进行测试，包括 iPhone、Android 手机、Windows 手机和不同的平板电脑。
在测试时，把自己放在用户的位置上，或者让团队成员以外的其他人为你测试它。
结论
随着移动成为与桌面使用保持同步或超越桌面使用的领先平台，您没有理由不为移动成功做好准备。 我们希望这些提示可以指导您了解如何使您的网站更适合移动设备。 如果您需要专业帮助以使您的网站更加适合移动设备，您可以联系专业人士，他们可以通过他们的创新解决方案帮助您创建引人入胜且引人入胜的用户体验。