前言
在进行 HTML Email Boilerplate 开发时遇到的最常见的问题就是样式渲染和资源引入问题，这些问题的产生往往是各大主流邮件客户端（手机、桌面或是网页版）对样式支持或是资源引入的限制。
目录
- 模板开发
- 工具推荐
- 参考资料
模板开发
首先，简明扼要提炼几个邮件模板开发时的关注点：
1. CSS 元素的有限支持
部分邮件客户端不支持 <style> in <head> 或 <style> in <link>;
2. 外部引入的资源只能是图片，不可以是 stylesheets, fonts 和 vedio 等
3. 通常使用 table 进行页面布局
- doctype
有一部分邮件客户端（ Gmail 和 Hotmail ）会移除 doctype，当然大多数会保留你的 doctype，使用 XHTML1.0 的 doctype 兼容性最好以及出现最少开发者意想之外的情形；
XHTML 1.0 的 doctype 代码如下：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
<!-- origin from XHTML 1.0 -->
- layout
撰写页面的起步通常是通过 HTML 元素进行页面内容布局，但是我们无法随心所欲的使用一些常用的元素，比如 HTML5 的<canvas>，<audio>和<vedio>的兼容性就极差；
HTML5 support for email clients
此外，由于部分客户端对 CSS 的一些布局样式的支持较差，比如
position 和 float 等，导致常用的 float + position的布局方法失效；
CSS support for email clients
因此，HTML Email Boilerplate 常用的通用布局方法是采用 tables
table support for email clients
通过嵌套的
table 可以实现复杂的布局；
<table>
<tr>
<td width="50%"> 33.33% </td>
<td width="25%"> 33.33% </td>
<td width="25%"> 33.33% </td>
</tr>
<tr>
<td colspan="3"> 100% </td>
</tr>
</table>
table-layout-01
笔者一开始使用 table 布局，犯了一个错误，在此分享一番：
<table>
<tr>
<td width="33.33%"> 33.33% </td>
<td width="33.33%"> 33.33% </td>
<td width="33.33%"> 33.33% </td>
</tr>
<tr>
<td width="100%"> 100% </td>
</tr>
</table>
本意是想将第 2 个 tr 的宽度充满一行，结果上面代码导致出现意外的布局。
table-layout-02
因此在为每个 td 的宽度进行百分比赋值时，如果某一行的 td 只有一个时，通常设置 td 的 colspan 属性去实现，colspan="x"的 x 值根据表格某行最多的 td 去确定。
另一种比较统一的设置属性的方式是：
<table>
<tr>
<td colspan="100%"> 50% </td>
</tr>
<tr>
<td colspan="33.33%"> 33.33% </td>
<td colspan="33.33"> 33.33% </td>
<td colspan="34%"> 33.33% </td> <!-- 这里的 colspan 的值需要 hack 一下，才能保持布局一致性 -->
</tr>
<tr>
<td colspan="25%"> 25% </td>
<td colspan="25%"> 25% </td>
<td colspan="25%"> 25% </td>
<td colspan="25%"> 25% </td>
</tr>
<tr>
<td colspan="20%"> 20% </td>
<td colspan="20%"> 20% </td>
<td colspan="20%"> 20% </td>
<td colspan="20%"> 20% </td>
<td colspan="20%"> 20% </td>
</tr>
</table>
table-layout-03
【code link 】
- style
style method injection of email clients
上图显示 Gmail 不支持样式表通过
<head> 和 <link> 的方式引入 HTML，为了保持对 Gmail 的兼容性，因此 HTML Email Boilerplate 的开发通常采用 inline style 的方法。当然，我们可以先将样式
<head> ，然后在通过一些 CSS Inliner 工具，如putsmail PutsMail 直接嵌入
HTML 元素中。
HTML Email Boilerplate 开发主要的注意事项就是以上几点，当然涉及不同浏览器的元素样式处理不一致的问题，我们可以采用第三方写好的 Email-Boilerplate去解决上述问题。
工具推荐
-
查询邮件客户端所支持样式属性的网站
campaignmonitor -
Gmail 的 Email Template 插件
Gmail™ Email Templates -
CSS Inliner
putsmail -
Email Boilerplate
Email Boilerplate
参考资料
XHTML™ 1.0
Say Hello to the HTML Email Boilerplate
What You Should Know About HTML Email
A Guide to CSS Inlining in Emai
网友评论