上篇企业网站营销自动化建设指南中提到，电子邮件仍然是现代互联网中最佳的通讯方式，掌握好这个工具无论是对我们的品牌传播或营销自化都会非常的有利。

虽然现在微信、QQ等通迅软件已经非常普通，但仍然代替不了电子邮件的地位，反而电子邮件通讯比以往都有更多的应用来配合我们的互联应用，每个人都喜欢为他们的用户设计一个美观并丰富的网站，例如官网、商城、平台。但非常不幸的是，电子邮件不是网站，也许你设计了漂亮的画面，但在邮件中却不能完美的呈现，或许在一个电子邮件客户端中可能看起来很棒，但电子邮件客户端种类烦多，结果可能会相差很远。可惜的是在百度上搜索也没有找到非常完整的教程和经验，我通过结合经验及国外的一些分享得出了行之有效的总结，希望可以对后来人有所帮助。

我们的问题是很多电子邮件客户端不能支持HTML和CSS的所有特性。CSS(层叠样式表)是一种流行、强大、灵活的网站设计的技术。(如果你不知道CSS是什么或者如何使用它，这篇文章你阅读起来就会非常因难了，可事先对CSS进行了解和学习方能流畅的阅读本文)

在Gmail 2012的时候它的最严格的控制了CSS，因为它会忽略所有外部和嵌入式CSS。微软的Outlook 2010和2007实际上在CSS和HTML支持方面采取了很大的退步，选择使用MS Word作为呈现引擎。出于这个原因，我们认为与Gmail的兼容性CSS和HTML支持是设计邮件CSS的标准，毕竟他的客户是比常多的，在国内以QQ邮箱、163邮箱作为兼容标准。虽然有很多限制 ，但我们有个技巧就是老的HTML标签属性将填补某些禁用内联样式的作用(即空格，背景颜色，对齐方式等)

我们的目标是尽量达到每个客端的电子邮件情况都如同我们设计的原样，就是最偏门的电子邮件客户端，也能看起来很不错。我们这里并没有提到设计美学，只是编码实践的经验分享，我们需要知道的几件事如下：

一、编写邮件HTML需要避免的事情

1、不能导入外部( link rel="stylesheet" )或嵌入式样式表(包含于 style 标签中的样式及 body 上面样式)。这是最重要避免的事情。许多电子邮件服务将所有超出body标记的内容删除，并禁用外部样式表。也就是说，只要你在某些电子邮件客户端中不渲染，你就可以包含一些内嵌的CSS语句(比如链接颜色)。

2、不要在电子邮件代码中使用JavaScript。因为这样会让你的E-mail标识为垃圾邮件。

3、不要在 body 上使用标签属性(如宽度或背景颜色)。大多数电子邮件服务忽略 body 标签。你可以试着把你的整个内容放在一个div中，并用 inline styles来设置它的样式，但是结果可能会有所不同。

二、邮件编码最佳实践

1、使用表格 table 进行布局。有些地方也允许 div 布局，但我们的经验表明 table 更受支持。哈哈，重新拥抱表格布局，那可是十年前的网页布局的主流。

2、在表格中使用内联样式(inline styles)。事实上，你会发现你可以在内联标签中获得内联样式的最佳里程数 td 。这样，您就可以在每个表单元格中设置小样式区域。将这些内联样式看作是微型样式表。这允许非技术用户以模块化的方式交换预先格式化的单元格中的内容。

3、固定宽度(data-width="100")，单元格边距和单元格间距，所有表格和单元格。这样做将导致模板的固定宽度。这很有帮助，因为大多数人会在预览窗格中查看时事通讯，这比他们的监视器宽度小得多。不要给机会留下宽度，因为很多电子邮件客户端喜欢“填充空白”，这会破坏设计。

4、通过发送给你自己或同事来测试你的电子邮件。这将给你最好的机会来捕捉任何问题之前，您的整个订户名单！发送测试邮件各种电子邮件客户端，如Outlook，Hotmail和Gmail，163邮箱，QQ邮箱。

三、关于邮件中使用的图像

1、不要使用背景图像。在Gmail中会忽略任何url()内联样式属性，和旧的背景HTML标签属性。如果你愿意你可以使用背景色(bgcolor或 background-color：CSS声明)。

2、不要将图片用于重要的内容，如按钮、标题和网站链接。Outlook，Gmail和其他用户默认关闭显示 图像，只有用户允许才会显示 。如果你的整个邮件都是图形化的，你所有的收件人都会看到很少的内容。

3、为所有图像提供alt文本( img alt="text" )。这样读者就会看到一些内容代替没有显示的图片。

4、声明图像的高度和宽度参数。一些电子邮件客户端默认为未声明的高度或宽度的“0”。

使用空间和vSpace标签属性添加图片周围的空白间距。margin和padding内联样式是最支持的，但并不是所有的电子邮件客户端(Outlook和Hotmail提供有限的支持)。

为了避免额外的空格下方的图像(特别是在tables)，应用data-style="display:block;"img标签。这将删除多余的空格中经常出现的问题。

四、目前最流行的移动、网络和桌面电子邮件客户端的CSS支持手册。