跳到主要内容

创建HTML简报

将HTML和CSS应用于您的电子邮件会对您给潜在客户的印象产生巨大影响 - 在过去几年中,电子邮件客户端中的HTML支持已经取得了长足的进步。

然而,由于电子邮件客户端的数量庞大,很难为每个客户端提供完美的服务,因此,过时的做法可能会被迫开发人员强制执行。您可能已经意识到确保网站跨浏览器兼容性的重要性 - 但确保您的电子邮件在所有客户端看起来正确是一个完全不同的球赛!

要了解的事情

HTML中涉及到细微差别通讯设计。它可能很烦人,在某些情况下,非常令人沮丧。在我们开始实施,编码或设计模板之前,值得研究一下在创建HTML和CSS电子邮件时适用的一些基本原则。

在技术方面,大多数电子邮件客户端不支持CSS浮动,因此需要使用表格进行布局。许多客户还会删除HTML,head和body标签,包括其中的任何CSS样式。这意味着您的所有CSS都应该内联。

This is the basic structure of our email. It might look simple, but you’ll find that this structure is used widely and considered to be good email design practice

这是我们电子邮件的基本结构。它可能看起来很简单,但您会发现这种结构被广泛使用并被认为是良好的电子邮件设计实践

在设计方面,您应该保持600px或更小的电子邮件,以适应电子邮件客户端预览窗格的常见宽度。许多电子邮件客户端默认也会阻止图像,因此如果您依赖图像处理内容,则收件人可能看不到它。一个好的经验法则是内容越重要,就越有可能使用文本来显示内容。最后,即使您遵循所有正确的方法,您的创建也会在某些时候中断 - 如果您有20,000个电子邮件订阅者,则可以保证电子邮件无法正确显示每个邮件的最后一个。

因此,HTML电子邮件可能不一致且有些变幻无常 - 但仍然可以使用它们来为您和您的客户实现有效的营销。有了上述思想根深蒂固,让我们开始吧。我们将从头开始创建一封电子邮件,这意味着我们不会使用任何模板或第三方服务 - 只需HTML和CSS,Photoshop就可以使用图形。

基本结构

首先,我们将设置一个简单的HTML文件。一定要支撑自己,因为如上所述,用HTML和CSS制作的电子邮件似乎违背了您认为良好做法的一切:



介绍一些新东西!









到目前为止,我们拥有电子邮件的基本结构:我们已正确指定并填充所有相应的元标记,并为我们的内容添加样式。现在我们需要用内容填充我们的电子邮件。

This is the design of our header. This will be displayed at the top of our email, and will also be the most prominent part of the system

这是我们标题的设计。这将显示在我们的电子邮件顶部,也将是系统中最突出的部分

添加内容

让我们添加我们的内容。我们将使用HTML表格,从简单的文本行开始,使用户能够在浏览器中预览电子邮件。在以下插入之间插入以下内容标签:在这里,我们添加了第一个表格,并使用了它标记用内容行(在本例中为文本)填充它,然后关闭表。如果您要保存HTML文件并在浏览器中打开它,您会发现一个简单的文本行 - 可以在没有任何表格的情况下完成 - 但您会明白为什么它们对于电子邮件来说非常重要片刻。





这封电子邮件看起来有点模糊吗? 在浏览器中查看。

设计图形

在为电子邮件设计图形时,请记住宽度是一个真正的约束 - 所以想一想。对于我们的图形,我们将创建一个600x400px的Photoshop文档(称之为Header.jpg并且,在画布中,只需包含您要显示的顶部图形。在本文中,我们将简单地在底部包含带阴影边框的图像和一些文本。重复上述过程,但这次调用图形Middle.jpg并使用您的电子邮件正文填充它。

Take a final close look at the outcome of our header: from Photoshop to finished article, all it took to create it was a keen eye and a bit of imagination

最后仔细看看我们标题的结果:从Photoshop到完成的文章,创建它所需要的只是一个敏锐的眼睛和一点想象力

接下来我们将创建两个图形,每个图形作为页脚的一侧;例如,我们将建立一个链接到网站的左侧和一个链接到Twitter页面的右侧。为此,请创建两个空白画布,一个宽度为300像素,宽度为200像素页脚,l.jpg和另一个相同的大小叫页脚,r.jpg

创建我们的图形后,我们现在需要将它们放置在电子邮件中。为了实现这一点,我们将创建各种表,然后相应地填充它们,在封闭表标记下面添加以下代码():













2.0的新功能



  • Vivamus sagittis lacus

  • Vel augue laoreet rutrum

  • Faucibus dolor auctor faucibus dolor aucto

  • Vivamus sagittis lacus sagittis lacus

  • Vel augue laoreet rutrum laoreet rutrum

  • Faucibus dolor auctor
















在这里,我们使用HTML表格将每个图像放置在正确的位置,然后添加指向页脚图像的链接。您应该注意到我们为HTML电子邮件使用表格的原因之一:您可以将图像放置在您想要的位置。

A look at our email from within Safari – although you must always be sure to send a test email and don’t rely on what you might see in your browser!

从Safari中查看我们的电子邮件 - 尽管您必须始终确保发送测试电子邮件,而不是依赖于您在浏览器中看到的内容!

无论位置如何,桌子都可以让您更容易布置图像。然后,您可以将它们链接到特定位置,这是创建HTML电子邮件的基本动机。

发送电子邮件

当归结为发送您的电子邮件时,事情归结为您正在使用的客户端 - 这里我们将介绍三种流行的桌面选项:

  • OS X Mail使用OS X发送电子邮件非常简单 - 在Safari中打开HTML文件,转到文件>分享>电邮此页面(或按CMD + I)。邮件应用程序应该打开,您的HTML文件很好地定位在电子邮件正文中。
  • 外表要使用Outlook将HTML文件作为电子邮件正文发送,请将其移至C:\ Documents and Settings \ * userid * \ Application Data \ Microsoft \ Stationery(应用程序数据是隐藏文件夹)。完成后,转到动作>使用新消息...>更多信纸并选择HTML文件作为正文。
  • 雷鸟Thunderbird还可以轻松发送HTML电子邮件。撰写新邮件,然后选择插入> HTML ...并将HTML电子邮件中的所有代码复制到打开的对话框中。您应该将图像上传到在线目录以防止它们丢失,并将HTML代码中的路径更改为新的在线位置。现在,只需像往常一样发送。

为什么这么过时?

HTML电子邮件过时且使用旧技术的主要原因是电子邮件必须遵守这样的一系列客户端。此外,电子邮件客户端的目的不是成为Web浏览器,也不是呈现HTML文档:它是(主要)显示文本 - 因此在开发客户端时,HTML兼容性通常不是首要任务。当包含兼容性时,它通常是有限的,并没有利用该语言的最新进展。

The bottom section of our email: this contains useful links, further reading and additional resources

我们电子邮件的底部:这包含有用的链接,进一步阅读和其他资源

希望本文能让您了解可以在哪些方面进行增强。无论您是否认为应该使用HTML电子邮件,它们都是现代客户经常被忽视的致命弱点。它不像客户端开发人员那么关心,而且HTML本身被低估了。这种情况需要改进,否则将继续强迫开发人员使用过时的技术 - 让他们没有时间专注于最重要的事情:内容。

话题



翻译字数超限