发送的邮件被标记垃圾邮件

How to mark up the cross-mailer newsletters in HTML format HTML newsletters is still very successful type of communication between readers and publishers. Publishers can track the different indicators of such letters, for example, reading the letter, forwarding, clickthroughs, as well as the interest of readers to the different products and topics. Readers absorb information like a regular web page as it is visually more appealing and more easily readable than text messages. In this article I would like to share knowledges in creating of cross-browser and cross-mailer newsletters. This means – correct displaying of layout in all mail clients. I think that article is still quite relevant. Duty is a long time I was engaged with creating html layouts for newsletters around the world, and the following rules will cover the following mail client and web interfaces: Gmail, Yahoo Mail, Hotmail, MS Outlook, Thunderbird 2.0-3.0, Windows Live Mail, Apple Mail, AOL Mail, possible others.

如何以HTML格式标记跨邮件通讯简报 HTML新闻简报仍然是读者和发布者之间非常成功的交流方式。 发布者可以跟踪此类信函的不同指标，例如，阅读信函，转发，点击率以及读者对不同产品和主题的兴趣。 读者像普通网页一样吸收信息，因为它在视觉上比文字信息更具吸引力并且更易于阅读。 在本文中，我想分享有关创建跨浏览器和跨邮件的新闻通讯的知识。 这意味着–在所有邮件客户端中正确显示布局。 我认为这篇文章仍然很有意义。 长期以来，我一直致力于为世界各地的新闻通讯创建html布局，并且以下规则将涵盖以下邮件客户端和Web界面：Gmail，Yahoo Mail，Hotmail，MS Outlook，Thunderbird 2.0-3.0，Windows Live Mail ，Apple Mail，AOL Mail，可能还有其他。

基本原理 (Fundamentals)

During coding HTML email biggest pain is that large amount of different programs are available for reading emails: from desktop programs (Eudora, Outlook, AOL, Thunderbird) to web services with own interface (Yahoo!, Hotmail, Gmail etc). If you thought it was difficult to ensure the cross-browser compatibility of your web sites, then get ready for the new game, since each of the above mentioned client can display the same email quite differently. And even when these tools will show everything is fine, you have to remember that readers can resize the window while reading, while there may be all sorts of trouble.

在对HTML电子邮件进行编码期间，最大的麻烦是可以使用大量不同的程序来阅读电子邮件：从桌面程序(Eudora，Outlook，AOL，Thunderbird)到具有自己界面的Web服务(Yahoo！，Hotmail，Gmail等)。 如果您认为很难确保您的网站的跨浏览器兼容性，那么请为新游戏做好准备，因为上述每个客户端可以以不同的方式显示同一封电子邮件。 即使这些工具可以显示一切正常，您也必须记住，读者可以在阅读时调整窗口大小，但可能会遇到各种麻烦。

Block layouts? Will have to forget about it. Once we’ve set our sights on a very wide audience of subscribers, we will back to the best traditions of HTML 3 (or slightly worse). As a “skeleton” of our letter will a table. “Wow!”, you say? But this is so. Now the main feature, which applies not only to the tables, but to all inner elements: it is necessary to null all external and internal padding in tables, lists, paragraphs – commonly to all elements, which can have any paddings. Why? All because of the fact that every mail client have own opinion what default padding these elements have. But the saddest thing is that some clients do ignore the margin and padding. You can think – lets define few styles like:

块布局？ 将不得不忘记它。 一旦将目光投向了非常广泛的订阅者，我们将回到HTML 3的最佳传统(或稍差一点)。 作为我们信件的“骨架”，是一张桌子。 “哇！”，你说？ 但这是事实。 现在的主要功能不仅适用于表格，而且适用于所有内部元素：有必要将表格，列表，段落中的所有外部和内部填充置空-通常适用于所有可以具有任何填充的元素。 为什么？ 所有这些都是因为每个邮件客户端都有自己的见解，这些元素默认填充了什么。 但是最可悲的是，有些客户确实忽略了保证金和填充 。 您可以考虑–让我们定义一些样式，例如：

*{ padding:0; margin:0; }

*{ padding:0; margin:0; }

and put this into header area. But here is not so easy. Some developers of mail servers is smarty, and they understand that letters are needed for the text, not multicolored decorations, and just simply switched off supporting similar constructions. This means that the styles will be necessary hardcoded inline for each element. More, each table should turn off attributes like cellpadding and cellspacing, as well as collapse the table. We don`t will change paragraphs or lists – we don`t will use this, just imitate.

并将其放入标头区域。 但这不是那么容易。 邮件服务器的某些开发人员很聪明，他们知道文本需要字母，而不是彩色装饰，只需关闭以支持类似结构即可。 这意味着样式对于每个元素都是必要的内联硬编码。 此外，每个表都应关闭诸如cellpadding和cellspacing之类的属性，并折叠该表。 我们不会更改段落或列表-我们不会使用它，只是模仿。

填充和边距处理 (What to do with padding and margins)

The situation does not look very nice – we will null both. Then, lets try to use blank.gif — one-pixel transparent GIF file which we will use to build layout. You will have to work with this little and tables and tables (again and again). Here are example of two-column layout in the paragraphs and lists.

情况看起来不太好–我们将同时取消两者。 然后，让我们尝试使用blank.gif(一像素透明GIF文件)，我们将使用它来构建布局。 您将不得不再次使用此小工具和表格。 这是段落和列表中两列布局的示例。

<table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;">
<tr>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td>First paragraph text here | First paragraph text here | First paragraph text here</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Second paragraph text here | Second paragraph text here | Second paragraph text here</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Third paragraph text here | Third paragraph text here | Third paragraph text here</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Emulation of UL-LI elements - element number one</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Emulation of UL-LI elements - element number two</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Emulation of UL-LI elements - element number three</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;">
<tr>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td>First paragraph text here | First paragraph text here | First paragraph text here</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Second paragraph text here | Second paragraph text here | Second paragraph text here</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Third paragraph text here | Third paragraph text here | Third paragraph text here</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Emulation of UL-LI elements - element number one</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Emulation of UL-LI elements - element number two</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Emulation of UL-LI elements - element number three</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
</tr>
</table>

As a result of this code we will have table with two columns. In the first column we can see a simulation of the paragraphs of the text on the right – these is an imitation of an ul list. All spaces (our margins/paddings) in the example provided by a set height / width of table cells, and also set the width / height of one pixel transparent image. This blank gives us “prop effect”, due to which editing nothing break.

作为此代码的结果，我们将获得具有两列的表。 在第一列中，我们可以看到右侧文本的模拟-这些是ul列表的模仿。 示例中的所有空格(我们的边距/填充)由表单元格的设置高度/宽度提供，还设置了一个像素透明图像的宽度/高度。 此空白为我们提供了“适当的效果”，因此，编辑不会中断。

文字格式 (Text Formatting)

As mentioned above, the common styles for the our layout can’t be used and the design should be set inline for each element. We should forgot font tag at all. The reason is that before the mass mailing source code can get into the hands of cunning visual editors, which will break all font to span, and in its own way, that will adversely affect the whole result. The rule with font tag is not that crucial but suggested in most cases.

如上所述，不能使用我们布局的通用样式，而应该为每个元素内联设置设计。 我们应该完全忘记字体标签。 原因是在大量邮件发送的源代码无法进入狡猾的可视化编辑器之前，这将破坏所有字体以span的形式 ，并以其自己的方式对整个结果产生不利影响。 带有字体标签的规则并不是那么关键，但在大多数情况下建议使用。

As we will have to void paragraph’s spaces, – editing text through style attribute of p tag also makes no sense, while we decide to imitate these paragraphs. Therefore, for the styling, we will use span and only span. In the style attribute we will specify parameters such as: font-family, font-size and color – always in HEX format (#xxxxxx) or literally, for example red. Not all postal servicecan correctly understand color of type #777, such constructions will simply ignored. We can specify pitch, typeface etc via inline styles, but it also won’t be a mistake if you will use tags like b, i, u. strong etc. — no difference.

由于我们将不得不舍弃段落的空格，因此-当我们决定模仿这些段落时，通过p标签的style属性编辑文本也是没有意义的。 因此，对于样式，我们将使用span和only span。 在样式属性，我们将指定参数，如： 字体家庭 ，字体大小和颜色 -总是以十六进制格式(#XXXXXX)或从字面上看，例如红色。 并非所有邮政服务都能正确理解＃777类型的颜色，此类构造将被忽略。 我们可以通过内联样式指定间距，字体等，但是如果您将使用b，i，u之类的标签，也不会出错。 强等。没有区别。

超连结 (Hyperlinks)

Every single link need to wrap in span, pointing out all the styles, and duplicate those styles into the style attribute of the link. Link may also be in the middle of the text, and, here are example of how to draw a link in the text:

每个单独的链接都需要包裹跨度，指出所有样式，然后将这些样式复制到链接的style属性中。 链接也可能位于文本的中间，下面是如何在文本中绘制链接的示例：

<span style="font-family:verdana; font-size:12px; color:#404040;">This is single text, and </span> <span style="font-family:verdana; font-size:12px; color:#0077c0;"><a style="font-family:verdana; font-size:12px; color:#0077c0;" href="%%url%%">this is link</a></span> <span style="font-family:verdana; font-size:12px; color:#404040;"> inside our text</span>

<span style="font-family:verdana; font-size:12px; color:#404040;">This is single text, and </span> <span style="font-family:verdana; font-size:12px; color:#0077c0;"><a style="font-family:verdana; font-size:12px; color:#0077c0;" href="%%url%%">this is link</a></span> <span style="font-family:verdana; font-size:12px; color:#404040;"> inside our text</span>

We set the target attribute to _blank value for all links. Just because we don’t want to open pages in mailer’s window :) This is not rule, but it’s better to play safe.

我们将所有链接的target属性设置为_blank值。 只是因为我们不想在邮寄者的窗口中打开页面:)这不是规则，但是最好放心使用。

图片 (Images)

Images important too. Width and height of all images must be equal to actual width and height. You can implement it with using of attributes width and height, or via css in the style attribute of the img tag – there is no differency. Better not allow size distortions, as the result can be frustrating for most mailers. Please note that if an image is a link you should hide border for images via styles or the border attribute of the img tag, and for the link set text-decoration: none; otherwise the picture can be underlined.

图像也很重要。 所有图像的宽度和高度必须等于实际的宽度和高度。 您可以通过使用width和height属性或通过img标签的style属性中的css来实现它-没有区别。 最好不要让尺寸失真，因为对于大多数邮件来说，结果可能令人沮丧。 请注意，如果图像是链接，则应通过样式或img标签的border属性为图像隐藏边框，对于链接集，则应隐藏文本边框：none; 否则，该图片可以带有下划线。

背景 (Background)

Background as color can be specified for the document body, for our table and its cells in the format of #xxxxxx or literally, for example – red (blue, green …). The reason for this was explained above. Background images are restricted. Not so strict, of course, but better don`t use it. Most of the clients and interfaces simply do not support.

可以为文档正文，表格及其单元格指定格式为#xxxxxx或其他形式的背景颜色，例如–红色(蓝色，绿色…)。 上面已经解释了其原因。 背景图像受到限制。 当然不那么严格，但是最好不要使用它。 大多数客户端和接口根本不支持。

以下是一些建议： (Here are few more advices:)

• Avoid the using JavaScript. In most cases they will be disabled mail clients.避免使用JavaScript。 在大多数情况下，它们将被禁用邮件客户端。
• Use attributes alt, height, and width for images. Set the values for these attributes, will get a great result display in GMail, and even if the images will be disabled, the entire pattern will be displayed well.对图像使用属性alt，height和width。 设置这些属性的值，将在GMail中获得很好的显示效果，即使禁用图像，也可以很好地显示整个图案。

结论 (Conclusion)

Summed up to the above we can say that building of letters will be more terrible than all of us adored Internet Explorer 6, though here it’s not dancing with a tambourine, but rather in the meticulousness and patience. Therefore, if you really like make up, you are not annoyed by monotone work, you do not neglect accuracy and attention and follow rules given in the article, your subscribers will be pleased. Good luck in your work and thank you for your attention!

综上所述，我们可以说，与我们所有人都喜欢的Internet Explorer 6相比，字母的构建将更加可怕，尽管在这里它不是摆着铃鼓跳舞，而在于细致和耐心。 因此，如果您真的很喜欢化妆，那么您不会因单调的工作而烦恼，也不会忽略准确性和注意力，并遵循本文中给出的规则，您的订户将感到满意。 祝您工作顺利，并感谢您的关注！

翻译自: https://www.script-tutorials.com/how-to-mark-up-the-cross-mailer-newsletters-in-html-format/

发送的邮件被标记垃圾邮件