开始制作HTML Email

发布于大漠

10 年前

本文由大漠根据Tessa Thornton的《Getting Started with HTML Emails》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails，以及作者相关信息

——作者：Tessa Thornton

——译者：大漠

向用户发布最新的更新、业务或产品，HTML电子邮件是一个最好的方式，但他们有点棘手。电子邮件客户端对CSS的支持不一致。因此我们必须借助于老的技术，如使用表格和内联CSS。今天，我将不可的大家一起创建一个简单的HTML电子邮件。

demo download

HTML Mail介绍

作为Web开发人员，编写HTML电子邮件是一件非常具有挑战性的任务，我们也必须得处理。幸运的是，当我的第一个客户要求我设计和编写一个HTML电子邮件的通知，他耐心的陪我渡过整个编写过程，让我明白了编码HTML电子邮件的一切。你可能不会有我那么幸运，所以本教程可以帮你做好一切的准备。

电子邮件客户端的问题

你认为IE很痛苦。等你见到Outlook2007，你就不这么认为了。因为电子邮件客户端渲染HTML/CSS有巨大差异，在许多流行的电子邮件客户端使用现代编码技术让布局相当的混乱。电子邮件客户端和浏览器渲染HTML不一样——甚至在许多情况下不一样。浮动、背景图像，甚至是外距不再是你编写代码的一些词汇。所以你应该怎么编码呢？

解决文案：代码像1997年的一样

这是正确的。table、cellpadding、cellspacing、colspan，所有这些你以为你可以使用。格式是电子邮件唯一布局的方法，所以你暂时要忘记你喜欢的CSS方式和你想要的语义化，这样只会让表格更混乱。

步骤一：电子邮件设计

保持简单

当设计一个HTML电子邮件时，请记住保持简单。我们今天使用的设计是一个多列布局，主要是出于演示的目的，但电子邮件布局的时候，编码的时候考虑坚持两列布局，这样能为您省去很多麻烦的事情。

减少图像的使用

记住你的设计不能太花哨，因为Outlook不支持背景图像。事实上，根据客户的需求，你可能想跳过Photoshop的过程，强迫自己完成一个实用型的电子邮件设计。也就是说，在这里我们将使用Photoshop，这样你就可以更好的理解我们要做的事情。

如果邮件是清晰的或者不用没有什么影响的，你可以使用背景图片来装饰。例如，我们要给邮件头部添加一个渐变的效果，如果它不会显示，但这也没什么大不了。

窄屏最好

因为电子邮件客户端预览窗口通常只是一小部分屏幕宽度，你最好上你的电子邮件的宽度设计在大约600px。没有人喜欢水平滚动条。

保持一致

记住，我们使用固定的元素属性cellpadding和cellspacing设置单元格的边距和单元格的间距。这样保持元素之间的间距一致性是正确的与谨慎的。

我们的设计

这个设计类似于去年夏天我的客户的一个电子邮件通知的设计，他非常的简单。这虽然不是很好看，但这并不很重要。他非常简单一致，有许多布局选项，这样你就可以看到他们是不同的。

开始制作HTML Email

步骤二：规划我们的代码

以我的经验来看，HTML电子邮件代码变得非常的复杂，非常的快速。重要的是要有一个可行性计划。这里是我们的计划(我们会回来的，如果你没有遵循，不用担心)。

首先，我们先要设置一个宽度为100%的灰色背景，这是我们的表格容器。

接下来，请注意表容器里有三个单独的表格：一个在顶部，放置“浏览器中查看”的链接，中间的表格放置主要内容和一个度部的表格，用来放置“邮件退订”链接。

开始制作HTML Email

最后，在主表格中，每个水平区域的内容都放置在表格的行或单元格里。也就是说，表格的每个单元格都包含了每一个内容。

开始制作HTML Email

`cellpadding`和`cellspacing`

我们将使用HTML的cellpadding和cellspacing属性来替代CSS的margin和padding属性。

cellpadding和CSS的padding几乎是一样的——用来设置内容周边的空白空间。cellspacing是用来设置表格单元格与单元格之间的间距。

#main表格设置了15px的cellspacing，这样我们的主内容周围就有15px的空白间距，每个水平组之间有15px间距。cellpadding和cellspacing仅仅适用于父表格，而不适合每一个单元格。如果我们不希望有单元格边距或单元格间距，我们只需要给每个表格指定他们的值为0。

步骤三：开始编码

现在我们可以一段一段的为我们的电子邮件开始编码。与最佳实践相反，我们将要单独的给每个结构添加样式。我们将从布局开始，包括所有的间距和内距，背景颜色，之后我们要写排版和其他的CSS样式。

设置

设置电子邮件很简单：只包括了html、head和body标记。让我们在表容器中放置我们之前讨论的三个主要表格。

对于DOCTYPE布言，有几种不同的方法，在这文章中做过详细的介绍。在我们的这个例子中，我决定不使用任何文档类型，因为我们不需要任何DOCTYPE声明的任何东西。在大多数情况下，电子邮件客户端会删除我们自定义的DOCTYPE类型。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Nettuts Email Newsletter</title>
    </head>
    <body>
        <table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4">
            <tr>
                <td>
                    <table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- top message -->

                    <table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">
</table><!-- main -->

                    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- bottom message -->
                </td>
            </tr>
        </table><!-- wrapper -->
    </body>
</html>

注意两个信息的表格设置了cellpadding值为20px。这将设置了主内容中段落的空间。主表格设置了15px的cellspacing。这是为了在垂直方向有一个间距。因为每个部分都放置在表格的单元格里，他们之间设置了一个15px的间距。

还要注意，表格都设置了align="center"和我们都定义了表格的宽度。在HTML电子邮件中，一般最好不要给表容器定义宽度。你最好为每个单元格定义宽度，但在这种情况下，我们将打破这个规则，因为我们担心表格有cellspacing和cellpadding。

一般而言，指定表格单元格宽度要比指定表格自身宽度要好。

信息表格

这些非常简单：段落在单元格中居中显示。

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
    <tr>
        <td align="center">
            <p>Trouble viewing this email? <a href="#">View in Browser</a></p>
        </td>
    </tr>
</table><!-- top message -->

底部的信息表格和这个完全一样。

头部

头部非常简单，有三行，每行一列。因为我们表格有蓝色背景，我们需要给每个表格的单元格设置一些内距，让文本不挨着边框。

<tr>
    <td>
        <table id="header" cellpadding="10" cellspacing="0" align="center">
            <tr>
                <td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
            </tr>
            <tr>
                <td width="570" bgcolor="8fb3e9"><h2>News and Events</h2></td>
            </tr>
            <tr>
                <td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
            </tr>
        </table><!-- header -->
    </td>
</tr><!-- header -->

记得要设置每个单元格的宽度，在本例中是570px（600px - 两边单元格各15px）。我们还设置了align属性为right，让日期向右对齐。现在，我们还没有添加背景图片，不过我们稍后会这么做。同时我们给单元格设置浅蓝色背景。

请注意，我们使用bgcolor来替找style="background:"。这是因为在电子邮件客户端中HTML属性要比CSS样式更好。

开始制作HTML Email

到目前为止，这样看起来很糟糕，但布局正是我们想要的。

内容区域——两列

我们的第一部分内容是图像居左，图像右边有两个标题。这里不使用常用的CSS浮动，我们在这里使用一个具有三个单元格的表格：

第一个放置图像
第二个用来制作图像与标题之间的间距
最后一个放置标题

开始制作HTML Email

图像有边框效果，我们将在单元格内嵌套一个表格，前且设置表格的cellpadding="5"，同时给他设置一个灰色的背景色。cellpadding增加了元素的宽度，所以我们在定义单元格宽度的时候需要减云10px。

<tr>
    <td></td>
</tr>
<tr>
    <td>
        <table id="content-1" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="170" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="375" valign="top" colspan="3">
                    <h3>All New Site Design</h3>
                    <h4>It's 150% Better and 40% More Efficient!</h4>
                </td>
            </tr>
        </table><!-- content 1 -->
    </td>
</tr><!-- content 1 -->

注意：

我们添加一个空行。因为我们内容有15px的间距，我们使用一个空的单元格来制作这个间距。在我的测试中，这个空格没有问题，但你最好在单元格中添加一个空白的符号 
我们也给单元格设置了align属性值为top，让单元格内容垂址方各，顶端对齐。这个很重要，因为单元格垂直方向的align默认值为middle，这样将会导致一些奇怪的结果。
我们使用的虚拟图像来自于dummyimage.com,因为电子邮件客户只支持服务器上的图像，这样做更容易让图片显示。看看这个网站，它解释了如何让你通过URL地址来指定你需要的图像。

内容区域——一列

这一部分真的很简单：单列的表格里面放了一个段落。不要忘记了设置单元格的宽度和设置表中心对齐。

<tr>
    <td>
        <table id="content-2" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="570"><p>Lorem ipsum dol...</p></td>
            </tr>
        </table><!-- content-2 -->
    </td>
</tr><!-- content-2 -->

分割器

添加垂直空间的单元格间距(超过15px)时，我们必须使用一个图像来模拟制作间隔。就像90年代一样！我们可以使用一个空白的gif，但目前只需要使用一个虚拟的图像，你可以看到一开始是灰色的，但后来我们把设置成白色的。

<tr>
    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>

效果如下图所示：

开始制作HTML Email

内容区域——三列

对于三列内容区域，我们使用一个具有五个单元格的表格，每一个单元格为一列，两列之间的单元格用来制作间距。

开始制作HTML Email

<tr>
    <td>
        <table id="content-3" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table><!-- content-3 -->
    </td>
</tr><!-- content-3 -->

很简单，使用前面介绍的方法一样，实现边框效果。别忘记了给单元格添加align="top"。

三个文本列制作是相同的。

<tr>
    <td>
        <table id="content-4" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="180" valign="top">
                    <h5>Exciting New Products!</h5>
                    <p> Ut enim ad minim veniam, ...</p>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <h5>A Newsletter Every Month</h5>
                    <p>Excepteur sint occaecat ...</p>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <h5>New and Improved Forum</h5>
                    <p>Lorem ipsum dolor sit ...</p>
                </td>
            </tr>
        </table><!-- content-4 -->
    </td>
</tr><!-- content-4 -->

使用前面介绍的方法，在底部添加另一个分隔器。

开始制作HTML Email

其他

一切只是重复我们已经做好的两列内容和一列内容。

<tr>
    <td>
        <table id="content-5" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="267" valign="top">
                    <table cellpadding="5" cellspacing="0" bgcolor="d0d0d0">
                        <tr>
                            <td>
                            <img src="http://dummyimage.com/267x200/e9e9e9/fff" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="278" valign="top">
                    <h4>This is a heading</h4>
                    <p>Lorem ipsum dolor sit...</p>
                </td>
            </tr>
        </table><!-- content-5 -->
    </td>
</tr><!-- content-5 -->
<tr>
    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>
<tr>
    <td>
        <table id="content-6" cellpadding="0" cellspacing="0" align="center">
            <tr>
                </td>
                    <p align="center">Lorem ipsum dolor si... </p>
                    <p align="center"><a href="#">CALL TO ACTION</a></p>
                </td>
            </tr>       
        </table>
    </td>
</tr>

主内容的布局到此就完成：

开始制作HTML Email

图片的使用

与常规的Web页面不同，你不能把图片都放在一个文件夹中，然后使用相对路径链接这些图片。所有的路径必须是绝对的。当我开发一个电子邮件时，我通常把图片放在一个子域下或Amazon S3。当我准备发送邮件到电子邮件客户端时，我将所有的图片放到网站的子域名下。

所有图片路径必须是绝对路径。

步骤四：美化电子邮件

我们不能将外部的样式表嵌入到电子邮件中，因为有些电子邮件客户端会删除整个<head>中的标签，或者忽略<style>标签。我们要使用内联样式是一件痛苦的事情。幸运的是，有相关服务可以帮助我们将嵌入的CSS变成内联样式。我使用的是一个名为Premailer网站，你可以直接把代码粘贴到里面，它会将样式嵌入到行内中。

在本教程中，我们先把要嵌入的CSS写在<style>标签内，然后我们将使用Premailer将样式转换到行内。

Premailer将需要的CSS嵌入到行内。

重置基本样式

我们不会在你喜欢的页面中强硬的使用*选择器来重置样式。因为使用默认的值会让效果更佳一致。唯一的就是我们需要重置元素（如我们的标题和段落）的margin和padding，让元素周围空间一致(如cellpadding/cellspacing)。

您还将注意到表容器周边有一个空白的间距，这是body元素默认的样式。

<style type="text/css">
    body, #header h1, #header h2, p {margin: 0; padding: 0;}
</style>

排版

对于电子邮件的排版没有什么很特别，因为它和Web页面的文字排版几乎是一样的。不要使用简写的声明(如，font)，因为在不同的电子邮件客户端会产生不一致的结果。

#top-message p, 
#bottom-message p {
    color: #3f4042; 
    font-size: 12px; 
    font-family: Arial, Helvetica, sans-serif; 
}
#header h1 {
    color: #ffffff; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    font-size: 24px; 
}
#header h2 {
    color: #ffffff; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px; 
}
#header p {
    color: #ffffff; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    font-size: 12px;  
}
h3 {
    font-size: 28px; 
    color: #444444; 
    font-family: Arial, Helvetica, sans-serif; 
}
h4 {
    font-size: 22px; 
    color: #4A72AF; 
    font-family: Arial, Helvetica, sans-serif; 
}
h5 {
    font-size: 18px; 
    color: #444444; 
    font-family: Arial, Helvetica, sans-serif; 
}
p {
    font-size: 12px; 
    color: #444444; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.8em 0;
}

现在这样看起来，效果更好：

开始制作HTML Email

背景图片

背景图像在一些电子邮件客户端不能正常显示，如果你需要使用背景图片，最好提供一个备选颜色，把他们应用到一个单元格上。这样一来，不支持显示背景图片的客户端将会显示背景颜色。

<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:>
    <h2>News and Events</h2>
</td>

各种各样的其他样式

我们需要给每个链接根据客户需要重新设置样式，用来覆盖电子邮件客户默认的样式，并给主体表格设置一个边框。我也还要给图片添加一个display:block，用来解决Outlook和Hotmail电子邮件客户中图片底部增加空白间距的问题。

确保所有图片添加display:block，以防止Outlook和Hotmail电子邮件客户端产生一个怪异的margin。

#main {border: 1px solid #cfcece;}
img {display: block;}
a {color: #4A72AF;}

开始制作HTML Email

我们完成了比较容易的部分。现在我们需要测试我们制作的电子邮件。

步骤五：测试

电子邮件的测试过程是非常重要的，也是最让人讨厌的。处理电子邮件的时候，在每个阶段我都常测试，这样我就可以确定有什么差错。有很多客户测试和大量的方法来测试他们，让我们去结束这一切吧。

电子邮件客户端

下面这些电子邮件客户端，你应该都需要测试：

Outlook2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird

怎么测试

我们首先需要找到一种方法发送制作好的HTML电子邮件。你的客户可能会像Mailchimp和Campaign Monitor测试电子邮件或发送电子邮件。

你可能认为没有必要这么复杂化，你可能认为只需要将HTML代码粘贴到电子邮件客户端发送即可。然而，这可能导致在不同的电子邮件客户端有不同的结果。所以为了有一个好的应用，测试是必不可少的。

使用Mailchimp测试

我的首选方案是使用Mailchimp进行测试和发送电子邮件。Mailchimp有一个免费发送500人的版本，这样你就不需要支付测试的费用。它有一个简单易用的界面，这里有一个快速操作的介绍：

注册一个免费的Mailchimp的账户，并添加一个测试电子邮件账户的收件人列表：Hotmail、Yahoo!和Gmail等，登录到您的新账户。
在你的账户主界面选择创建一个活动并选择常规的。填写基本信息，你需要的只是一个用于测试的一个名称。
在设计页面，选择Import -> 粘贴代码，确保您选择了自动的CSS inliner选项。
如果你不使用Mailchimp,确保您使用Premailer将CSS转换成内联。
直到你确认了并选择发送测试。从这里您可以发送一些测试，但在那之后，你需要一个实际发送电子邮件的列表。

使用litmus测试

Litmus是一个Web应用程序，可以测试HTML电子邮件在各种各样版本下的电子邮件客户端。需要全方位的服务，你需要付费，你可能无法说服你的客户支付这笔测试费用，但他的免费版本仍然允许您在Outlook2003和Gmail上做测试。

结果——好的

我们的一些测试结果很完美：

开始制作HTML Email

结果——有点差的

有些是有点差，但或多或少有些相同的。

开始制作HTML Email

结果——丑陋的

我们也有一些故障。

开始制作HTML Email

清理这个烂摊子

经过全面的考虑，这是一个非常成功的测试，因为我们测试了Outlook和Gmail下的很多元素。我们与老的Gmail和Hotmail的问题相关的客户使用默认样式表。我们使用!important覆盖了标题自带的绿色文本效果。有时候这些效果真的让我们要疯了。

开始制作HTML Email

为了解决这个问题，我们需要给我们带有绿色标题元素添加!important重新设置，覆盖默认的样式。

h3 {
    font-size: 28px; 
    color: #444444 !important; 
    font-family: Arial, Helvetica, sans-serif; 
}
h4 {
    font-size: 22px; 
    color: #4A72AF !important; 
    font-family: Arial, Helvetica, sans-serif; 
}
h5 {
    font-size: 18px; 
    color: #444444 !important; 
    font-family: Arial, Helvetica, sans-serif; 
}

在老的Gmail邮箱中有一个类似的问题，Gmail会给标题标签底部添加一个margin。我们只需要覆盖margin-bottom样式即可。

#header h1 {
    color: #ffffff !important; 
    font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; 
    font-size: 24px; 
    margin-bottom: 0!important; 
}
#header h2 {
    color: #ffffff !important; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px; 
    margin-bottom: 0 !important
}

我们修复hotmail下的效果

开始制作HTML Email

所以有一个实用的，一致的HTML电子邮件。这是一件痛苦的事情，但是你得到一个系统就要快得多。尽量保持你的代码有注释和组织结构清晰，以便你以后可以重用。

如果你能说服你的客户注册Litmus之类，让你变得更容易。你也可以通过Mailchimp和Campaign monitor更多版本来做测试。

排除故障

你肯定还会遇到我这里没有提到的问题，但我有一些建议可以帮助你更好的排除这些故障：

检查你的数学：我不记得有多少次是因为计算出错，增加了单元格宽度而搞砸了我的布局。记得占用的单元格边距：他会增加你单元格的宽度。
检查默认样式表：使用类似Firebug或Webkit的检查工具来检查是否客户端会覆盖你的样式。如果发生这种情况，添加一个!important声明，应该可以帮助你解决问题
搜索查找，总是有人经历过你碰到的问题。如果Google帮不了你，试着找一些技术博客和流行的电子邮件客户端的博客，他们可能知道这些东西。
将其分解：如果你找不到你的问题出在哪，加到最开始，一点眯地查看你的电子邮件，直到你找到问题所在。

结果

这是最后的代码，仅供你参考。由于篇幅原因，只提供下载链接和Web浏览器下的演示效果，如果你感兴趣，可以下载相关文件或在线阅读：

demo download

这里是我们最终的效果，如下图所示：

开始制作HTML Email

没什么特别的，但是它应该是你开始设计自己的HTML电子邮件的一个很好示例。当然，还有其他的方法可以做到我实现的效果，但是HTML电子邮件，真正需要的是要知道它的工作原理。因为制作电子邮件没有Web标签或最佳实践的概念。

扩展阅读

Purchase Email Templates on ThemeForest
Campaign Monitor Resources (Their Blog also has some really useful tips)
Mailchimp Resources
6 Easy Ways to Improve Your HTML Emails
20 Email Design Best Practices and Resources for Beginners
30 HTML Best Practices for Beginners

我希望你今天学到了一点。我知道我找到了我的第一个HTML电子邮件项目的教程。看来分享让我学到很多东西。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载，烦请注明出处：

英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails/

中文译文：https://www.fedev.cn/css/getting-started-with-html-emails.html

Yung-96 - Silver Metallic

开始制作HTML Email

HTML Mail介绍

电子邮件客户端的问题

解决文案：代码像1997年的一样

步骤一：电子邮件设计

保持简单

减少图像的使用

窄屏最好

保持一致

我们的设计

步骤二：规划我们的代码

cellpadding和cellspacing

步骤三：开始编码

设置

信息表格

头部

内容区域——两列

注意：

内容区域——一列

分割器

内容区域——三列

其他

图片的使用

步骤四：美化电子邮件

重置基本样式

排版

背景图片

各种各样的其他样式

步骤五：测试

电子邮件客户端

怎么测试

使用Mailchimp测试

使用litmus测试

结果——好的

结果——有点差的

结果——丑陋的

清理这个烂摊子

排除故障

结果

扩展阅读

`cellpadding`和`cellspacing`