打造适合移动设备的网站
您是否注意到竞争对手的自然流量中有很大一部分来自移动用户？秘诀在于拥有适合移动设备的网站。您是否担心您的网站在智能手机、iPad、平板电脑和其他低分辨率显示器上显示效果不佳？
十年来，智能手机从昂贵的、令人兴奋的新技术发展成为我们日常生活的一部分。现在，出门时不带智能手机似乎很不寻常。
75% 的智能手机用户首先通过搜索来满足他们的迫切需求。
对于像您这样的网站所有者来说，这意味着让您的网站适合移动设备已经是早该做的事了。2016 年，移动网络使用量首次超过计算机使用量。自那以后，这一趋势愈演愈烈。智能手机现在占全球网站流量的一半以上。
内容
为什么您的网站必须适合移动设备且响应迅速
我的网站是否已经响应移动设备？
12 个简单步骤让您的网站适合移动设备
1. 让您的网站具有响应能力
2. 让人们更容易找到他们正在寻找的信息
3. 在移动设备上以合适的格式显示广告
4. 优先考虑网站速度
5. 使用网站构建器让您的网页设计保持简单
6. 让您的按钮足够大以适应移动用户
7. 使用大字体
8. 避免使用 flash
9. 不要忘记使用视口元标记
10. 禁用表单中的自动更正
11. 可以切换到桌面视图
12. 定期进行移动测试
结论
为什么您的网站必须适合移动设备且响应迅速
谷歌的移动优先索引
“移动优先索引”是指优先考虑移动设备的索引。当您正在考虑或计算有多少百分比的流量来自移动设备时，Google 已经优先考虑了移动搜索结果。没有回头路了。移动优化是不可避免的，也是在您的竞争对手懈怠时在搜索结果中排名前 10 的绝佳机会。
虽然网站流量分布因网站而异，但大约一半的访问者可能会在手机的小屏幕上浏览您的网站。现在必须拥有一个适合移动设备的网站。如果您的移动访问者在您的网站上获得糟糕的用户体验，您将失去很大一部分流量。并在此过程中损害您的搜索引擎排名。简而言之，您网站的网站设计会影响其在搜索结果中的外观。
移动设备加载时间延迟 1 秒可能会对移动转化率产生高达 20% 的影响。
自 2015 年 4 月首次发布移动友好更新（被 SEO 社区称为“Mobilegeddon”）以来，移动设备已成为 Google 关注的重点。
自 2021 年 3 月起，Google 已停用桌面抓取功能，现在使用移动优先索引功能为所有网站编制索引。这意味着您应该快速确定您的网站是否已准备好进行移动抓取。本文包含几条针对优化您的网站以进行移动优先索引的建议。
我的网站是否已经响应移动设备了？
假设您的网站是在 2015 年之后创建或更新的。在这种情况下，设计师或网站建设者可能优先考虑移动体验。在担心如何让您的网站适合移动设备之前，您可以先使用 Google 的移动设备友好度测试工具进行检查。
只需在搜索框中输入您的网址，即可查看结果。您将很快知道您的网站是否适合移动设备。您还将看到您的网页在智能手机屏幕上的显示截图以及改善移动体验的建议列表。
谷歌移动友好度测试工具截图
如果您发现您的网站不适合移动设备，那么改进它必须是当务之急。这将帮助您提高网站的搜索引擎可见性，增加自然访客数量并提高转化率。
但如果您的网站已经适合移动设备，您仍然可以从我们关于改善用户移动体验的提示中受益。一点一滴都会有所贡献。
12 个简单步骤让您的网站适合移动设备
以下是您现在可以采取的一些措施，以确保移动访问者能够像桌面用户一样享受良好的用户体验。
1.让您的网站具有响应能力
据大多数网页设计专家称，构建响应式网站是确保网站能够很好地服务于桌面和移动用户的最佳方式。
响应式网站在您使用的任何设备上都具有相同的内容和信息。但它会响应您使用的设备并相应地调整其外观。
换句话说，设备屏幕的大小会影响页面显示文本和图像的方式。例如，桌面屏幕上显示在文本块旁边的图像可能会在智能手机上显示在单列中。
您可以让您的网站适合移动设备，而无需向移动访问者隐藏信息。这意味着他们将获得相同的内容，但排列方式不同。响应式设计也有利于 SEO。
现在响应式设计已成为常态；许多工具使它变得简单。对于响应式网页设计，请使用2022 年任何顶级网站构建器。
或者，选择最直接的选项并使用具有响应式模板的网站构建器。
WordPress 中的移动响应主题
如果您使用 WordPress 构建网站，请确保您选择的主题是移动响应式的。或者，如果您已经有一个 WP 网站，请切换到移动响应式主题。
只需在 WordPress 主题库或Themeforest等第三方网站上寻找响应式主题即可。请务必阅读评论，如果可能的话，请在您的移动设备上访问任何使用此主题的网站，以获得第一手体验。
如何在非响应主题上启用移动响应
如果您无法更改网站的主题或模板（因为它太旧且无响应），请尝试将以下代码行添加到每个页面的 <head> 标签中：
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
此代码将自动重新格式化您的网页以适应设备的宽度，从横向模式切换到纵向模式。
2. 让人们更容易找到他们想要的信息
人们经常使用智能手机查找特定信息，例如问题的答案、附近餐厅的地址或客服电话号码。在这些情况下，他们希望尽可能快速高效地找到信息。
请考虑一下您的移动访问者到达您的网站时最有可能寻找哪些信息，并将其放在移动主页的显著位置并易于访问。
想想人们访问您的网站时最常问的问题。您不必将所有答案都放在移动主页上，但要确保它们易于查找和导航。
使用您的分析工具来查看移动访问者在访问您的网站时正在寻找什么。在 Google Analytics 的行为部分中添加移动流量作为细分，以查看移动访问者如何与您的网站互动。
受众概览 Google Analytics
受众概览 Google Analytics
如何在 Google Analytics 中查看移动网络流量
如果您拥有一个小型网站，并且您的菜单经常在移动设备上被搜索，请考虑重新设计您的网站，使其更容易被找到。如果您的访问者经常访问该页面，请将您的联系信息添加到主页底部。
减少他们查找必要信息所需采取的步骤可以改善他们的整体网站体验。
3. 在移动设备上以合适的格式展示广告
通过内容获利固然很好，但不要让它影响移动体验。无论在什么情况下，没人喜欢分散注意力的广告。当您试图在小屏幕上阅读文本时，大型广告或弹出窗口会阻挡您的视线，这尤其令人烦恼。
大多数访问者会直接离开并转到其他网站，而不是寻找小 X 来关闭弹出窗口。如果您认为它们太重要而不能完全删除，请使用更合适的广告格式来展示广告。
详细了解如何利用您的网站为移动用户创造收益
4. 优先考虑网站速度
您还记得等待网站缓慢加载的日子吗？现在似乎每个人都希望互联网速度更快。如果您的网站加载缓慢，您的访问者将没有足够的耐心等待。
12 个简单步骤让您的网站适合移动设备
根据谷歌对移动加载速度的研究，大多数网站需要五秒以上才能完全加载。但当有数百个其他（可能更快）来源时，没有人愿意等待那么长时间。
为了提高移动网站的速度，网站所有者可以采用不同的策略。
使用 AMP（加速移动页面）。AMP 是 Google 认可的框架，用于减少移动网页的加载时间。在 WordPress 中获取 AMP 插件或为其他 CMS 和网站构建器获取 AMP 应用。
压缩 CSS 和图片：网页中占用空间最多且加载速度最慢的部分是包含高分辨率图片和 CSS 的部分。您可以通过压缩图片文件大小来缩短网站加载时间，从而加快加载速度，同时又不影响其质量。查看我们关于在博客中使用图片的指南。
评估您的网站托管套餐。如果您的网站已经超出了您最初使用或开始使用的网站托管计划，加载时间变慢可能是一个缺点（恭喜！）。升级到满足您当前需求的网站托管计划以加快加载速度。
5. 使用网站构建器让您的网站设计变得简单
在大屏幕上，复杂且杂乱的网站令人困惑。但在小尺寸的手机屏幕上，它们会让访问者更难浏览你的网站。
12 个简单步骤让您的网站适合移动设备 – 1
尽量减少杂乱。保持简洁的设计，让人们能够快速找到他们想要的内容。简单的设计还可以减少每个页面上需要加载的文件数量，从而缩短加载时间。如果您的网站有很多页面和类别，那么桌面屏幕上的大菜单可能会很有用。
然而，在移动设备上，您需要将范围缩小到最重要的选项。在移动设备上，一些网站将菜单隐藏在汉堡按钮后面。这样占用的屏幕空间更少，访问者可以在需要时点击打开它。
6. 让按钮足够大，以适应移动用户
使用鼠标点击任何大小的按钮都很容易，但在智能手机的小屏幕上，小按钮很难处理。使用更大的按钮是减轻访客这种挫败感的最佳方法。另外，考虑一下您要将它们放在屏幕上的什么位置。
花点时间在尽可能多的移动设备上测试您添加到网站的新按钮（以及任何已有的按钮）。确保在所有设备上点击每个按钮都很简单。
7.使用大字体
如果字体很小，在小屏幕上阅读会变得更加困难。在您的网页上，最好使用至少 16px 的字体大小，但您可以尝试一下，看看字体大小是否更大会更好。
使用标准字体也是个好主意。浏览器在呈现您的网站之前必须下载的任何字体对移动用户来说都是坏消息。查看我们关于最佳免费字体网站的指南。
8. 避免使用闪光灯
在整个网站中使用 Flash 是新手 SEO 的错误。它会增加页面加载时间，并且在许多浏览器和设备上都无法使用。由于 Android 和 iOS 设备都不支持 Flash，因此如果您构建的网站以任何方式依赖 Flash 动画，您的移动用户将被排除在外。
如果您的网站是几年前建立的，那么可能仍有一些功能依赖于过时的 Flash 技术。
9. 不要忘记使用视口元标记
视口元标记可让您轻松控制网站在移动设备上的显示方式。如果您的页面在手机小屏幕上的打开宽度与在桌面上相同，您将不得不笨拙地左右滚动才能阅读每一行文本并查看页面的不同侧面。视口元标记指示浏览器调整页面大小以适合访问者的设备屏幕。
将其包含到 HTML 源代码中非常容易。只需将以下内容复制并粘贴到每个页面的 HTML 中即可：
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
10. 禁用表单中的自动更正功能
自动更正有其优点，但网站所有者经常忽视它如何破坏用户与其网站的互动。
如果您网站上的表格需要姓名或地址信息，请关闭每个表单字段的自动更正。
否则，他们的手机会不断将他们的名字或街道名称“纠正”为更常见的词语，从而减慢转换过程。
确保在输入字段的 HTML 中包含 autocorrect=off。
如果表单不够简短，请确保表单简短。不要让访问者提供任何不必要的信息。如果表单填写时间过长或要求访问者提供他们不想分享的信息，那么无论他们使用哪种设备，他们都不会再填写表单。
11. 可以切换到桌面视图
您的一些移动访问者可能更喜欢在智能手机上查看您网站的桌面版本。如果他们想要这样做，请为他们提供实现这一目标的方法。您希望访问者能够以最自然的方式与您的网站互动。这都是拥有移动友好型网站的一部分。
12.定期进行移动测试
确保您的网站提供良好的移动体验的最佳方法是定期在移动设备上进行测试。每天在手机或平板电脑上检查您的网站，花一些时间浏览网站以寻找改进的空间。
定期测试是发现可能影响访客体验的小问题的最佳方法。越早发现这些问题，您就能越早对网站进行更改，使其真正适合移动设备。
结论
适合移动设备的网站在搜索结果中排名更高。
移动搜索占 Google 所有搜索的一半以上。
许多广告商的大部分流量来自于使用手机的用户。
如果您的网站不适合移动设备，访问者放弃您的网站的可能性将增加 5 倍。
移动优先的用户体验需要移动优先的广告，因此请尝试使用社交栏等高级格式。
移动设备总是在变化，所以你今天的响应式网站明天可能就不够了。继续测试，在必要时进行调整，并优先考虑你的移动用户，这样你应该没问题。
