HTML电子邮件样式的最佳实践
我正在为电子邮件通讯devise一个HTML模板。 我了解到，许多电子邮件客户端忽略链接的样式表，而其他许多人（包括Gmail）完全忽略了CSS块声明。 内联样式属性是我唯一的select吗？ 什么是造型HTML电子邮件的最佳做法？
Campaign Monitor有一个很好的支持matrix，详细列出了各种邮件客户端的支持和不支持的内容。
您可以使用像Litmus这样的服务来查看电子邮件在多个客户端上的显示方式，以及是否被filter等拦截。
我之前曾经参与过HTML邮件战。 这里有一些关于样式的技巧，以便在电子邮件客户端之间达到最大的兼容
-
内联样式是你最好的朋友。 绝对不要链接样式表，不要使用
<style>标签（例如GMail，去掉标签和所有内容）。 -
违背你更好的判断， 使用和滥用表格 。 只是不会削减它（特别是在Outlook中）。
-
不要使用背景图片 ，他们是参差不齐的，会激怒你。
-
请记住，有些电子邮件客户端会自动将input的超链接转换为链接（如果您不自己锚定
<a>）。 这有时会产生负面影响（比如说，如果你在每个超链接上添加一个样式来显示不同的颜色）。 -
要小心超链接一个不同的东西的实际链接。 例如，不要input
http://www.google.com，然后将其链接到https://gmail.com/。 有些客户会将邮件标记为垃圾邮件或垃圾邮件。 -
保存您的图像尽可能less的颜色，以节省大小。
-
如果可能， 将您的图像embedded到您的电子邮件中。 该电子邮件将不必与外部Web服务器联系以下载它们，它们不会作为电子邮件的附件显示。
最后， testing，testing，testing ！ 每个电子邮件客户端的操作方式与浏览器不同。
邮件黑猩猩已经得到了相当不错的文章，不要做什么。 （我知道这听起来是错误的方式，你想要什么）
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
一般来说，你所学到的所有东西，对于网页devise来说都是不好的做法，似乎是html电子邮件的唯一select。
基础是：
- 有绝对的path图像（例如https://stackoverflow.com/random-image.png ）
- 使用表格布局（从来没有想过我会推荐！）
- 使用内联样式（和老派的CSS也是，最多2.1，盒子阴影将不起作用）;））
只需在尽可能多的电子邮件客户端上进行testing，或者像上面提到的其他人一样使用Litmus！ （信贷给吉姆）
编辑：
邮件黑猩猩做了一个伟大的工作，使这个工具提供给社区。
它将您的CSS类内联应用于您的HTML元素！
除了在这里发布的答案，请确保你阅读这篇文章：
我最终总结的关于HTML电子邮件的资源是CampaignMonitor的CSS指南 。
由于他们的业务是围绕电子邮件交付，他们知道他们的东西，以及任何人都会
“这样吧。 我会用样式表制作一个HTML页面，然后使用jQuery将样式表应用到每个元素的样式属性。 像这样的东西：
var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet for (i in styleAttributes) { $('body *').css(styleAttributes[i],function () { $(this).css(styleAttributes[i]); }); }
然后复制DOM并在电子邮件中使用。
我发现图像映射工作得很好。 如果您有任何图像的页眉或页脚，请确保您应用bgcolor =“在空白处填写”，因为在大多数情况下，outlook不会加载图像，您将留下一个透明标题。 如果您至less指定了一种能够处理电子邮件的颜色，那么对用户来说就不会那么震惊。 切勿尝试使用任何样式表。 或者CSS！ 只是避免它。
取决于如果你从一个单词或共享谷歌文件复制文件一定要（命令+ F）find所有（'）和（“），并在您的编辑软件（尤其是dreemweaver），因为它们将显示为代码这只是不好。
ALT是你最好的朋友。 使用ALT标签将文本添加到所有图像。 因为赔率是他们不会正确加载。 而ALT文本是让人们点击（看图像）button的东西。 同时定义你的图像宽度，高度，使边界0，所以你不会得到奇怪的线周围的图像。
考虑在Photoshop中使用15px边框来编辑所有图像（使背景透明并保存为PNG 24）。 有时，电子邮件客户端不会读取任何适用于图像的填充样式，因此避免了任何奇怪的格式化！
另外我发现在链接下面的那一行特别烦人，所以如果你应用<style =“text-decoration：none; color：＃你在这里想要什么颜色！ >它会删除线，并给你所需的外观。
有很多，可以真正混淆了所有的外观和感觉。
;){kind=link}