在电子邮件中设置HTML样式

12
我正在向能够处理HTML的客户端发送电子邮件(现在几乎所有客户端都支持),我担心如何进行样式设计。我应该使用内联CSS吗?我可以在HTML中包含样式表吗?HTML是以<html>还是<body>开始的?有没有标准可供参考?
我可以使用诸如border-radius、背景渐变等样式进行设计,这些属性对于不支持它们的浏览器(如IE)有自然的回退机制。对于IE,我使用PIE.htc插件,但我想知道是否这样做已经越界了。
6个回答

9
关于可以使用哪些样式和不能使用哪些样式,请参考这篇优秀的文章,其中详细介绍了十个最受欢迎的电子邮件客户端支持的内容:http://www.campaignmonitor.com/css/
至于使用样式表,如果您愿意,可以这样做,但据我所知,您必须链接到其他地方托管的样式表。如果有人想离线阅读他们的电子邮件,这可能会带来问题。
最后,我尝试始终将我的HTML电子邮件包装在<html>标签中,因为这似乎可以使电子邮件在许多电子邮件过滤器中更加“有效”。

1
我不理解你上一句话的意思。"用标签包装我的HTML电子邮件。" - at.
1
糟糕,忘记一个单词了!应该是“用<html>标签包装我的HTML电子邮件。” - Ender

4

最近我在一本杂志上读到了这样的话:“像1996年那样编写代码”。

尝试编写优雅高效的代码似乎不能保证在多个邮件客户端中测试时始终返回一致的结果。在测试时,请确保让您的测试人员转发消息,因为有时候精美的代码会在转发时出现问题。

虽然我不喜欢使用表格来显示内容,但是它们在邮件客户端中的呈现效果要比浮动或多列DIV更加一致(特别是如果新闻通讯等被原始接收者转发给其他人时)。

另请参阅:http://www.netmag.co.uk/zine/discover-culture/create-the-perfect-newsletter

哈喽,1996年!!


3

我可能可以谈一下编码的注意事项,但如果你考虑了几个基本原则,你就会比大多数人知道得更多。

(以及MS Outlook)是最难编码的两个电子邮件客户端,但是可以开发具有高设计水平的电子邮件,这样在各种客户端上都可以很好地显示。在Gmail上,它只会显示您的桌面布局而没有响应性。

当您开始编写电子邮件时,应尽量少或不使用CSS。采用“桌面优先”的方法,将其编码为简单的形式,就像您希望在600像素宽度下查看时那样。我不在乎人们是否说它在电子邮件中起作用,如果有更过时的方法能够实现相同的功能,则更过时的方法总是与电子邮件客户端更兼容。

请忘记通常使用的。你应该尝试将标签限制为仅限有效的标签。实际上,您可以使用有限的标签调色板进行很多布局,只是需要想到更加迂回的方式。

举个非常简单的例子:

与其使用填充、边距或透明图像间隔符来实现CTA按钮内的垂直间距,您可以使用一个嵌套一层表格、xhtml有效属性标签和零CSS,在填充的色彩按钮中实现垂直居中的标签和彩色文本。

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00cc66" width="200">
    <tr>
        <td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
    </tr>
    <tr>
        <td align="center"><font color="#ffffff"><b>Click Here</b></font></td>
    </tr>
    <tr>
        <td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
    </tr>
</table>

CTA Button

步骤1

编写不带 CSS 样式的电子邮件,并使其看起来好看。

此时,您的字母表应该只包括以下内容:

html、body、、tr、td、span、a、b、nobr、src、alt、target、、border、align、bgcolor、color、height以及这些标签中的字母数字内容。

您可能会想使用 valign、style、background、class 等……不要这样做,至少现在不要

如果您想实现最高的跨客户端兼容性,请接受一些客户端将以这种方式查看它,因此您需要尽可能地使其干净和整洁。

步骤2

一旦您的基本结构看起来漂亮和整洁,您可以考虑使其更好看。您可以开始添加一些CSS和HTML4标签,以改善那些将看到它的客户端的样式。但不要过度使用,尽量保持简约的风格。
一旦您确定了要使用的CSS(如果要了解要尝试使用什么,caniuse.com是一个很好的资源),把所有的东西都放在那里,突然而毫不犹豫地删除掉它们,只删除那些新标签,不删其他的。现在查看电子邮件。如果删除这些标签没有破坏您的布局,那么您就可以安全地撤消删除并放心地知道您拥有了一个跨浏览器兼容的电子邮件。如果有任何东西破坏了您的布局,最好不要在那里留下它,因为许多客户端都会这样做,并且如果您将其保留在那里,您将度过非常糟糕的一天。
第三步
一旦完成此操作,您可以添加几个[标签:媒体查询]。我为600和400设置了媒体查询,然后将它们加倍以实现更高的兼容性。使用头部的CSS,您可以开始使用重要标签覆盖HTML中的任何布局。因此,那些读取它的客户端将忽略您使用的内联样式,并遵循您添加的新样式。这非常适合调整元素的宽度,隐藏或显示元素等。
.mobile {display:none;}
    @media screen and (max-device-width: 600px), screen and (max-width: 600px) {
        *[class="desktop"]{display:none !important;}
        *[class="mobile"]{display:block !important;width:auto !important;max-height:none !important;overflow:visible !important;float:none !important;}

使用这4行代码,您几乎可以完成所有响应式结构。

**注意:使用桌面类需要额外的努力。

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
    <tr style="mso-display:none;">
        <td align="center" class="mobile" style="width:0;max-height:0;overflow:hidden;float:left;mso-display:none;">
            <a href="" target="_blank">
                <img class="banner" alt="o" src="logo-wide.gif" border="0" width="0">
            </a>
        </td>
    </tr>
</table>

这可能是我代码中最重要的CSS。示例表格不会在任何桌面设备上显示(包括Gmail),但会在移动设备上显示。唯一无法正常工作的客户端是Windows Mobile 7。
我使用这两个类从移动布局中删除元素,以实现响应式设计。避免使用桌面类,仅在极少数情况下使用,因为这意味着您的电子邮件将失去与Windows Mobile 7的兼容性。
步骤4
测试测试测试测试测试。电子邮件很容易出错,这真是太疯狂了。不要相信Litmus或任何测试套件,因为它们只有到一定程度才准确。您应该为每个关注的设备拥有一个测试设备。如果您花费的测试时间不比编码时间长得多,则没有进行彻底的测试。
除非您自己尝试、测试并证明了编写电子邮件的代码,否则不要相信人们对其的说法。尤其是当涉及阅读有关电子邮件编码的博客和文章时,更多的人认为他们知道自己在说什么,而实际上并非如此。

如果您需要一个示例或模板,请使用我在编写2年并每周发送2+封电子邮件的过程中创建的模板。我可以几乎保证它将是您能找到的最跨客户端/设备兼容的营销电子邮件示例。随意复制、修改,任何您喜欢的方式。


值得注意的是,当我在初创公司工作时,每周都要编写几封电子邮件,我们选择以最困难的方式进行:确保客户端兼容性,并尽可能少地使用图像。不使用图像中的文本,而是必须在文本周围进行拼接,并使电子邮件中文本后面的背景图像在各个客户端中正常工作。电子邮件中文本后面的背景非常难以在某些电子邮件客户端上正常工作。虽然有可能做到,但却很让人沮丧。当我离开那份工作并开始为大牌品牌工作时,短暂时间内我不得不编写更多的电子邮件(我现在不再编写电子邮件了)...但对于那些大品牌来说,他们不想让我浪费数小时编写电子邮件。他们更喜欢将所有内容制作成一个大图像,包括文本在内...轻松愉快。在此提醒一下,在我在初创公司工作时,我们曾经进行过一次测试,比较高度精细编码的电子邮件、基于文本的电子邮件和全图像电子邮件的点击率差异......差异微乎其微。

好的例子。我添加了一些CSS并创建了一些漂亮的按钮。 - Web_Developer
1
希望你没有使用<button>标签,因为它的支持性很差。而且你应该尽可能少地使用CSS。许多事情可以通过纯HTML和一些创意、迂回的解决方案来完成。这是一篇关于电子邮件中按钮的不错文章 - davidcondrey

3
我正在发送HTML格式的电子邮件,以适应所有能够接收的客户端(现在几乎都可以了吧?)。但是从经验来看,“能够接收”并不等同于“启用”。我认为制作精美的HTML电子邮件没有任何问题,但一定要确保在受众需要时有基于文本的备选方案。我曾与几家技术先进的公司合作过,但在处理富媒体电子邮件时却停留在史前时代(我喜欢这个帖子中“像1996年编码”的评论)。你可能会遇到古老的Lotus安装、运行在“下级”模式下的Outlook Web Access 2003,或者会在接收前篡改HTML内容的代理服务器。更难处理的是,像Gmail和Outlook 2007/2010这样的现代电子邮件客户端是“智能的”,除非明确允许,否则不会下载图像。回答您最初的问题,不要依赖任何接近前沿(例如CSS 3)或复杂(深度嵌套布局、负边距等)的东西。如果您决定冒险使用图片,则可以在图片中放置更多内容,并在HTML中放置更少的内容,从而使设计更具创意。我收到的最好的电子邮件是那些具有清晰简洁文本的邮件,内容非常有趣,以至于我允许Outlook下载图片,并原谅任何小的格式错误。内容始终是王道。

1

我需要使用内联CSS吗?

是的,

  • A和FONT元素用于颜色、字体大小/面/font-family,这对于邮件解析器来说是相等的
  • IMG元素中用于display:block; //gmail使用display:inline;所以你需要覆盖它
  • 第一个TABLE中用于background-image; background-repeat;//显示Outlook 2007/10中的bg-images。

我可以在HTML中包含样式表吗?

可以,因为大多数网络邮件解析器只解析BODY的内容,所以需要HEAD和BODY标签。

HTML应该以<html>还是<body>开头?

HTML以DOCTYPE声明开头。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这是我最喜欢的,因为你可以利用FONT元素。(在A元素中有用于样式稳定链接颜色)

http://www.w3schools.com/html/html_doctype.asp

http://www.w3schools.com/tags/tag_doctype.asp


1

就电子邮件客户端而言,电子邮件中的HTML从<body>开始。所有样式都必须内联完成,不幸的是,电子邮件客户端的行为与浏览器不同。这里有一些很好的信息可在此处找到:


是的,我记得在处理HTML电子邮件时,表格是个好朋友。 - danjah

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接