制作在email中显示的html文件

出自：http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails  作者:Tessa Thornton

译文：http://www.w3cplus.com/css/getting-started-with-html-emails.html 译者：大漠

 

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电子邮件代码变得非常的复杂，非常的快速。重要的是要有一个可行性计划。这里是我们的计划(我们会回来的，如果你没有遵循，不用担心)。

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

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

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

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类型。

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

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

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

信息表格

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

    

        

            
Trouble viewing this email? View in Browser
        
    

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

头部

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

    
        

            

                
Communitech Venture Services
            
            

                
News and Events
            
            

                
July 2010
            
        

    

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

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

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

内容区域——两列

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

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

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

    


    
        

            

                

                    
                
                

                

                    
All New Site Design
                    
It's 150% Better and 40% More Efficient!
                
            
        

    

注意：

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

内容区域——一列

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

    
        

            

                
Lorem ipsum dol...
            
        

    

分割器

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

效果如下图所示：

内容区域——三列

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

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

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

    
        

            

                

                    
Exciting New Products!
                    
 Ut enim ad minim veniam, ...
                
                

                

                    
A Newsletter Every Month
                    
Excepteur sint occaecat ...
                
                

                

                    
New and Improved Forum
                    
Lorem ipsum dolor sit ...
                
            
        

    

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

其他

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

    
        

            

                

                    
                
                

                

                    
This is a heading
                    
Lorem ipsum dolor sit...
                
            
        

    


    


    
        
Lorem ipsum dolor si... 
CALL TO ACTION

    

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

图片的使用

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

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

步骤四：美化电子邮件

我们不能将外部的样式表嵌入到电子邮件中，因为有些电子邮件客户端会删除整个中的标签，或者忽略

排版

对于电子邮件的排版没有什么很特别，因为它和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;
}

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

（ps: 不过我觉得还是尽量内联比较好，比如亲测qq邮箱，style标签里的样式是无效的）

背景图片

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

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

 

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

步骤五：测试

（PS：Mailchimp测试，在check 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上做测试。

 

清理这个烂摊子

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

为了解决这个问题，我们需要给我们带有绿色标题元素添加!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电子邮件。这是一件痛苦的事情，但是你得到一个系统就要快得多。尽量保持你的代码有注释和组织结构清晰，以便你以后可以重用。

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

排除故障

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

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

结果

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

DEMODOWNLOAD

 

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

没什么特别的，但是它应该是你开始设计自己的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/

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