如何保证您的着陆页符合 AMP 标准
已发表: 2019-01-02快速链接
- 7 AMP 兼容页面的设计原则
- 用户体验最重要
- 只做可以快速完成的事情
- 不要为假设的浏览器设计
- 不要破坏网络
- 优先考虑用户体验,但也要妥协
- 在正确的层上解决问题
- 没有白名单
- 如何检查 AMP 合规性
- 浏览器开发者控制台
- 网络界面
- 浏览器扩展
- 如何在 Instapage 中创建 AMP 页面
- 开始创建 AMP 兼容页面
当加速移动页面 (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 缓存关闭或 API 失败的形式出现。 如果发生任何一种情况,您的内容消费应该只会“优雅地降级”。 如果您的内容使用 AMP 缓存,则在没有它的情况下也应该可以使用。
5.优先考虑改善用户体验的事情——但在需要时妥协
虽然在大多数情况下,更快的页面加载意味着更好的用户体验,但并非总是如此。 而且,AMP-ing 不应限制用户。 有一个平衡,用户体验总是胜出。 根据 AMP 的网站:“只有在缺乏对某些东西的支持才会阻止 AMP 被广泛使用和部署时才会妥协。”
6.在正确的层上解决问题
解决 AMP 的问题不是开发人员最容易实施的问题,而是对最终用户来说最好的问题。 不幸的是,这两者并不总是一致的。 例如,如果某些东西更容易在客户端集成,如果用户将从服务器端集成中受益,就不要简单地实施。 强调用户体验,问题应该在正确的层级解决。
7.没有白名单
该框架不支持白名单。 因此,如果您正在寻找特殊待遇,您不会在任何网站、域或来源的 AMP 中找到它,但有一个例外,创作者说:
当“出于安全或性能原因需要”时。
如何检查 AMP 合规性
您可能认为 AMP 页面的最大优势在于它们的速度。 并非如此,它的创造者说。 使 AMP 如此吸引人的不仅仅是速度,还有它被验证的能力。 这样一来,第三方(例如社交网络)就可以放心地将用户发送到那里,并知道他们将获得快速无缝的点击后登录页面。
要回答“我的网页是否符合 AMP 标准?”这个问题,有四种方法。 谷歌使用其验证器以通过/失败为基础提供了三个。 AMP 验证器将帮助您在发布前发现页面的任何问题。 最后,传递是让他们符合 AMP 的原因,向第三方发出信号,他们可以期望从您的页面获得快速的用户体验。
浏览器开发者控制台
要使用浏览器开发者控制台发现 AMP 页面的问题,请执行以下三个步骤:
- 在网络浏览器中打开 AMP 页面
- 在 URL 末尾添加“#development=1”
- 打开浏览器开发人员控制台以检查验证错误
任何阻止您的页面符合 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 的普通用户,您还会注意到计时器和 HTML 小部件不在工具栏中。 不过,所有其他图标及其功能都可供您使用来构建您的页面:
此外,由于 AMP 限制 CSS 和 JavaScript,因此构建器无法使用这些常用选项。 您会看到以下内容:
调整背景、字体、SEO 以及您在上面看到的所有内容。 自己动手,或使用 Instapage 协作解决方案与您的团队协作。 然后,甚至将您的页面组件保存为 Instablocks™ 以插入到其他页面中。 (注意:虽然 Instablocks 和 Collaboration Solution 可以与 AMP 构建器一起使用,但 Global Blocks 和热图目前还不能。)
当您添加小部件时,您会注意到页面的权重在增加。 每个 AMP 点击后登陆页面都有 75KB 的重量限制,Instapage AMP 验证器确保您不会超过它。 当您达到设计限制的 80% 时,屏幕底部会出现警告,如下所示:
第 3 步:验证页面
如果您继续构建超出 AMP 重量限制,将再次出现一个警告窗口来通知您。 它将提示您验证页面以确认:
如果您的页面低于重量限制并通过验证,这些通知将出现在您的屏幕上:
第 4 步:发布
设计好页面并准备好发布后,只需单击“发布”。 如果您仍然超过体重限制,则会出现此警告:
返回您的页面并尝试通过删除内容来精简它。 请记住,研究表明,影响体重的最大因素通常是图像。 准备就绪后,再次点击发布。 显然,如果您再次看到该消息,则需要进一步缩小页面。
如果您没有看到该消息,则您已准备好发布您的页面,在您点击“发布”按钮后,系统将提示您输入您的子域和域。
实时页面在您的仪表板中将如下所示,其名称旁边带有闪电 AMP 徽标:
随时单击它可返回到它,您可以在其中进行编辑、运行 A/B 测试、收集报告等。
开始构建符合 AMP 标准的点击后登陆页面
不仅仅是速度,合规性让 AMP 点击后登陆页面如此强大。 通过坚持框架的设计原则,您可以确保第三方可以依靠优化的移动体验来引导流量。
准备好构建快速且合规的 AMP 点击后登录页面了吗? 在此处获取定制的 AMP 演示。