Question

我正在为有能力的客户发送带有HTML版本的电子邮件（现在几乎都没有？）。我担心的是如何设计它。我是否使用内联css？我可以在html中包含样式表吗？ html是以<html>还是<body>开头的？我能阅读一个标准吗？

我可以在造型方面走多远？我有边界半径，背景渐变等，对于不支持它的浏览器（IE）具有自然回退机制。对于IE，我使用PIE.htc，我认为这太过分了......

Answer 1

关于您可以使用和不能使用的样式，请查看这篇优秀的文章，详细介绍10个最受欢迎的电子邮件客户端支持的内容：

http://www.campaignmonitor.com/css/

就使用样式表而言，如果您愿意，可以这样做，但据我所知，您必须链接到其他地方托管的样式表。如果有人想要离线阅读他们的电子邮件，这可能会出现问题。

最后，我尝试始终将我的HTML电子邮件包装在<html>标记中，因为它似乎使电子邮件对许多电子邮件过滤器显示为“有效”。

Answer 2

引用我最近在杂志上读到的一些内容，就像1996年的代码一样。

当您使用多个邮件客户端测试简报时，尝试优雅高效地编码似乎不会返回一致的结果。当您进行测试时，请确保让测试人员对该消息做了一些反思，因为有时候很棒的编码会在前进中突破。

虽然我讨厌使用表格进行显示，但它们在邮件客户端上的呈现方式会比浮动或多列DIVS更加一致（特别是如果将新闻稿等从原始收件人转发给其他人）。

另见：http://www.netmag.co.uk/zine/discover-culture/create-the-perfect-newsletter

Heeeeeelllooooo 1996 !!

Answer 3

我正在发送带有HTML的电子邮件有能力的客户的版本（不是几乎所有现在都是？）。

从艰苦的经历来看，“能力”并不等于“启用”。我不认为看起来很漂亮的HTML电子邮件有任何问题，但如果观众需要，请确保你有基于文本的意外情况。

我曾与几家技术进步的公司合作过，直到收到富有的电子邮件，这些电子邮件已经成功地保留在史前时代（我喜欢这个帖子中的“1996年的代码”评论）。您可能会与古老的Lotus安装，以“低级”模式运行的Outlook Web Access 2003或将在收到之前消除HTML内容的代理服务器竞争。

更难处理的是，现代电子邮件客户端（如Gmail和Outlook 2007/2010）是“智能”的，除非明确允许，否则不下载图像。

要回答您的原始问题，请不要依赖任何接近尖端的东西（例如CSS 3）或复杂的（深层嵌套布局，负边距等）。如果您决定在图像上滚动骰子，则可以在图像中添加更多内容，而在HTML中添加更多内容，从而使您的设计更具创意。

我收到的最好的电子邮件是那些有清晰简单的文字，非常有趣的我允许Outlook下载图片，我原谅任何轻微的格式错误。内容一如既往地为王。

Answer 4

我可能会谈论email编码的做法和过去一段时间，但如果你只考虑几个基本原则，你会比大多数人了解更多......

gmail（以及MS Outlook）是最难编码的两个电子邮件客户端，但可以开发一个具有高级别设计的responsive电子邮件，该电子邮件将在各个客户端中良好显示。在Gmail上，它只显示您的桌面布局而没有响应性。

当您开始编写电子邮件时，您应该使用很少甚至不使用CSS。想想桌面第一个＆＃39;尽可能简单地处理和编码，因为当它以600像素宽度观看时它会出现。我不在乎人们是否说它在电子邮件中有效，如果有更多折旧的方式来完成同样的事情，折旧的方法总是与电子邮件客户端更兼容。

忘记css和html，因为您通常会使用它。您应尝试仅将代码限制为xhtml1.0个有效代码。实际上，您可以使用有限的标签调色板进行大量布局，您只需要考虑更多的方法。

一个非常简单的例子：

不是使用填充或边距或透明图像垫片来实现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，身体，table，tbody，TR，TD，跨度，A，B，NOBR，SRC，ALT，目标，cellpadding，cellspacing，边界，对齐，bgcolor，颜色，高度以及这些标签中的字母数字内容。

你可能很想使用valign，style，background，class ...... ...... DON＆＃39; T ..还没有

如果您希望尽可能实现最高的交叉兼容性，请接受某些客户将以这种方式看到它，因此您应该尽可能保持清洁和可呈现性。

第2步

一旦你的基本结构看起来很好而且很漂亮，你可以考虑让它看起来更好看。您可以开始添加一些CSS和HTML4标记，以改善将看到它的客户端的样式。但是，不要疯狂，尽量保持简约的方法。

一旦你有了CSS，无论你想使用什么CSS（caniuse.com是一个很好的资源，如果你想知道尝试使用什么）。一旦它全部到位，在没有偏见的情况下突然删除所有内容，只需删除那些新标签，别的。现在看看电子邮件。如果删除这些标签并没有打破你的布局，那么你的好处就是去。知道你有一个交叉兼容的电子邮件，你可以放心地取消删除它们并且睡得好。如果有什么东西打破你的布局，你最好不要在那里，因为很多客户都会这样做并删除它，如果你把它留在那里你会有一个非常糟糕的一天。

第3步

完成后，您可以添加一对[标签：媒体查询]。我有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或任何测试套件，因为它们只是在一定程度上是准确的。您应该为您关注的每台设备配备一个测试设备。如果您没有花费相当多的时间来测试电子邮件，那么无论您花多长时间编写代码，那么您还没有进行足够的测试......

不要相信人们对编码电子邮件的看法，除非您已经尝试过，测试过并亲自证明了这一点。因为更多的人认为他们知道他们所谈论的内容而不是实际所做的内容，尤其是在阅读有关电子邮件编码的博客和文章时。

If you'd like an example or boilerplate to use, here is the template I created over the course of about 2 years of coding 2+ emails almost every week. I can pretty much guarantee it will be the most cross client/device compatible marketing email example you will find. Feel free to copy it, modify it, whatever you like.

值得注意的是..当我在创业公司工作时，我每周必须编写几封电子邮件。我们选择以最困难的方式这样做：疯狂的客户端兼容性和使用尽可能少的图像。图像中没有文字，而是我不得不在文本周围拼接，并使文本背后的背景图像在客户端之间运行良好。电子邮件中文本背后的背景非常难以使某些电子邮件客户端工作良好..可能，但是令人沮丧的废话。当我离开那份工作并开始为大牌品牌工作时，在短时间内我不得不再编写几封电子邮件（我不再编写电子邮件代码）......但对于那些大品牌......他们我不想让我浪费数小时的时间来编写电子邮件。他们更喜欢把它变成一个大图像，文字和所有..简单的peezy。在那个时候，当我在创业公司工作时......我们确实进行过一次测试，比较高度优化的编码电子邮件与基于文本的电子邮件的点击率和所有图像电子邮件的差异。这些差异最多可以忽略不计。

Answer 5

就电子邮件客户端而言，电子邮件中的HTML以<body>开头。所有样式都必须内联完成，不幸的是，电子邮件客户端的行为与浏览器的行为方式不同。有一些很好的信息here:

Answer 6

我是否使用内联css？

是的，

在颜色的A和FONT元素中，字体大小// face / font-family对于电子邮件解析器是相同的
在用于显示的IMG元素中：块; // gmail使用display：inline;所以你需要覆盖它
在第一个TABLE中用于背景图像;背景重复; //在Outlook 2007/10中显示bg-images。

我可以在html中包含样式表吗？

是的，HEAD和BODY标签都是必需的，因为大多数网络邮件程序只解析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

在电子邮件中设置html样式

6 个答案:

第1步

第2步

第3步

第4步