如何保证您的着陆页符合 AMP 标准

当 Accelerated Mobile Pages (AMP) 项目开始时，它主要限于静态内容。 基本框架主要帮助了出版商，使他们能够为读者构建更快、无缝的发现和消费体验。

然而，多年后，情况发生了很大变化。 AMP 的一维开端被能够构建整个网站的进化工具集所取代。 在推出这些多功能、快速加载的体验时，AMP 的主要目标保持不变：让移动网络更快。

但是，实现的方式是不同的。 通过变通方法和先进技术，设计人员已经找到了满足 AMP 约束的方法，同时创建对于临时用户来说根本不会看起来或感觉受到约束的页面。

随着不断变化的更新和设计策略，今天的设计师在尝试满足 AMP 合规性标准时应该期待什么？

7 AMP 兼容页面的设计原则

虽然 AMP 可以做的大部分事情已经改变，但指导其开发人员的设计原则没有改变。 根据 AMP 网站，要创建符合 AMP 标准的页面，在框架内进行设计时，您必须遵循以下七个支柱：

1. 用户体验 > 开发者体验 > 易于实施

虽然 AMP 是一个开源项目，但它是由 Google 发起的。 而且，就像谷歌的所有东西一样，用户体验是重中之重。 “当有疑问时，”AMP 创建者说，“为最终用户体验做最好的事情，即使这意味着页面创建者更难构建或库开发者实施。”

2. 只做可以快速完成的事情

作为一个开源项目，设计人员可以自己制作 AMP。 但是，加速移动页面的最终目标是加速。 定制是公平的游戏，也是意料之中的，但只是以速度的名义。 AMP 创建者警告说：“不要向 AMP 引入无法以 60fps 可靠运行或阻碍当今最常见移动设备上的即时加载体验的组件或功能。”

3. 不要设计一个假设的未来更快的浏览器

AMP 创建者喜欢他们的框架就像网络用户喜欢他们的页面一样：现在。 该平台旨在在今天的移动网络上运行，而不是在明天的移动网络上运行。 所以设计师应该考虑到这一点，而不是一个以马赫速度工作的假设浏览器。

与此同时，今天的开发人员塑造了 AMP 的未来。 所以，仅仅因为你现在不能做某事并不意味着你有一天不想做。 AMP 的创建者说，这就是为什么 AMP 开发人员“参与标准开发”以在未来获得对 AMP 可用的优化很重要的原因。

4. 不要破坏网络

始终确保出色的用户体验意味着为最坏的情况做好准备。 在 AMP 的情况下，这可能以 AMP Cache 出现故障或 API 失败的形式出现。 如果发生任何一种情况，您的内容的消费应该只会“优雅地降级”。 如果您的内容使用 AMP 缓存，它也应该在没有它的情况下工作。

5. 优先考虑改善用户体验的事情——但在需要时妥协

虽然在大多数情况下，更快的页面加载意味着更好的用户体验，但并非总是如此。 而且，AMP-ing 不应该阻止用户。 有一个平衡，用户体验总是胜出。 根据 AMP 的网站：“只有在缺乏对某些东西的支持时才会妥协，才会阻止 AMP 被广泛使用和部署。”

6.解决正确层上的问题

使用 AMP 解决问题不是开发人员最容易实施的方法，而是最终用户最适合的方法。 不幸的是，这两者并不总是重合。 例如，如果在客户端集成更容易，不要简单地实现用户是否会从服务器端集成中受益。 强调用户体验，问题应该在正确的层解决。

7. 没有白名单

该框架不支持白名单。 因此，如果您正在寻找特殊待遇，您将不会在 AMP 中为任何网站、域或来源找到它，只有一个例外，创作者说：
当“出于安全或性能原因需要”时。

如何检查 AMP 合规性

您可能认为 AMP 页面的最大优势在于它们的速度。 不是这样，它的创造者说。 使 AMP 如此吸引人的不仅仅是速度，还有它的验证能力。 这样，第三方（如社交网络）就可以放心地将用户发送到那里，因为他们知道他们将获得快速且无缝的点击后登录页面。

要回答“我的网页是否符合 AMP 标准？”这个问题，有四种方法。 三个是由 Google 使用其验证器在通过/失败的基础上提供的。 AMP 验证器将帮助您在启动前发现页面的任何问题。 最后，传递是让他们符合 AMP 的原因，向第三方发出信号，他们可以期望从您的页面获得快速的用户体验。

浏览器开发者控制台

要使用浏览器开发者控制台发现 AMP 页面的问题，请按照以下三个步骤操作：

1. 在网络浏览器中打开 AMP 页面
2. 在 URL 末尾添加“#development=1”
3. 打开浏览器开发者控制台以检查验证错误

任何阻止您的网页符合 AMP 标准的错误都将类似于以下内容：

网页界面

使用 Web 界面来确定 AMP 合规性很容易。 首先导航到界面。 然后，只需在其“URL”字段中输入您的源代码，最后单击验证按钮。

使用此方法发现的错误看起来会有些不同。 如下所示，它们将出现在页面的 HTML 源代码旁边：

浏览器扩展

三者中最简单的是，此验证器以漂亮的 Chrome 扩展程序的形式位于您的工具栏中。 无需您的努力，该扩展程序就会验证您碰巧所在的任何 AMP 页面。 它的状态将用三个彩色图标之一指示。

• 蓝色图标表示您所在的页面不是 AMP，而是它的 AMP 版本。 如果单击该图标，浏览器将带您进入加速的移动版本。
• 红色图标表示此页面上存在错误，并且该图标旁边会显示一个数字，准确指示错误数量。
• 绿色图标表示当前 AMP 页面上没有错误。 但是，可能会有警告。 如果有，该图标旁边会出现一个数字，详细说明具体有多少。

这三者都可以在发布之前轻松捕获 AMP 页面中的错误。 第四个选项不是由 Google 提供，而是由 Instapage 提供，用于尝试构建快速点击后登录页面的创作者。 以下是在构建 AMP 点击后登录页面时如何使用它：

如何使用 Instapage 创建 AMP 点击后登录页面

阅读这些合规性标准，您可能会感到困惑。 幸运的是，使用 Instapage，构建 AMP 点击后登录页面很简单。 用户可以简单地按照以下步骤操作：

1：新建一个页面

当您开始创建新页面时，在出现提示时单击“AMP 页面”：

对于用户来说，下一步可能会显得陌生，因为通常情况下，构建器会询问您要使用哪个模板。 虽然 Instapage 为非 AMP 页面提供了数百个经过转换验证的模板，但 AMP 页面是从头开始构建的。 因此，AMP 页面当前不存在模板选项。

第 2 步：向页面添加元素

如果您是 Instapage 的普通用户，您还会注意到 Timer 和 HTML 小部件不在工具栏中。 但是，您可以使用所有其他图标及其功能来构建页面：

此外，由于 AMP 限制了 CSS 和 JavaScript，因此构建器会保留这些常用选项。 您将看到以下内容：

调整背景、字体、SEO 以及您在上面看到的所有内容。 自己动手，或使用 Instapage 协作解决方案与您的团队协作。 然后，甚至将您的页面组件保存为 Instablocks™ 以插入到其他页面中。 （注意：虽然 Instablocks 和协作解决方案可与 AMP 构建器一起使用，但全局块和热图目前不可用。）

添加小部件时，您会注意到页面的权重增加。 每个 AMP 点击后登录页面都有 75KB 的重量限制，Instapage AMP 验证器可确保您不会超过该限制。 当您达到设计限制的 80% 时，屏幕底部会出现警告，如下所示：

第 3 步：验证页面

如果您继续构建超出 AMP 重量限制，则会再次出现警告窗口以通知您。 它将提示您验证页面以确认：

如果您的页面低于重量限制并通过验证，这些通知将显示在您的屏幕上：

第 4 步：发布

设计好页面并准备好发布后，只需单击“发布”。 如果您仍然超过重量限制，则会出现此警告：

返回您的页面并尝试通过删除内容来缩小页面。 请记住，研究表明，体重的最大贡献者通常是图像。 准备好后，再次点击发布。 显然，如果您再次看到该消息，则需要进一步缩减页面。

如果您没有看到该消息，则您已准备好发布您的页面，在您点击“发布”按钮后，系统会提示您输入您的子域和域。

实时页面在您的仪表板中将如下所示，其名称旁边带有闪电 AMP 标志：

随时单击它以返回到它，您可以在其中进行编辑、运行 A/B 测试、收集报告等。

开始构建符合 AMP 标准的点击后登录页面

不仅仅是速度，它的合规性使 AMP 点击后登录页面如此强大。 通过遵守框架的设计原则，您可以确保第三方可以依靠优化的移动体验来引导流量。

准备好构建快速且合规的 AMP 点击后登录页面了吗？ 在此处获取定制的 AMP 演示。