邮件HTML开发
当前团队内做用户增长和转化率的提升会涉及到邮件开发，未来肯定还会有很多这方面的需求。之前团队几乎没有邮件开发的经验，无论是UI团队还是我们研发团队对这方面了解的不多，所以在前次需求开发过程中遇到了很多问题，影响了工作进度和团队之间的协作体验，更重要的是会造成用户层的负面影响。
内容多不等于有价值，这里整理的资料更像是 checkList。
技术背景
和 Web 开发不同，邮件没有标准！ 
以上统计来自caniemail，只包含当前国际主流邮件客户端
可以这么说，有多少种邮件客户端就有多少种标准，所以如果你在某一个邮件客户端中遇到了怪异表现，不妨在 这里 搜着看有没有解决方案。
开发邮件最大的障碍就是你以开发"正常的Web"的做法来开发邮件。大多数的邮件客户端，会过滤 HTML标签、非内联CSS、绝大多数比较新的CSS属性以及全部的JS，从而让邮件面目全非。
在这里查询某个技术能否用在邮件中：www.caniemail.com/
开发方式
更传统的方式
有新邮件需求统一以下面的 html 为基础模版开发。
github.com/leemunroe/r... 或者 Base Template
如果选择传统的开发方式，那么建议浏览下面的技术限制。
更现代的方式
优点：
框架有提供技术兜底、渐进增强的体验和更为现代的构建方式。
使用成本：
- Tailwind CSS
- Maizzle 这个框架集成的 POST HTML Templates 和 Component。顺带说一下，目前组件还比较少，官方说后续会提供组件库。
如果选择这种开发方式，下面技术限制可以只做了解，解决方案框架都有集成。
方式对比
before
jsx
<table style="width: 100%;">
<tr>
<td style="padding: 24px 0; background-color: #e5e7eb;">
<h1 style="margin: 0; font-size: 36px; font-family: -apple-system, 'Segoe UI', sans-serif; color: #000000;">
Some title
</h1>
<p style="margin: 0; font-size: 16px; line-height: 24px; color: #374151;">
Content here...
</p>
</td>
</tr>
</table>after
jsx
<table class="w-full">
<tr>
<td class="py-6 px-0 bg-gray-200">
<h1 class="m-0 text-4xl font-sans text-black">
Some title
</h1>
<p class="m-0 text-base leading-6 text-gray-700">
Content here...
</p>
</td>
</tr>
</table>技术限制
布局和样式
- 使用table表格来布局
- 不要写
<style>标签，需要样式就写内联的CSS。尤其是在 Outlook 不支持一个元素有多个类名，例如：<p class="red font"> - 不要使用外部资源，link标签在多数客户端会被过滤
- 使用完整的十六进制颜色
#ff6600而不是#f60 - 不要依靠h1、h2，p等标签的默认样式来作为实际效果，因为这些标签在不同客户端上表现不同
- outlook 只支持简写css属性，padding-top: 10px; ⇒ padding: 10px 0 0
- class类名，带有转义字符的兼容性比较低，例如：
w-1/2或sm:block
jsx
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="width: 100%;" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; width: auto;">
<tr>
<td style="background-color: #ee5191; border-radius: 5px; text-align: center;" bgcolor="#ee5191" align="center">
<a href="https://example.com" style="display: inline-block; color: #ffffff; background-color: #ee5191; border: solid 1px #ee5191; border-radius: 5px; cursor: pointer; text-decoration: none; font-family: arial;font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize;">Take action now</a> </td>
</tr>
</table>
</td>
</tr>
</table>图片、GIF、视频和媒体
某些邮件客户端默认会阻止 img 下载，用户手动点击查看才会下载，所以必须要提供有意义的 alt 。另外 outlook 不支持 background-image 属性。
gif、webp、svg、base64、avif这些格式兼容性都比较低。
video、audio、iframe、canvas标签大多数客户端都不支持，参见这里。
邮件字体
除了系统字体，邮件里可以使用 网络安全字体 但兼容性不高，Outlook 2007-2019 不支持自定义字体，参见 caniemail fontface。
全面的邮件字体资料参考：www.litmus.com/blog/the-ul...
remove unused code
chrome自带有unused标记功能，但是也仅仅是标记。
用这个工具可以根据预设自动移除邮件里未使用的代码以减小代码体积。
为什么要强调代码体积，理论上更小的资源体积会减少用户等待加载的时间，有利于提高转化率，但这只是其中重要的一方面。还有一个重要原因是 **Gmail会处理体积超过 102KB 的邮件，参见这个 issues。**超过体积限制部分的内容会被过滤掉（这个体积计算 HTML 文件的大小，不包含远程资源），所以其实你可以关注到平常我们收到的邮件都是比较简洁的。
邮件链接
CTA Link: www.goodemailcode.com/email-code/...
响应式
页面宽度区间在450到600px，如果没有响应式需求直接450px。
媒体查询在多数客户端也是无法使用的，有响应式需求参考这篇
深色模式
如果有需求的话，参考这篇。
可访问性测试
- 邮件可访问性测试：www.accessible-email.org/
- web可访问性测试：wave.webaim.org/
屏幕阅读器（无障碍)
如果有使用屏幕阅读器等辅助技术来阅读电子邮件的需求，参考：