针对移动设备优化网站的新思路

想象一下： 小企业主丽莎终于有了喘息的时间。

她拿出手机，决定查看一下自己的网站。但她看到的……却是一场噩梦。

她的网站加载缓慢。她不得不缩放才能阅读文字。按钮呢？很小，没有三次尝试是无法点击的。

她的网站在台式机上看起来还不错。但在手机上呢？简直一团糟。

与此同时，她的网站这样下去，每秒钟都在流失客户。

如果她的客户在苦苦挣扎，谷歌也会如此，因为对排名非常重要。一个让用户失望的网站根本无法在网上竞争。

为什么移动优先设计至关重要

丽莎的故事并非独一无二。

拥有智能手机，而且大多数人将手机作为主要设备。这比的人要多得多。

目前，移动浏览占 *** 流量的 以上，谷歌对的关注也反映了这一转变。

如果您的网站在移动端提供的用户体验不佳，您就有可能失去访客、搜索结果排名，最重要的是，失去相关性。

就是这么简单。

对任何企业来说，修复移动网站都不仅仅是另一个项目。如果说有什么意义的话，那就是为企业注入活力，留住客户，为客户找到你增加另一个渠道。

移动优先的设计能让用户满意，加载时间快、导航流畅、互动方便。

因此，如果您准备优化您的在线形象，请从移动设备开始。因为这是您的客户所在，也是您的网站取得成功的关键所在。

响应式网页设计意味着什么？

响应式设计意味着您的网站会自动调整以适应任何屏幕尺寸–智能手机、平板电脑、台式机甚至智能手表。

它不仅适合，还能以清晰易懂的格式提供信息。您要确保用户无需缩放或滚动，就能看到适合他们所使用的任何屏幕的内容。

当你浏览一个网站时，你会发现它能适应你的屏幕大小。

对于大屏幕来说，元素会放大到一定程度，这样它们就不会显得过大，但仍然易于使用。

移动设备则恰恰相反。当你使用较小的屏幕时，你希望网站的内容缩小，但又不至于变得无法阅读或无法交互。

比如服务器主机提供商 DreamHost 主页在台式机、平板电脑和移动设备上的样子。

能够实现这种平衡的网站被认为是响应式网站。网页设计和开发在这里是相辅相成的，因为网站的图形资产需要缩放。

在后台，有 CSS 和样式表来管理网站如何在不同尺寸的屏幕上显示。

直到最近，响应式设计还只是一个事后的想法。我们过去的网站设计都是围绕桌面体验进行的。

现在，移动流量占据了首位，移动设计也是如此。这就是为什么你经常会在网页设计圈子里听到移动优先这个词。

还有一个常用的术语是 “响应式设计”。

另一方面，自适应设计是指为一个页面创建多个版本，并根据访客使用的设备类型提供服务。

如今，这种网页设计 *** 已经过时，因为响应式设计才是更有效的选择。

如何在网页设计时考虑移动优先

公司的首席执行官布莱恩-克莱顿（Bryan Clayton）花了九个月的时间，从零开始建立自己公司的网站。

一开始就遇到了很大的问题 。

我们以为大多数用户会通过台式机或笔记本电脑购买草坪护理服务。但很快我们就发现，使用手机和平板电脑访问网站的人数比使用台式机或笔记本电脑访问网站的人数要多得多，比例高达 4:1。

最初的全功能台式机体验包括各种 *** 和口哨声，例如动画。

我们拥有各种其他功能，这些功能使桌面体验令人愉悦 。

这种 *** 的问题是，桌面体验无法转换到移动 *** 浏览器上。

因此，网站显得臃肿，在移动设备上运行不畅。用户发现，他们不得不通过捏合和缩放来完成注册过程。

在我们的网站重建为移动优先体验之前，移动浏览器上的转换率不到 4% 。

这意味着，96% 的用户在注册过程中放弃了注册。

克雷顿发现，在以移动为先的方式后，82% 的人通过移动设备和平板电脑完成了免费价格评估的整个注册过程。

我们的移动优先产品是我们今天能够立足于市场的唯一原因 。

主要收获：

布莱恩-克莱顿（Bryan Clayton）借鉴 GreenPal 的移动优先之旅，提出了可以简化移动设计 *** 的见解：

• 了解你的用户群：从访问者如何访问网站的数据入手。如果大多数用户都使用移动设备，那么确保移动体验是你的首要任务。克莱顿的数据显示，5 个访客中有 4 个使用移动设备，这重塑了 GreenPal 的设计 *** 。
• 取消桌面功能：避免使移动体验混乱或复杂化的功能，如复杂的动画或小图标，这些功能在台式机上效果很好，但在较小的屏幕上就不行了。
• 优化关键操作：在移动端，注册或购买等关键操作的路径应尽可能简单直观。跟踪并改进转换步骤，以适应移动端的流程。
• 保持视觉效果简洁实用：通过保持布局简洁、元素间距合理和来限制干扰并关注可用性。
• 测试、迭代和改进：定期在移动设备上测试网站，找出用户体验中的潜在痛点。根据反馈意见进行调整，提高网站的可访问性和导航便捷性。
• 优先考虑转换路径：测试并优化移动设备上的注册流程。82% 的移动注册完成率表明，改进流程可以提高用户满意度和转化率。

说到响应式设计，我们可以从 GreenPal 的经验中学到很多东西。

首先，我们来谈谈对受众的定位。

聚焦受众，征求客户反馈

在重新设计网站时，你可能需要弄清楚客户目前是如何与网站互动的。这意味着要查看分析数据，看看移动用户和台式机用户的参与度是否有所不同。

分析结果可能会显示，移动访客的跳出率较高，或者在网站上花费的时间较少。

这些都是移动用户体验不佳的致命信号。如果数据指向这个方向，更好的办法就是询问客户喜欢什么，不喜欢什么。

洛杉矶 公司的老板 Zondra Wilson 在开始征求客户反馈意见时才发现自己的网站对移动设备不友好。

我让顾客写评论，他们却说找不到写评论的地方 。

我会向他们询问我的博客或我发布的文章，但他们很难找到。他们在手机上查看我的网站时也有困难。他们必须向下滚动很多页，我的之一张照片或关于我公司的任何信息才会跳出来。他们不知道如何浏览我的网站。很多人都很沮丧，没有浏览过之一页。

当 Wilson 将自己的网站升级为更适合移动设备的版本时，她立刻注意到用户开始浏览比平时更多的页面。

主要启示

• 听取直接反馈：威尔逊的客户分享了他们在移动屏幕上浏览网站时遇到的困难，从寻找评论部分到阅读她的博客。他们的反馈突出了具体的问题领域，从而指导改进工作，提高了移动网站的参与度。
• 在分析中观察用户行为：移动网站的高跳出率或低会话时间都表明用户体验不佳。利用这些指标来确定设计变更的优先次序，并加强关键的移动接触点。
• 使导航直观，内容易于访问：Wilson 网站调整的重点是让内容在移动端立即可见，减少过多的滚动，提高关键部分（如评论和产品详情）的易查找性。

为移动设备优化网站有很多屡试不爽的技巧。但是，客户的反馈意见往往会揭示出用户体验中的某些部分，而这些部分是你可能会忽略的。

优化页面内容

在考虑移动设计时，用户在一个视图中可以看到的信息量和与之交互的信息量（也称为用户界面密度）是一个重要的决定因素。

看看这些图片，哪个更密集：

两者的点数相同，但图像 A 看起来比图像 B 更密集。

早期的设计试图将尽可能多的内容打包。

比如雅虎主页：

时至今日，你还会看到许多网站同样信息繁杂。

然而，现代移动界面优先考虑的是清晰而非杂乱，给用户提供他们所需要的东西，不多也不少。

而这正是谷歌从创立之初就遵循的设计风格。

下面是谷歌 2000 年代初的图片：

设计专家）写道：”用户界面的密度并不仅仅是指我们在屏幕上看到多少内容，而是指信息如何直观地在瞬间流动”。

移动设备上过多的杂乱信息会迫使用户去寻找重要的信息，从而减慢用户的使用速度。但是，牺牲重要信息的稀疏设计同样会令人沮丧。

主要启示

• 优先考虑重要操作：确定对用户来说最重要的操作，如 “行动呼吁 “和表单，并将这些元素放在突出位置。然后，修剪不必要的链接或按钮，防止杂乱无章。
• 使用视觉层次来引导流程：合理安排内容结构，使其自然地引导用户浏览页面，减少回溯的需要。正如我们在上面的圆点示例中看到的，用清晰的标题将相关项目分组，有助于引导注意力，同时让用户界面感觉不那么杂乱。
• 明智使用空白区域：留白是移动设备上宝贵的空间。用它来分隔不同的操作或元素，但要避免过度。适当的间距可以帮助用户直观地将相关信息分组，而不会增加过多的滚动。
• 设计便于触摸的交互方式：确保按钮、链接和图标足够大，便于在小屏幕上点击。目标是每个触摸目标至少有 44×44 像素。
• 保持文字可读性，无需缩放：保持一致的字体大小和间距，使文字一目了然。响应式网格和媒体查询可帮助确保内容在不同设备上正确缩放。

对于移动网站来说，保持用户界面密度的有效平衡可确保用户快速找到所需内容，而不会感到视觉负担过重。

从小处着手（屏幕尺寸）

现代智能手机功能强大，您的大部分受众都能使用良好的 *** 连接。

但是，您需要确保网站的加载速度尽可能快。因此，去掉多余的杂乱内容是更好的设计策略之一。

公司首席执行官维塔利-维诺格拉多夫（Vitaliy Vinogradov）发现，改用响应式、移动优先的网站设计后，转化率比桌面网站高出 30%。

要做的一件重要事情就是删除移动版网站上多余的插件、弹出式窗口或任何其他屏幕干扰器 。

他的团队对网站进行了梳理，去掉了一些占用屏幕宝贵空间的社交分享插件。当你在设计时考虑到大屏幕时，你可能会发现你最终包含了很多对用户没有太大价值的元素。

）解释说，“你需要为小屏幕设计。”他是洛杉矶的一名产品设计师。

“你必须更加专注。你必须减少信息和内容”。移动网站建成后，你可能会发现，你根本不需要在桌面版网站上添加更多内容。

你可以通过删除所有视觉杂乱的内容，让你的网站在移动端更容易使用。此外，访问者还能专注于真正重要的内容。这意味着用户旅程中的行动号召、表单、帖子和其他关键元素。

主要启示

• 速度优先于多余的功能：删除非必要的插件、弹出式窗口和大图片，以简化移动体验。
• 强调基本内容：关注用户最需要的内容，尤其是在移动设备上。删减大段文字、不必要的图片和多余的功能。将关键元素，如 “行动呼吁 “和导航按钮等放在触手可及的地方。
• 使导航直观：在小屏幕上，用户可以从简单明了的布局中获益。坚持使用垂直滚动的单栏布局，并将导航项目放置在易于访问的位置。
• 设计时考虑到点击目标：按钮和链接应足够大，以便在小屏幕上舒适地点击。避免使用过小的按钮或过密的链接，以免造成意外点击。
• 减少视觉杂乱：留白对于移动设备上的可读性至关重要。它为每个元素提供了呼吸空间，提高了页面的整体可用性。

完善设计美学

Felten 说：“现在的消费者对设计的要求越来越高”。”他说：“现在人们非常希望看到一个漂亮、性能良好的网站所带来的商业价值 。

如果我是一个小企业主，而所有的竞争对手都有一个非常漂亮、反应灵敏的网站，而我没有，那么在不到一秒钟的时间里，人们就会对我的产品做出负面评价。

当你建立一个专业的网站时，它不仅能展示你的设计眼光，还能展示你为提供良好的用户体验所付出的努力。

除非你从事的是一个非常小众的领域，否则客户在网上几乎总是有其他选择。

您网站的设计应能很好地代表您的业务，因此请尽心尽力。

针对移动设备优化网站的 8 种 ***

既然你已经知道为什么有必要为移动使用而优化你的网站，那就让我们来做一些更实际的事情吧。在接下来的几节中，我们将带您了解创建移动优化网站的一些最关键的方面，从简单到技术复杂，不一而足。

我们建议您花时间尽可能多地实施这些 *** ，以提高网站在所有设备上运行良好的几率，并获得 Google 移动优先索引的青睐。

1. 使用谷歌Lighthouse测试网站

在采取任何进一步行动之前，立即对网站的移动友好性进行清点。

这将帮助您找出网站中需要改进的具体方面，并为您提供如何改进的有用信息。

一种 *** 是在几种不同的设备上使用网站。使用自己的智能手机或平板电脑访问网站，看看网站的外观和使用感觉如何。

这样做可以让您了解加载时间、在较小屏幕上的设计效果、内容是否仍然可读以及导航是否易于使用。

要深入了解并获得详细的诊断结果，可以使用 ，这是一款开源工具，可提供侧重于性能、可访问性、搜索引擎优化 (SEO) 等方面的审核。

现在，Lighthouse 已直接集成到 Chrome DevTools 中，使其易于访问和使用，以便对网页进行全面分析。

下面介绍如何访问它：

1. 打开谷歌 Chrome 浏览器：你需要使用，因为你需要使用 Chrome DevTools 才能使用 Lighthouse。
2. 进入隐身选项卡：你可以在Windows上点击 Ctrl + Shift + N，或者在Mac上点击 Cmd + Shift + N。我们之所以要在隐身模式下进行测试，是因为插件会干扰 Lighthouse 的性能分析，甚至谷歌也建议在隐身模式下进行测试。
3. 导航到要检查的网站：输入网站的 URL 并让其完全加载，以获得准确的读数。
4. 打开 DevTools：右键单击页面上的任意位置并选择 “检查“，或使用键盘快捷键 Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac）打开 DevTools。
5. 选择Lighthouse选项卡：进入 DevTools 后，点击顶部的 “Lighthouse” 选项卡。这部分是配置和运行审计的地方。
6. 配置审核设置：选择 “移动” 来评估移动性能。选中所有类别以进行全面分析–“性能”、”可访问性”、”更佳实践” 和 “搜索引擎优化”。
7. 运行审核：点击 “分析页面加载” 启动分析。Lighthouse 将开始测试并汇编每个选定类别的结果，包括移动页面的移动优化。这个过程可能需要几秒到一分钟。

Lighthouse 可为每个类别提供评分和建议：

• 性能：告诉你加载速度和响应速度。
• 可访问性：显示网站对残障人士的友好程度。
• 更佳实践：检查安全性、移动设计和质量方面的问题。
• 搜索引擎优化：就网站在移动端针对搜索引擎的优化程度提供建议。

每个部分都有具体建议。浏览这些内容可以帮助您提高网站的移动性能，使其更快、更易使用。

现在不要太在意分数。正如你所看到的，即使是谷歌也在搜索引擎优化方面打出了 83 分。您只需尽可能地改善它，使其接近 100 分即可。

此时，您可以依次处理列出的每个问题。例如，如果您在某个页面上运行测试，但分析没有完成，那么您的 robots.txt 文件可能阻止了谷歌的机器人。

只需，允许 Google 访问被阻止的文件或修复任何即可。

2. 使用自定义CSS使网站具有响应性

实现响应式网页设计的一个重要部分就是使用 CSS。只要掌握一点 ，就能让你的网站对移动设备友好，这一点会让你大吃一惊。

举个例子，你可以使用 CSS 来实现我们所说的媒体查询范围。

通过媒体查询（或响应式断点），你可以告诉浏览器何时加载页面的不同布局，这取决于浏览器使用的屏幕大小。

下面是一个简单的媒体查询：

@media (max-width: 768px) {
/* CSS rules for screens 768px and  *** aller */
}

您在此块中添加的任何样式规则都将适用于屏幕尺寸为 768 像素宽或更小的设备。

这是告诉浏览器根据屏幕尺寸将两个按钮堆叠在一起或并排显示的 *** 之一。

媒体查询是 HTML、CSS 和 JavaScript 库（包括 ）的重要组成部分，因为它们可以实现移动响应式设计。

使用 CSS 使网站响应速度更快的其他 *** 包括：

创建CSS网格布局：

CSS 网格布局（如 Bootstrap 提供的布局）提供了一种简单的 *** ，可帮助您根据不同的屏幕尺寸调整设计。有了一个定义明确的元素布局，您就可以根据不同尺寸的屏幕来配置元素的显示方式和所占空间。

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

对布局元素使用大小百分比

如你所知，CSS 可让你使用像素和其他度量单位来设置元素的高度和宽度。为了让你的网站反应更灵敏，我们建议使用百分比。这样，当屏幕变小时，按钮等元素就能无缝适应。

img {
width: 100%; /* Scales with container size */
height: auto;
}

流畅的排版和间距：

页面上的图片和其他视觉元素不应该是唯一能适应小屏幕的东西。文字也需要响应，否则移动网站上的用户只能在屏幕上看到一两个字，然后就需要向下滚动。以相对单位（如 em 或 rem）设置字体，可使字体随设备缩放。

h1 {
font-size: 2.5rem;
}
@media (max-width: 600px) {
h1 {
font-size: 2rem; /* Smaller font size for  *** aller screens */
}
}

控制元素之间的间距

CSS 可以帮助你使用 padding 和 margin 在不同 HTML 块之间轻松添加间距。

下面是一个简单的示例，说明如何在块中添加 margin 和 padding，以及如何应用媒体查询来添加不同的间距：

.card {
margin: 20px;
padding: 15px;
}
@media (max-width: 768px) {
.card {
margin: 10px;
padding: 10px;
}
}

如果你对 HTML 和 CSS 的使用感到得心应手，那么设计一个完全响应式网站可能比你想象的要容易得多。

不过，如果您使用 WordPress 等，整个过程就会变得简单得多，因为即使在进行响应式设计时，您也很少需要处理代码。

3. 选择响应式主题和插件

WordPress 提供了大量专为移动友好性而设计的主题和插件，因此比以往任何时候都更容易构建响应式网站。

大多数新主题（超过 10,000 个！）都采用了响应式设计原则，因此选择合适的 WordPress 主题应该很容易。

无论您选择哪种主题，它们都能自动适应任何设备，无需额外工作。

如果您想在安装或购买主题前检查其是否具有响应性，我们建议您查看其演示。很多主题演示都会预览其设计在较小屏幕上的效果。

确保响应性的技巧：

• 使用预览：使用 Gutenberg（区块编辑器）、Spectra、 和 Divi 等工具，您可以预览页面在桌面、平板电脑和手机上的效果。这一步骤有助于确保每个页面从一开始就针对不同设备进行优化。
• 避免重型插件：坚持使用注重性能和响应性的插件。有些插件会增加大量加载时间，影响移动性能。尽可能使用轻量级插件或选择 WordPress 内置功能。
• 使用暂存网站进行测试：使用暂存环境测试新主题和插件。这为您提供了一个安全的空间来调整设置、添加内容，并确保您的网站在所有设备上都能响应，然后再将更改上线。
• 考虑经典编辑器插件的替代方案： 经典编辑器的可视化程度不如新的编辑器，因此很难预览移动友好型设计。升级到块编辑器（Block Editor）或像 Spectra 这样的可视化页面生成器，可以确保为移动设计提供更好的体验。

是一款功能强大的 WordPress 插件，它能帮助你设计出漂亮的网站，并提供针对移动设备优化的本地拖放界面。

它扩展了 WordPress 块编辑器的功能，可帮助您创建用户友好型网站，这些网站本身具有响应性，可确保网站在从智能手机到大型台式机等各种屏幕尺寸上都美观大方。

它直观的设计选项允许你自定义每个元素，以便在所有设备上都能获得更佳浏览效果，使移动友好型设计更易于使用。

如果你觉得创建响应式页面有困难，可以尝试使用 Elementor 或 Spectra 等人工智能网站创建工具，或者更换主题。这些都会对任何页面产生重大改变，因此你需要慢慢熟悉新插件和主题的工作方式。

4. 测试网站的Core Web Vitals

是谷歌关注用户体验的性能指标。它们有助于评估网站的加载、交互和稳定性，这些因素对搜索引擎优化和用户满意度有很大影响。

下面是这些指标的快速分解：

• 更大内容页面绘制 (LCP)：该指标衡量的是页面上更大元素（通常是主图或标题文本）加载所需的时间。LCP 分数低意味着页面整体加载速度快。更快的 LCP 表示主要内容可以更快地访问，更好在 2.5 秒内。
• 首次输入延迟 (FID)：该指标的目的是衡量交互性。FID 分数能告诉你在页面加载时，用户需要多长时间才能与页面进行交互。FID 应低于 100 毫秒，以确保流畅的体验。
• 累积布局偏移(CLS)：它告诉你页面在加载过程中的布局 “移动” 或移动的程度。您希望 CLS 分数接近零，以尽量减少这种移动。

给网站的用户体验打分很难。因此，核心网站生命值并不能全面反映网站的整体用户体验。不过，它们能让您衡量任何页面的关键技术方面，而这些方面会直接影响用户体验的好坏。

此外，核心网站体验不仅仅是理论上的练习。

它们对搜索引擎优化和页面排名有直接影响。谷歌允许您使用其免费的 工具测试核心网页生命值。

只要输入一个 URL，PageSpeed Insights 就会返回其核心网页生命值的概览：

与 Lighthouse 工具一样，Google 也会提供具体的建议，告诉你可以通过哪些改进措施来优化网站。

由于 Core Web Vitals 更注重性能，因此您在这里看到的大多数建议都与速度优化有关：

请记住，PageSpeed Insights 会分别返回移动版和桌面版网站的结果。

这意味着每个版本可能会得到不同的建议。关注移动优化建议将大大提高这两组得分。

5. 改善网站的加载时间

正如我们在上一节所暗示的，网站速度在移动设备上尤为重要。

优化网站速度不仅能帮助你降低跳出率，还能改善用户体验，这对你的盈利来说是个好消息。

通过测试网站的核心 *** 生命值，您可以准确了解网站加载所需的时间。

有了这些信息和工具提供的性能优化建议，您就可以着手改善网站的加载时间。

以下是一些对网站影响更大的优化 *** ：

• 实施缓存：使用缓存时，网站的一些文件将被保存在一个更方便的位置（比如每个访问者的本地设备上），这样就不需要在每次访问新页面时都下载这些文件了。有许多免费的缓存插件可供使用，不过一些托管计划默认情况下也包含这一功能。
• 使用内容交付 *** （CDN）：可让你在分布在不同地理位置的一系列服务器中存储文件副本，而不是从一个中央服务器发送文件。这样，无论用户身处何地，加载时间都会更加均衡，同时还能减少带宽使用量。
• 优化图片：大型图片文件往往是导致加载时间缓慢的罪魁祸首。通过压缩图片，您可以在不影响图片质量的情况下。有几种免费和高级解决方案可以帮助你做到这一点，包括 和 网站。
• 最小化代码：通过优化网站的 CSS、HTML 和 JavaScript 代码，可以提高网站效率，缩短宝贵的加载时间。
• 更新网站的各个方面：使用过时的软件来运行网站，不仅容易出现安全问题，还会使网站无法发挥更高效率。通过随时更新插件、主题和内容管理系统，可以避免这些问题。

虽然这看起来似乎很费事，但实际上这些技术大多可以通过简单、免费的解决方案来实现，几乎不需要你进行任何配置。

因此，您的网站在移动设备上的表现会更好，在搜索引擎排名中也会更有优势。

6. 为移动设备重新设计弹出窗口

虽然弹出式广告因其侵入性和干扰性而饱受批评，但它们仍然是一种出奇有效的潜在客户生成 *** 。

因此，如果您的网站包含至少一到两个弹出式窗口，用于捕捉潜在用户或向用户传递重要信息，我们也不会感到惊讶。

虽然弹出式窗口非常有效，但它们会对移动体验产生负面影响。

在较小的设备上，屏幕空间变得更加重要，即使是中等大小的弹出式窗口也会比桌面版网站上的弹出式窗口更具破坏性。

不久前，，实施了一系列这些元素需要遵守的规则，以避免它们过度影响用户体验。

以下是谷歌认为具有干扰性的弹出窗口的示例：

无论是在用户从搜索结果导航到页面后，还是在用户浏览页面时，弹出式窗口都会打断用户流程并覆盖主要内容。

另一方面，这里有一个在谷歌眼中很好的例子：

谷歌可以接受这种弹出式窗口，因为它有一个易于点击的大按钮。

此外，大多数弹出式窗口都是根据法律义务创建的，例如 Cookie 使用或年龄验证，只要不过分，就完全没有问题。

这些规则包括以下内容：

• 弹出式窗口必须尽可能不造成妨碍：在移动设备上，弹出式窗口只能覆盖屏幕的一小部分。
• 弹出式窗口应易于关闭：应明确移动用户如何关闭弹出窗口，通常是通过一个可见的、大小合适的按钮。添加一个清晰可见、大小合适的关闭按钮，让用户可以毫不费力地解除弹出窗口。
• 包含必要信息的弹出窗口除外：上述指导原则不适用于登录对话框、年龄验证表、cookie 通知、GDPR 同意通知等。

只要您在设计弹出式窗口时牢记这些注意事项，您的网站就不会受到任何负面影响。但是，不遵守弹出式窗口指南的网站可能会在排名中受到惩罚。

7. 选择可靠的虚拟主机

我们以前说过，现在还要再说一遍–为网站选择合适的服务器主机是您要做的最重要的决定之一。

为什么？

移动用户通常都在路上， *** 速度通常较慢，因此每一秒的加载时间都很重要。

经过优化的主机可以让您的网站保持快速、可靠并始终可访问。

一个简单的事实是，如果您选择的主机或计划不能提供您所需的速度和资源，那么无论您做多少工作，都无法阻止您的网站表现不佳。

有鉴于此，您需要选择一个能保证持续高性能和最少停机时间的计划。我们建议选择 VPS 或受管理的专用托管计划，以获得稳定的性能。

虚拟专用服务器（VPS）托管是需要稳定速度和灵活性的网站的理想之选，而且无需破费。使用VPS，你可以获得一个虚拟化服务器，该服务器提供专用资源，这意味着你的网站在高流量时不会出现速度减慢。

如果您对虚拟主机有更高的要求，您可以选择托管专用服务器，这意味着您可以使用专门为您的网站预留的服务器。

对于大型网站或电子商务平台来说，托管专用主机可以提供更大程度的控制、速度和安全性。有了专用资源，您就可以根据自己网站的需要定制服务器，确保在任何时候都能提供一流的性能。

这不仅可以让您根据自己的确切要求定制服务器，还意味着安全性和速度的提高–这两者都是移动友好型网站的关键要素。

移动优化主机的注意事项：

• 高正常运行时间保证：寻找能提供至少 99.9% 正常运行时间的主机，以确保移动用户能随时访问网站。
• 内容分发 *** （CDN）：CDN可以从更靠近用户的服务器发送内容，从而进一步加快网站速度。使用DreamHost，你不需要订阅和配置第三方CDN，它可以为你的网站加速。
• 缓存和压缩：选择支持缓存和图像压缩的主机，以缩短加载时间，这对于连接速度较慢的移动用户尤其有价值。DreamHost会在我们的服务器上自动缓存你的网站，也会在用户的浏览器上自动缓存，以加快页面加载时间。

8. 创建移动应用程序

最后，我们迎来了一项看似艰巨的任务–创建移动应用程序。

移动应用程序不再是大品牌的专利。市场已经发生了巨大的变化，现在几乎所有类型的企业或组织除了提供标准的响应式网站外，还提供移动应用程序，这已经是司空见惯的事情了。

拥有专用应用程序还能带来许多简单网站无法提供的独特优势。例如，您可以提供独家内容、直接管理订阅、使用推送通知即时联系用户–让他们随时了解新闻、优惠或更新。

您也不必从零开始。

虽然可以从头开始编写移动应用程序（或聘请开发人员），但更简单的解决方案是使用一种工具，帮助您将网站转化为应用程序。

利用专门为 WordPress 用户设计的 等工具，您只需进行少量编码，就能将现有网站转化为应用程序。

这是一款高级工具，起价为每月 59 美元。为此，您将获得一个直观的应用程序生成器界面，如果您已经熟悉 WordPress，应该会很容易使用。

有了这个工具，您就可以根据特定网站快速 *** 出 Android 和 iOS 移动应用程序，然后通过 App Store 或 Google Play 商店与用户分享，或直接提供给网站的访问者或订阅者。

小结

将您的网站移动化意味着您可以随时随地接触到受众–就在他们手中。

随着越来越多的人使用移动设备，快速加载、用户友好的移动体验对于任何在线业务都至关重要。

因此，从响应式设计到优化加载时间，每一项改进都有助于提高用户参与度，并在搜索排名中占据有利位置。

无论您使用的是硬编码网站还是 WordPress 等内容管理系统，都不要再等待了。

经过移动优化的网站是实现增长并与受众建立联系的基础。