AMP for Email 最佳实践

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 库。有关默认样式、样式规范化和可用库列表的更多信息，请参阅 重新启动、重置和推理。
• 请注意 CSS 中溢出的边距：由于 AMP 布局限制，它们可能不会被呈现。

移动

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

其他注意事项

在使用 AMP for Email 时，请记住以下技巧和提示

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