Question

我正在编写电子邮件简报。我已经看到一些关于良好电子邮件编码的指导我想问一下电子邮件新闻稿的css代码，例如它的代码内联css，但对于一些免费的模板，我发现这样的代码

       <style type="text/css">

       body { color:#000; background-color:#fff; font-family:Arial, Helvetica, sansserif; text-align:center; }
       h2 { color:#2255DB; font-size:16px; margin-top:15px; margin-bottom:0px; }        
       h2 a:link { text-decoration:none; }
      .footer { fontsize:11px; text-align:center; color:#2255DB; }// and son on 

       </style>

在fotter的正文代码中

就像

    <p class="footer" style="color:#2255DB;"> footer...</footer>//again style  tag

有时我发现这样的内联造型......

    <span style="font-weight: bold; width: 525px;">
    Lorem ipsum dolo
    </span><br><br>// and son on  ,,

上述两个代码在电子邮件客户端中都运行良好我也看过Campaign监视器等的标准，所以我很困惑哪种风格更好..我们应该使用上面提到的代码中的样式和/或内联编码，如果有人可以清楚我这个..这会很棒赞成

编辑：一旦编码，是否有任何免费服务，可以帮助检查其邮件客户端的有效代码？

Answer 1

许多邮件客户端将删除嵌入式样式表。最好使用内联样式。

在您的示例中，您正在为BODY标记设置样式 - 但如果我在Gmail中读取您的电子邮件 - 该页面已经拥有其OWN正文标记 - 那么您的标记将被删除。

我发现广告系列监控指南是一个很好的资源。

这是一个很好的测试：将您的电子邮件保存在静态HTML页面，然后在MS Word上打开它。这是一个非常好的“最坏情况”。

如果您要进行任何严肃的电子邮件营销工作，Exact Target有一个出色的工具，可以在不同的客户端实际呈现您的电子邮件，并为您提供来自这些平台的屏幕截图PDF。

Answer 2

根据我所做的HTML电子邮件，以及遵循http://24ways.org/2009/rock-solid-html-emails/的建议，我建议始终将样式内联。

您提到http://www.campaignmonitor.com/css/，它确实表明Gmail会成为样式不会内联的问题的客户端。

修改：如果您对此方案中的Gmail是黑羊有任何兴趣，请查看第1194.22节，http://mail.google.com/mail/help/accessibility.html

Answer 3

为了确保HTML简报看起来与设计一样接近，我肯定会使用内联样式。

不幸的是，您必须非常专注于您的样式，否则某些软件（例如Gmail）将覆盖您的样式声明。这有时是一种真正的痛苦，但值得这样做IMO。

HTML电子邮件签名也是如此。

所以一定要选择内联样式：）

哦，还有一件事。我知道这是2012年和大量的设计师/前端人员建议在HTML电子邮件和签名中使用html标签（甚至html5元素），但我会尝试坚持老派的方式，并使用表格来确保有没有不必要的人工制品。

Answer 4

对于电子邮件简报格式，由于不同的电子邮件客户端以不同方式呈现布局，我强烈建议您使用内联css 和主要字体标记及其属性来设置文本样式。还使用表结构而不是div布局来保持大多数电子邮件客户端的布局一致。

Answer 5

为电子邮件创建HTML模板真是一件麻烦事。测试通常也非常困难和不可靠，甚至来自表示他们测试所有内容的服务。已知较旧的邮件客户端忽略CSS和较新的HTML元素。此外，邮件客户端可能会使用自己的CSS覆盖某些CSS，从而破坏布局。

我的建议：

1）使用内联样式，正如其他人提到的那样。将它们应用到一切。例如，不要指望将div添加到div中以应用于div内的<p>（因为它应该！）。将样式添加到两者，或者至少是直接父母。

2）使用表格进行任何布局（呃！），而不是边距和填充。一些较旧的邮件客户端可能不太关心CSS，可能会剥夺您的所有内容，或仅应用它的片段。

3）即使电子邮件客户端丢弃所有CSS（这是一种明显的可能性），设计电子邮件仍然可以读取。这就是您经常收到主要是图像的电子邮件简报的原因。

Answer 6

为所有内容使用内联样式，以确保您的HTML电子邮件在所有客户端上显示相同内容。

您可以使用一个很好的工具来内联HTML内容。它是由mail-chimp提供的（我想知道关于电子邮件的一两件事）http://beaker.mailchimp.com/inline-css

Answer 7

使用内联样式而不是嵌入式css总是更好，因为一些主要的电子邮件客户端（例如Outlook 2007）不支持电子邮件中的CSS。

Gmail不支持嵌入式CSS。

解决此问题的一种方法是使用我们在每个测试结果的“开发者工具”下拉列表中的CSS转换工具将嵌入式CSS转换为内联。

还有另一种方法可以解决字体，字体颜色和字体大小等问题：Gmail会将您的Body标记转换为DIV。这实际上对您有利，因为您可以使用BODY中的任何内联CSS属性，否则DIV将支持这些属性。但是，重要的是要知道某些客户端不支持BODY标记，因此您还应该在嵌入式CSS中包含相同的声明。另外，请记住，你不能依赖像“bgcolor”这样的BODY属性，因为它在DIV中不受支持

关于Html电子邮件简报的CSS编码标准的困惑

7 个答案: