本指南概述了 Omnisend 中自定义 HTML 电子邮件的编码和设计标准。遵循这些最佳实践，以确保您的电子邮件（Email）在 Gmail、Outlook、Apple Mail 和移动设备上正确呈现。
💡 重要资源：
要将自定义 HTML 添加到您的邮件中： 请参阅添加和配置自定义 HTML 项目
导入完整的 HTML 模板： 请参阅导入自定义 HTML 电子邮件（Email）模板
如果您是 HTML 新手，请查看W3Schools HTML 基础知识 首先。
电子邮件（Email） HTML 编码规范
电子邮件（Email）客户端（尤其是 Outlook 2007–2010）使用有限的渲染引擎。请遵循这些规则以确保兼容性。
布局和表格
使用
<table>进行所有布局。嵌套表格以创建复杂结构。通过元素属性设置尺寸 (
cellpadding,对齐，,width) 而不是 CSS。这会强制盒模型结构。避免 ``、`` 和 CSS positioning(
float,位置，清晰)。电子邮件（Email）客户端会删除或忽略这些。
CSS 和样式
仅使用 inline CSS。 Omnisend 模板会自动包含 inline CSS。
保持 CSS 简单:
避免使用缩写 (
#000→ 使用#000000)避免复合声明 (
font:#000 12px Arial→ 拆分为单独的属性)避免使用复杂的选择器（后代、子元素、伪元素）
图片、按钮和链接
为所有图片添加替代文本。大多数电子邮件客户端默认阻止图片。替代文本有助于传达您的信息，即使图片无法加载。
使用防弹按钮（使用 HTML/CSS 编码），而不是图片按钮。电子邮件（Email）客户端可能会阻止图片，导致基于图片的按钮不可见。
将图片托管到可靠的服务器上，使用绝对 URL（
https://yourserver.com/image.jpg). 避免相对路径。
移动与互动
让电子邮件（Email）实现移动端友好。使用媒体查询在小屏幕上增大文本大小，并确保点击目标至少为 46x46 像素。
避免 Flash 和 JavaScript。如果您需要动态效果，请使用 animated GIFs。
测试
务必在发送前测试：
使用 Omnisend 的 Preview feature 检查桌面和移动视图。
发送测试电子邮件（Email）给自己，以便在 Gmail、Outlook 和 Apple Mail 上进行测试。
考虑 电子邮件（Email）测试服务，例如 Litmus，用于跨客户端验证。
注意：电子邮件（Email）HTML 不同于网页 HTML；许多现代 CSS 属性在 Outlook 等电子邮件客户端中不受支持。
电子邮件（Email）设计最佳实践
请遵循这些设计指南，以提高送达率（Deliverability）和用户体验。
布局与宽度
最大宽度：600–800px（建议600px）。这可确保电子邮件（Email）在预览窗格中正确显示。
使用简单、基于网格的布局。避免使用需要浮动或绝对定位的复杂元素。
图片和文本
假设图片将被阻止。设计即使图片无法加载也能传达您的信息的电子邮件（Email）。
避免纯图片电子邮件（Email）。较低的文本与图片比例会触发垃圾邮件过滤器。切片图片在不同电子邮件（Email）客户端中显示效果也不一致。
字体
使用适用于电子邮件（Email）的字体 (Arial, Helvetica, Georgia, Times New Roman) 或广泛采用的自定义字体。请参阅电子邮件（Email）安全字体指南
移动设计
检查在小屏幕上的可读性。 您能否在手机上以一臂之遥的距离阅读您的电子邮件（Email）？
优化图片尺寸以避免加载缓慢。
让链接易于点击。确保按钮和链接易于点击。
💡 提示：超过 50% 的电子邮件（Email）在移动设备上打开。发送前，在移动设备上预览您的电子邮件（Email）并向您的手机发送测试营销活动（Campaign）。检查文本大小、触摸目标大小（按钮/链接）和图片加载时间。
常见问题
为什么您的电子邮件（Email）在 Outlook 中显示异常，但在 Gmail 中却正常？
Outlook 使用 Microsoft Word 渲染引擎，与 Gmail 基于浏览器的引擎相比，该引擎对 HTML/CSS 的支持非常有限。为确保兼容性：
保持电子邮件（Email）宽度为 600px（最大 650px）。
使用简单的基于表格的布局（单列）。
避免背景图片、border-radius、box-shadow 和 flexbox。
仅使用内联 CSS（不含
<style>块）。在发送前，请务必在真实的 Outlook 收件箱中进行测试。
我可以控制我的电子邮件（Email）在暗黑模式下的显示效果吗？
否 深色模式由您的订阅者的电子邮件（Email）客户端和设备设置（Gmail、Apple Mail、Outlook 等）控制，而非发件人。电子邮件（Email）客户端决定如何应用颜色反转。了解如何预览和优化电子邮件（Email）以适应深色模式
💡 最佳实践:
使用 Omnisend 的暗黑模式预览 在发送前 (预览 → 切换 "Preview in dark mode")。
为浅色和深色主题设计 – 在完全反转和部分反转模式下测试。
优化徽标和图片：添加彩色背景或浅色轮廓，以防止元素消失。
保持文本简洁：白底黑字反转效果清晰。
如需进一步帮助，请通过应用内聊天或发送电子邮件至 [email protected] 联系我们屡获殊荣的支持团队。