上周的 ShopTalk Show 全部关于 HTML 邮件。这是一个如此引人入胜的话题,从技术上讲,它是前端网页开发,但它几乎感觉像一个怪诞的平行宇宙。
我们需要担心数十种浏览器,他们需要考虑数百个客户端。我们担心新 API 是否受支持,他们担心填充是否受支持。我们有网格布局,他们有…… 网格布局?!
很容易开个玩笑:“编码就像 1999 年一样!”,但正如我们在这一集中讨论的那样,这并不完全正确。
除此之外,另一件我认为很吸引人的事情是所有相关的工具。让我仔细想想。
创建工具:原生 HTML
您可以仅使用 HTML 创建电子邮件。我相信很多 HTML 邮件都是这样创建的。打开代码编辑器,创建 HTML 邮件,发送 HTML 邮件。我知道我很容易被这吸引,并且经常走这条路,尤其是在创建重要的单次发送邮件时。

查看 CodePen 上的 Really Good Emails,他们已存档了大量已发送邮件活动的完整 HTML。
Litmus 中的构建器工具也是一个原生 HTML 编辑器。您可以查看和编辑整个 HTML 文档。
创建工具:HTML 模板
它仍然是手动创建和手动编写 HTML,但您可以使用 HTML 邮件模板。对于我们大多数人来说,这可能是一个非常好的途径,因为 HTML 邮件很难正确设置。幸运的是,很多关于弄清楚具有功能布局和类型的漂亮简单的电子邮件模板的艰苦工作已经完成了。
- Lee Monroe 提供了一个 非常简单的响应式 HTML 邮件模板 并 出售一包 更多模板。
- Cerberus:“一些用于响应式 HTML 邮件的简单但可靠的模式。”
- MailChimp 在 GitHub 上有 电子邮件蓝图。不过,它们已经 3 年没有更新了,我不确定这是否意味着它们错过了 HTML 邮件开发中的任何新的/大型的/重要的技术。
- TABLE TR TD 有 一个构建模板。
- 如果您将电子邮件发送给 99designs,看起来他们会 发送一些 给您。

创建工具:抽象模板
通过直接使用一大块复杂的 HTML 来创建电子邮件当然是可以的,但前端开发人员几乎从不以这种方式工作。我们始终追求的第一个抽象是将 HTML 抽象成部分。您也可以在电子邮件中这样做。

- 您可以使用您自己的服务器端部分将 HTML 分解成部分,以便创建新电子邮件时可以重复使用这些部分,从而更快地构建并更容易维护。
- Dan Denney 有一个名为 系统 eMMail,它使用 Middleman、Haml 和 Sass 将电子邮件抽象成可管理的部分。
- Lee Monroe 有一个 Grunt 电子邮件设计工作流,它使用 Handlebars/Assemble 和 Sass 将电子邮件拼凑在一起。
- Foundation Emails 使用一种名为 Inky 的抽象 HTML 语言,该语言编译成可用于电子邮件的 HTML。
- MJML 也是一种抽象的 HTML 语言,旨在预处理成用于电子邮件的 HTML。

UI 构建器和发送工具
无需接触任何代码,您就可以直接通过为此构建的工具设计和编写电子邮件。对于大多数人来说,这些选择可能非常明显,因为对此有巨大的需求。这是理所当然的!此类工具可以让您直接开始编写和设计电子邮件,而不会因工具而分心。
并非所有发送的电子邮件都可以使用此类工具。对于非常庞大的电子邮件列表,它们通常成本过高,并且并非真正为交易性电子邮件而构建。
这些工具倾向于将电子邮件的可视化构建与发送和分析结合起来。一切都在一个地方。
Sendwithus 有点不同。它是为交易性电子邮件而构建的,并为您提供构建和模板化电子邮件的系统,但本身不直接发送电子邮件(尽管名称如此)。您可以自带电子邮件发送服务。说到这里……
发送工具:API
这些服务实际上会为您发送电子邮件。您使用电子邮件本身、主题行、收件人和他们需要的任何其他内容来访问他们的 API,它就会发送电子邮件。以下是非详尽列表

分析通常是这些发送工具附带的功能。对于这些电子邮件 API 以及构建和发送应用程序来说都是如此。
内联 CSS 工具
我一直认为这对 HTML 邮件绝对是 100% 必要的,但事实并非如此。大多数电子邮件客户端都支持<head>
中的<style>
块。这意味着您可以在无需内联的情况下发送 CSS。即使在支持的情况下,您也需要考虑哪些功能受支持。例如,仅仅因为支持样式块,并不意味着border-radius
也一定支持。

即使上面的红色标记也已过时,因为 Gmail 现在确实支持样式块。因此,内联 CSS 最终可能会消失,但我认为仍然有一些电子邮件客户端需要它,如果它本身是构建过程的一部分,我想它不会造成任何伤害。
复制粘贴浏览器内工具

编程工具
测试工具
- 您可以给自己发送一封电子邮件并查看它。最好是在尽可能多的电子邮件客户端中启动,跨不同的操作系统和设备。
- Litmus 是该领域最大的参与者。许多其他提供电子邮件预览的工具实际上都是 Litmus 在执行这项工作。
- Email on Acid 是一款类似的工具,价格略低。

我正在使用Foundation for Emails,就我个人而言,我发现它是目前最好的完整工具。同时,我想在 gulp 文件中添加Litmus 或Acid 的测试。无论如何,很大的区别在于您是否使用 MAT 以及您是否有一些限制
这太棒了,感谢分享。另一个值得在这里提到的工具是 https://beefree.io/,您可以轻松创建漂亮的 HTML 响应式模板并将其导出到 MailChimp 和其他工具。
嘿,伙计 - 我们一直在构建一个工具,它位于 UI 构建器/抽象模板区域(因为这是流程中看起来最“糟糕”的部分)。它位于 taxiforemail.com,如果你有空,我很乐意向你展示更多信息。
除了 MJML 之外,我们还使用了一个很棒的小服务 Image-Charts(https://image-charts.com)。我发现它对于将动画图表嵌入电子邮件中非常有用 :)
哇,这些东西太棒了。谢谢!
谢谢 Chris!很高兴我在 Twitter 上看到了这个。现在我可以进入 OmniFocus 并勾选“学习如何编写电子邮件模板”。
嘿,Chris,兼容性图表上的红色标记是正确的,你不能在正文中使用样式块。它们在头部像往常一样工作,但 Gmail 会删除头部以外的任何样式块。整个问题与内联无关,并且可能不会经常出现。
值得注意的是,对于 Gmail 的 POP/IMAP 版本,CSS 仍然需要内联。
更多信息请访问:https://litmus.com/blog/everything-gmail-rendering-webinar-recording-qa
很棒的文章。对那些电子邮件开发者来说,这是一个很好的曝光机会!
有帮助的文章,Chris!这些是一些很棒的资源!您列表中遗漏的一个方便的电子邮件构建应用程序是 CoffeeCup Responsive Email Designer。我是一个非编码人员,并且能够每周使用它来创建我公司的时事通讯。我喜欢它允许您有条件地为 Outlook 设计,因此我可以确保这些读者仍然收到外观漂亮的邮件,同时仍然能够为更友好的电子邮件客户端进行创意设计。https://www.coffeecup.com/email-designer/
值得一提的是 ElasticEmail 及其发送工具。
我最近不得不检查我所能找到的所有东西的价格,它们是最便宜的,即使添加了专用 IP。
感谢分享。我一直在寻找一个像这样的电子邮件客户端,它具有经济实惠的专用 IP。谢谢!
我认为您可以考虑使用此工具:http://edmdesigner.com/ 界面看起来有点旧,但它是创建高度兼容的响应式电子邮件模板的最佳所见即所得应用程序。节省的时间确实相当可观。
读到如今 Web 开发人员在编写 HTML 方面遇到的巨大困难很有趣。在做了 13 年之后,我并不知道。
去年我发现了 MailStyler 并经常使用它。他们上周给我发了邮件,说他们发布了 2 版,这是一个重大更新。我正在使用免费版,并且很喜欢它:http://www.newslettercreator.com
MMS
使用 Mac 的用户也需要查看我们正在构建的应用程序 - Mail Designer Pro - 一个用于创建时事通讯的原生 Mac 应用程序(可以将其视为电子邮件领域的 Sketch)。
干杯!
Adrian
很棒的资源汇总,感谢您提到 AWeber!我们一直在这里对 MJML 进行很多实验,并用它制作了一些有趣的东西。例如:AWeber 的宠物
继续努力,做一些很棒的事情。
值得为英国用户添加 Pure360、Intercom 和 Sensorpro 到电子邮件工具中 - 我们非常喜欢他们的新设计器和良好的技术支持。
不要忘记 Mail Hog!
https://github.com/mailhog/MailHog
一位该产品的工作人员给我发送了一封电子邮件。
Chamaileon: