一、回归表格布局，摒弃现代CSS
现代邮件客户端（如Gmail, Outlook, Apple Mail）的CSS渲染引擎千差万别，尤其Outlook使用Word引擎渲染。因此，必须采用1990年代的网页开发技术。
1. 使用 <table> 进行布局
a) 放弃 <div>：不要使用 <div> 进行主要布局，它们的CSS支持极不稳定。
b) 嵌套表格：使用嵌套的 <table> 来构建整个邮件的结构。最外层是一个宽度为100%的表格，内部再嵌套多个表格来排列不同区块。
c) <tr><td>：它们是构建布局的基石。
2. 使用行内CSS
a) 主要样式写在行内：所有的关键CSS样式（如 width, height, background-color, font-family）都必须写在HTML标签的 style 属性中。
b) <style>标签的有限使用：可以在 <head>中使用 <style> 标签，但要知道它可能被某些客户端（如Gmail）部分或全部剥离。通常只用于媒体查询（响应式设计）或高级客户端的样式重置。
c) 避免使用外部样式表：绝对不要链接外部CSS文件，它们会被邮件客户端删除。
二、设计与内容注意事项
1. 固定宽度
将邮件主体宽度设置在 600px 到 800px 之间。650px是一个安全且常见的宽度，能确保在大部分客户端和屏幕上有良好显示。
2. 图片使用准则
a) 永远使用 alt 属性：因为很多客户端默认不显示图片，清晰的 alt 文字是至关重要的。
b) 明确设置宽度和高度：在 <img> 标签的HTML属性中设置 width 和 height，这能在图片加载前稳定布局。
c) 使用完整路径：图片链接必须使用完整的、绝对的URL（https://...）。
d) 背景图片慎用：Outlook等客户端不支持 background-image。如果需要背景图，请使用嵌套表格的 bgcolor 属性和 <img> 标签结合的方式实现。
e) 图片不是万能的：不要制作“一张大图”的邮件，因为如果图片不显示，邮件内容就完全丢失了。务必图文结合。
3. 字体与颜色
使用网络安全字体：如 Arial, Helvetica, Georgia, Times New Roman, Verdana。并始终提供备用字体栈，最后以 sans-serif 或 serif 结尾。
示例：<td>
颜色使用16进制代码：确保颜色对比度足够，便于阅读。
三、交互与功能限制
1. 禁止使用JavaScript
所有邮件客户端都会屏蔽 <script> 标签，动态效果和交互无法实现。
2. 谨慎使用动画
CSS动画和转换的支持度极低。GIF动画是唯一被广泛支持的动态形式，但需注意文件大小，且Outlook 2013及之后版本默认不播放动图。
3. 链接的注意事项
确保所有链接都是完整的绝对URL（https://...）。
为链接设置明确的颜色和下划线，让用户知道它是可点击的。
三、测试与送达率
1. 全面的跨客户端测试
在发送给用户之前，必须在不同设备和客户端上进行测试。可以使用 Litmus, Email on Acid 等专业服务，或者手动在Gmail, Outlook, Apple Mail, 手机App等主流客户端中预览。检查图片加载、布局错乱、样式丢失等问题。
2. 移动端适配（响应式设计）
使用媒体查询为移动端优化样式。虽然部分老旧客户端不支持，但对主流移动端邮件App（如iPhone, Android）有效。
一个简单的策略是使用单列布局，它本身就具备良好的响应性。
最最重要的是——简单、坚固和兼容性远比花哨的设计更重要。
