AMP 电邮最佳实践

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

速度

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

可用性和可访问性

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

样式

• 请确保您的电子邮件仅使用AMP 电邮支持的 CSS
• 避免在 CSS 和 HTML 的任何位置使用视口单位（vw、vh、vmin 和 vmax）。由于 AMP 电子邮件在 iframe 内呈现，因此电子邮件的视口与浏览器的视口不匹配。
• 不同的浏览器具有不同的默认 CSS 样式。如果需要，请使用一个可以标准化样式的 CSS 库。有关默认样式、样式标准化以及可用库列表的更多信息，请参阅 重新启动、重置和推理。
• 请注意 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 和类名称的长度