我正在为电子邮件通讯设计HTML模板。我了解到,许多电子邮件客户端会忽略链接的样式表,而其他许多电子邮件客户端(包括Gmail)会完全忽略CSS块声明。内联样式属性是我唯一的选择吗?样式化HTML电子邮件的最佳做法是什么?
我正在为电子邮件通讯设计HTML模板。我了解到,许多电子邮件客户端会忽略链接的样式表,而其他许多电子邮件客户端(包括Gmail)会完全忽略CSS块声明。内联样式属性是我唯一的选择吗?样式化HTML电子邮件的最佳做法是什么?
Answers:
我之前打过HTML电子邮件之战。以下是一些有关样式设计的技巧,可最大程度地提高电子邮件客户端之间的兼容性。
内联样式是您最好的朋友。绝对不要链接样式表,也不要使用<style>
标签(例如,GMail会删除该标签及其所有内容)。
根据您的更好判断,请使用和滥用表格。 <div>
s不会削减它(尤其是在Outlook中)。
不要使用背景图片,因为背景图片很脏,会惹恼您。
请记住,某些电子邮件客户端会自动将键入的超链接转换为链接(如果您自己不锚定的话<a>
)。有时这可能会产生负面影响(例如,如果您要在每个超链接上放置样式以显示不同的颜色)。
小心地将实际链接与其他内容进行超链接。例如,请勿键入http://www.google.com
,然后将其链接到https://gmail.com/
。一些客户会将邮件标记为垃圾邮件或垃圾邮件。
用尽可能少的颜色保存图像以节省尺寸。
如果可能,将图像嵌入到电子邮件中。电子邮件不必伸到外部Web服务器即可下载它们,它们也不会显示为电子邮件的附件。
最后,测试,测试,测试!每个电子邮件客户端的行为方式都不同于浏览器。
<div>
,Outlook不会将颜色扩展到内容之外,这意味着填充不会被着色。
<img>
标签中引用的url ,例如:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
cid
。
邮件黑猩猩有很好的文章,关于不该做什么。(我知道这听起来可能是您想要的错误方法)
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
总的来说,您学到的所有不适合Web设计的东西似乎都是html电子邮件的唯一选择。
基础知识是:
只需在尽可能多的电子邮件客户端中进行测试即可,或者像上面其他建议的那样使用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不会加载图像,并且您将获得透明的页眉。如果您至少指定一种与电子邮件的整体感觉一致的颜色,则对用户的冲击将较小。切勿尝试使用任何样式表。还是CSS!只是避免它。
取决于您是从Word还是共享的Google文档中复制内容,请确保(command + F)找到所有(')和(“)并将其替换到编辑软件(尤其是dreemweaver)中,因为它们将显示为代码只是不好。
ALT是您最好的朋友。使用ALT标签将文本添加到所有图像中。因为很可能它们不会正确加载。ALT文字使人们能够单击(请参阅图片)按钮。还要定义图像的宽度,高度并将边界设为0,这样就不会在图像周围出现怪异的线条。
考虑在Photoshop中编辑所有图像,图像的每一面都要有15像素边界(使背景透明并另存为PNG 24)。有时,电子邮件客户端不会读取您应用于图像的任何填充样式,因此可以避免任何奇怪的格式!
我也发现链接下面的线特别烦人,因此如果您应用<style =“ text-decoration:none; color:#无论您要在这里使用什么颜色!” >它将删除该行,并为您提供所需的外观。
有很多东西真的可以使整体外观和感觉混乱。