开始制作HTML Email

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

——作者:

——译者:大漠

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

demodownload

HTML Mail介绍

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

电子邮件客户端的问题

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

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

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

步骤一:电子邮件设计

保持简单

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

减少图像的使用

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

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

窄屏最好

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

保持一致

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

我们的设计

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

开始制作HTML Email

步骤二:规划我们的代码

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

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

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

开始制作HTML Email

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

开始制作HTML Email

cellpaddingcellspacing

我们将使用HTML的cellpaddingcellspacing属性来替代CSS的marginpadding属性。

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

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

步骤三:开始编码

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

设置

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

对于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电子邮件中,一般最好不要给表容器定义宽度。你最好为每个单元格定义宽度,但在这种情况下,我们将打破这个规则,因为我们担心表格有cellspacingcellpadding

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

信息表格

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

<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的间距,我们使用一个空的单元格来制作这个间距。在我的测试中,这个空格没有问题,但你最好在单元格中添加一个空白的符号&nbsp;
  • 我们也给单元格设置了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嵌入到行内。

重置基本样式

我们不会在你喜欢的页面中强硬的使用*选择器来重置样式。因为使用默认的值会让效果更佳一致。唯一的就是我们需要重置元素(如我们的标题和段落)的marginpadding,让元素周围空间一致(如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

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

步骤五:测试

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

电子邮件客户端

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

怎么测试

我们首先需要找到一种方法发送制作好的HTML电子邮件。你的客户可能会像MailchimpCampaign 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

开始制作HTML Email

开始制作HTML Email

开始制作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浏览器下的演示效果,如果你感兴趣,可以下载相关文件或在线阅读:

demodownload

 

这里是我们最终的效果,如下图所示:

开始制作HTML Email

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

扩展阅读

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

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

如需转载,烦请注明出处:

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

中文译文:http://www.w3cplus.com/css/getting-started-with-html-emails.html

返回顶部