电子邮件 AMP 最佳实践

AMP 允许在电子邮件中呈现令人兴奋的全新沉浸式互动内容！设计电子邮件时，请记住以下最佳实践，以确保它们性能良好、跨平台可靠，并能按用户预期的方式工作。

速度

当使用 amp-list 动态提取内容时，请包含一个占位符以保持组件结构的完整性。占位符的布局应尽可能与返回请求数据后的文档相似。这可确保消息大小不会发生变化，也不会显著改变布局。

可用性和可访问性

• 当使用 amp-carousel 时，请确保设置了 controls 属性。这允许智能手机等触摸屏设备上的用户导航轮播。
• 当使用 amp-form 时，请记住并非所有输入类型都受 iOS 支持。有关更多信息，请参阅 Safari HTML 参考中的支持的输入值。
• 并非所有 autocomplete 属性值都受不同的应用程序和浏览器的支持。假设您的用户无法使用自动完成功能，并保持表单简短。

样式

• 确保您的电子邮件仅使用 AMP for Email 支持的 CSS
• 避免在 CSS 和 HTML 中的任何位置使用视口单位 (vw、vh、vmin 和 vmax)。由于 AMP 电子邮件在 iframe 内呈现，因此电子邮件的视口与浏览器的视口不匹配。
• 不同的浏览器具有不同的默认 CSS 样式。如果需要，请使用 CSS 库来规范化样式。有关默认样式、样式规范化以及可用库列表的更多信息，请参阅 Reboot、Resets 和 Reasoning。
• 请注意 CSS 中溢出的边距：由于 AMP 布局限制，它们可能无法呈现。

移动

通过使用 CSS 媒体查询 来识别设备，确保您的消息在所有屏幕尺寸上看起来都不错。应在移动设备上测试消息，以确保布局正确且组件按预期工作。

其他注意事项

使用电子邮件 AMP 时，请记住以下提示和技巧

• 电子邮件 AMP Playground 不会代理 XHR，但某些电子邮件提供商会代理。
• AMP MIME 部分应出现在电子邮件中的 HTML MIME 部分之前，以确保在各个电子邮件客户端上实现最大兼容性。
• amp-list的 src 属性、amp-form的 action-xhr、amp-img的 src 或 <a> 标记的 href 属性不能由 amp-bind 更改。
• 如果用户被带到消息的 HTML 版本，或者如果该用户转发了消息，则您的消息应包含一个静态 HTML 版本。
• 电子邮件 AMP 格式对电子邮件的大小施加了字节限制。通过以下方式防止您的电子邮件因超出大小限制而回退到静态电子邮件：
  • 修剪您的电子邮件并删除不必要的内容
  • 尽量减少电子邮件中的超链接数量，因为 ESP 和分析平台可能会将这些链接的 URL 重写为很长的 URL
  • 消除不必要的 HTML 结构（例如，可以折叠为一个 div 的多个嵌套 div）
  • 尽量减少 事件和操作的 on 属性和 amp-bind 绑定表达式中的空格字符
  • 使用 HTML 和 CSS 压缩器等工具来执行压缩，例如
    • 删除 HTML 和 CSS 中不必要的空格字符（例如，用于使源代码更具可读性的空格和换行符）
    • 删除 HTML 和 CSS 中的注释
    • 删除可选标签
    • 最小化 CSS 选择器和 HTML 中使用的 ID 和类名的长度