() translation by (you can also view the original English article)
理解任何过程的最好方式就是从头自己时间一遍。 今天，我们来实践 Email 设计，从头建立一个 HTML Email 模板。
开始
在开始之前，值得提及的是本文引用的资源来源。
- 可爱的2D 图标 by Pierre Borodin on Dribbble
- 使用的字体是 Oli Can, Source Sans Pro 和 Mission Script
- 社交图标 by Metrize Icons
现在，正如我们在之前教程中讨论过的，你可以从一个 XHTML doctype 开始你的HTML Email 文档。
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
<title>Demystifying Email Design</title> |
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
7 |
</head>
|
8 |
</html>
|
与排序，我们可以开始构建结构的其余部分。
创建 Body 和主表格
首先，从<body>标签开始，我们将为 email 添加一个总体的结构， 把 body 标签的内外边距设置为零，来去掉所有不必要的空格。
添加一个宽度为100%的表格。 对于我们的email来说，tabl标签将会作为body标签，因为body标签的款式不被完全支持。 如果你想给email的body添加背景颜色，你需要把它应用在这个大表格上。
设置你的单元格padding（内边距）和单元格spacing（间距）到0来避免任何不需要的空白区域出现在表格中。
把所有表格设置为border="1"，这样方便看到它的骨架。 在最后将用简单的查找替换的方式去掉它。
1 |
<body style="margin: 0; padding: 0;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Hello! |
6 |
</td>
|
7 |
</tr>
|
8 |
</table>
|
9 |
</body>
|
如果存在标签属性，直接写入HTML，不要用CSS
现在在容器表格中添加一个宽度为600px的居中表格。 如果你希望你的邮件可以舒服的显示在大多数分辨率下的桌面邮件程序或者网页版邮件程序，600像素就是一个安全的最大宽度。
在HTML中用width属性设置宽度，不要用CSS。 HTML邮件开发的黄金规则就是：如果有属性，就用HTML不用CSS。
然后用这个表格替换”Hello!"：
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Hello! |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
我们同时添加了一个行内样式属性，将border-collapse设定为collapse。 如果我们不这么做，新一点版本的Outlook会在我们的表单和边框之间添加一个小的白色区域。
创建结构和页眉
在我们的设计里，我们可以看到邮件是分为三个逻辑区域的，所以我们需要逐行来创建他们。
让我们复制我们已经做好的表单中的行来制作出总共3个区域。 我已经将其中的文字进行了改变，这样我们就可以轻易的分辨出我们操作的是第几行。
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td>
|
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
现在，我们需要根据设计需要来为他们添加颜色， 由于bgcolor是一个有效地HTML属性标签，我们将用它来设置背景颜色，而不是CSS。 永远记住使用全部六位数的16进制颜色代码，因为如果只是3位的简写有时候会不工作。
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td bgcolor="#70bbd9"> |
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td bgcolor="#ffffff"> |
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td bgcolor="#ee4c50"> |
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
好了，下一步我们要着重关注一下Row 1（第一行）， 我们希望修改他的padding来插入我们的图片。
使用Padding
当在邮件中使用padding的时候，你必须总是特别的交代每一个方向的值（上、右、下、左），否则你有可能会获得不想要的结果。 我发现你任然可以使用简写，例如：padding: 10px 10px 8px 5px;，但是如果你发现它有任何的问题，你可能需要使用最长的一种方式把完整的表达式写出来，例如：padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;。
如果你的padding出现了更大的问题（例如你的邮件发送平台完全的剔除了你的CSS），那就完全不要使用它就好了， 作为替代，简单的使用一个空白的单元格来创建空白区域就好。 使用创建空白的GIF是没有必要的，你只需要确保你添加了style="line-height: 0; font-size: 0;"到你的单元格，并且在其内部放置一个 并给它一个明确的高度或者宽度即可。 这里有个例子：
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
同时需要注意，将padding用在td标签上但不要用在p或者div上会更安全， 它们有时候会表现的更为不可预计。
这样，我们就使用了一些内嵌的CSS来添加padding到单元格里， 接下来我们要插入我们的图片，添加alt文字以及添加style="display:block;"，这是一个比较常用的修复一些邮件客户端在你图片下方添加空白的方法。 添加一个align="center”到我们的td标签来居中显示图片。 我们同时需要添加alt标签，它是在我们邮件最开始被读取的时候的一个很重要的元素，在大多数情况下，在无法读取图片的时候会显示。
注意：如果你页眉的内容对你的整体邮件非常的重要，那么就不要仅仅使用图片作为页眉。 记住，在大多数客户端图片是默认被阻挡的，所以如果你邮件的外观是非常决定性的，那么永远不要使用一个图片来作为页眉。 当然了，在本样例中，我的页眉确实是一个多余的部分。
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
创建正文部分
首先，我们需要添加一些padding到单元格的中间，这样在其内部的表单就有一圈白色的空间，正如我们所设计的那样。
现在，我们要添加一个新的三行的表单来容纳我们的正文内容——一个大标题、一段引导性的文字、以及一个段落来放我们的两个列的内容。 我们会设置这个表单的宽度为100%而不是使用像素化的值，因为如果你想得到一个完全自适应的邮件这会帮助我们更容易实现。 如果你在所有的元素上一直都使用像素化的宽度，那么你有可能在最后会需要创建很多的media query来覆盖逐个的值。 反之，如果你将子表单的宽度设置为百分比，那么当你调整其父对象元素的宽度时，所有的值都会相应的被继承。
1 |
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Row 1 |
6 |
</td>
|
7 |
</tr>
|
8 |
<tr>
|
9 |
<td>
|
10 |
Row 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
<tr>
|
14 |
<td>
|
15 |
Row 3 |
16 |
</td>
|
17 |
</tr>
|
18 |
</table>
|
19 |
</td>
|
现在，我们要添加我们的正文，然后添加一些padding到单元格的中间。
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Lorem ipsum dolor sit amet! |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td style="padding: 20px 0 30px 0;"> |
9 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
接下来，我们将要添加我们的两个列的内容到Row 3（第三行）。 因为我们希望在这两个单元格之间有一个‘margin’，但是margin又不是被支持的，所以我们创建了一个三行的表单并且保持中间一行是空白的。
如果像我这样也特别喜欢使用百分比，当你有一个内容需要使用特定的尺寸，那么将它转换为一个特定的百分比会变的比较棘手（例如，这个列需要是48.1%的宽度，看起来就很茫然）。 所以因为这个原因，由于我们的两个图片都是260像素宽的，我们就创建两个260像素宽的列来与之配合，同时在中间我们会有一个20像素的空白单元格作为margin。 （这样总共是540像素，我们的表单全宽是600像素，外加每一侧边30像素的padding） 确保在你的margin单元格里面设置文字大小（font-size）到0，行高（line-height）为0，并且添加一个不换行空格字符 。
我们同时为两个单元格设置valign到”top“，这样他们在纵向上就会向上对齐到顶部，即使一个列会比另外一列包含更多文字。 默认的纵向对齐设定是"middle"。
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
Column 1 |
5 |
</td>
|
6 |
<td style="font-size: 0; line-height: 0;" width="20"> |
7 |
|
8 |
</td>
|
9 |
<td width="260" valign="top"> |
10 |
Column 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
</table>
|
现在，让我们添加我们的图片和内容到这些列里面， 由于我们需要很多行，我们需要将他们安放到另外一个表单里面，因为我们不能使用任何的colspan或者rowspan标签。 我们同时需要在每个列的图片和文字之间添加一些padding。
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
5 |
<tr>
|
6 |
<td>
|
7 |
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td style="padding: 25px 0 0 0;"> |
12 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
</td>
|
17 |
<td style="font-size: 0; line-height: 0;" width="20"> |
18 |
|
19 |
</td>
|
20 |
<td width="260" valign="top"> |
21 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
22 |
<tr>
|
23 |
<td>
|
24 |
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> |
25 |
</td>
|
26 |
</tr>
|
27 |
<tr>
|
28 |
<td style="padding: 25px 0 0 0;"> |
29 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
30 |
</td>
|
31 |
</tr>
|
32 |
</table>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
在这里，我使用HTML将图片的宽度设置为列宽度的100%， 这样，再次的，如果我们将邮件制作为自适应的版本，我们仅仅需要使用media query来改变其父对象的宽度即可。 我们需要使用像素值来覆盖其高度属性，因为使用style="height: auto"并不能在所有的客户端工作（咳咳，Outlook）。 所以我们就要将其设置为像素， 这就说明我们需要使用media query设定height: auto!important到那些图片来覆盖它们的像素值，但是我们可以使用一个类就完成它。 由于我们使用了百分比的宽度，我们就不需要额外的覆盖它了。 越少的覆盖，就越好。
页脚
现在，我们要为我们的页脚添加一些padding。
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
在单元格的内部，我们将要嵌入另外一个表单来创建我们的两个列。
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Column 1 |
5 |
</td>
|
6 |
<td>
|
7 |
Column 2 |
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
我们需要创建另外一个更小的表单来囊括我们的社交媒体图标们， 首先将它的父对象单元格设置为align="right"， 然后确保你设置border="0"到这个图片链接上（来避免产生蓝色的链接边框）并且别忘了添加display:block。
1 |
<td align="right"> |
2 |
<table border="0" cellpadding="0" cellspacing="0"> |
3 |
<tr>
|
4 |
<td>
|
5 |
<a href="http://www.twitter.com/"> |
6 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
7 |
</a>
|
8 |
</td>
|
9 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
10 |
<td>
|
11 |
<a href="http://www.twitter.com/"> |
12 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
13 |
</a>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
</td>
|
现在，我们添加了文字到单元格里，即便我们还留出了很多的空白区域，但为了确保安全，我们还添加了宽度到我们的单元格。 我们需要设置这个单元格的宽度为75%然后另外一个是25%。
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
这样就完成啦！ 我们的布局就全部结束了。
验证
让我们用W3C验证器执行这个代码来确保没有任何坏的或者不完整的代码。 如果你一直是完全跟着我做的，它应该会说是通过的。
下一步，我们将要使用Litmus运行一个测试来确保我们邮件的结构是完美的。 这里是我做的测试的总结：
为文字添加样式
我们的第一行是页眉， 我们将使用一个<b>标签来创建粗体的文字，因为你可能已经知道了，如果HTML标签是可以用的，我们将使用它来替代CSS。
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
我们同时需要添加这个内嵌的样式到其他的所有单元格文字：
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
下一步，我们需要为页脚添加文字样式，并且我们需要整理一下退订的链接。 同时，退订的链接文字将使用CSS以及HTML的<font>标签。 这个双保险是最好的一种方式来确保你的链接永远都不会显示成默认的蓝色。
1 |
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly |
4 |
</td>
|
好了，这样就搞定了！ 所有的元素都准备完毕了， 现在是时候把所有的边框都关闭并且看看漂亮的效果了。 使用替换命令扫面全文，有border="1"的地方全部替换为border="0"。
在这里，可能你会发现中间空白的区域有一点飘，所以我们在第一个600像素的表单添加下面一行文字：
1 |
style="border: 1px solid #cccccc;" |
现在就看起来不是那么飘了。 作为最后的收尾，我将要添加一个30像素的padding到第一个单元格的下面，来防止我们邮件在某一些客户端里突然地停止在底部（例如Apple Mail），并且添加10像素的padding到顶部，这样我们的蓝色页眉就有一点可以呼吸的空间了。
1 |
<td style="padding: 20px 0 30px 0;"> |
真的搞定了！ 你已经完全准备好来做最后的测试了。
这就是全部的内容啦！
在我们说终于搞定了之前，如果你使用了任何的注释，你需要将它们都去除， 有一些邮件客户端会卡在注释的位置，所以很明智的选择就是从文件中去除这些不必要的代码。
现在，这是一个好时机来做我们最后的测试，然后你的HTML就准备好被发送了！
为了让你将你学到的知识继续升华，你可以看看下面几个教程：
