HTML电子邮件的完整指南

前端小工
2,160 阅读15分钟

内容表

下面你会发现快速跳转到你可能需要的特定组件。向下滚动以了解总体情况。或者跳过目录。

开始使用HTML电子邮件

如果你只是想了解发生在古怪的HTML电子邮件世界幕后的一切，Caity G. O'Connor发表了一篇关于如何开始使用电子邮件编码的精彩指南。这篇文章介绍了课程、教程、文章，以及在构建和设计电子邮件时需要注意的一般准则--所有这些都在一份全面的单页指南中。在SmashingMag上，Lee Munroe也发表了一篇关于构建和发送HTML电子邮件的详细指南。

另外，《如何为任何设备编码HTML电子邮件》是一本非常全面的指南，介绍了如何建立一个可靠的HTML电子邮件模板，以及如何对其进行测试--同时还有一个从头开始建立通讯模板的实践案例。总的来说，这是一个非常扎实的概述，介绍了你需要知道的一切，让你在正确的道路上起步。

杰森-罗德里格斯（Jason Rodriguez）有一个关于HTML电子邮件的详细视频课程（不是免费的），包含了关于HTML电子邮件的几乎所有知识，从可访问性到故障排除、工作流程和工具。

如果你发现自己在为一个电子邮件问题挣扎，或者只是想从一个社区寻求一些帮助，#emailgeeks是一个很好的起点。这是一个只接受邀请的Slack社区，有很多频道可以讨论代码、设计、工作机会、活动和新工具及资源。你也可以在Twitter上找到许多以#emailgeeks为标签的资源分享。

HTML电子邮件语言和框架

在所有流行的电子邮件客户端中编写干净的、响应式的电子邮件，并提供可靠的体验，这可能是一个耗时的挑战。HEML就是要改变这种状况。这种开源的标记语言为你提供了HTML的原生能力，而不必处理所有的电子邮件怪癖。没有特殊的规则或造型范式需要掌握，所以如果你知道HTML和CSS，你就可以开始了。

MJML也是基于简化创建响应式电子邮件的过程这一想法。这种标记语言基于一种语义语法，使这个过程变得简单明了，而一个开源引擎则负责繁重的工作，把你写的MJML翻译成响应式HTML。你可以通过MJML的一步步教程开始。

一个标准组件库为你节省了额外的时间并减轻了你的电子邮件代码库。而如果你想建立你自己的，模块化模板系统指南可能也有帮助。

说到节省时间。我们都知道，HTML电子邮件需要一个又一个的表格才能正常工作--而构建这些表格是多么的乏味。这就是Inky的用武之地。该模板语言将简单的HTML标签如<row> 和<columns> 转化为复杂的表格HTML，这样你就不需要费心了。

基于Tailwind CSS的HTML电子邮件框架

让HTML电子邮件在不同的电子邮件客户端上运行并不是一件容易的事。幸运的是，有很多可靠的工具、模板和框架可以使你的工作更容易完成。例如，Maizzle是一个框架，可以帮助你利用Tailwind CSS和先进的、针对电子邮件的后处理快速建立HTML电子邮件。它还提供一些现成的项目（Maizzle Starters），你可以立即开始使用。

Maizzle使用Tailwind CSS框架，使设计师和开发人员能够轻松地用HTML和CSS制作电子邮件原型。如果你不想从头开始开发每一封邮件，它还配有漂亮的模板。另外，你也可以考虑MJML。

基于Sass的HTML电子邮件框架

Foundation for Emails可以帮助你制作响应式的HTML电子邮件，并能与所有主要的电子邮件客户端，甚至是Outlook很好地配合。基于网格的方法确保你的邮件在任何设备上都能运行，UI模式和CSS内嵌器让邮件快速成型，而Sass让你控制常用的样式。无论你在做什么，从交易性的电子邮件到滴水活动和新闻简报，都可以选择响应式的模板，这样可以节省你的时间，让你可以花在你的文案或转换漏斗上。

无懈可击的HTML电子邮件模板

Cerberus和HTML Email为响应式HTML电子邮件提供了一些可靠、可靠的模板，这些模板在50多个电子邮件客户中经过了良好的测试，包括Gmail、Outlook、Yahoo、AOL和许多其他客户。EmailFrame.work允许你用预先建立的网格选项和基本组件建立响应式HTML电子邮件模板，支持超过60多个电子邮件客户端。

Codedmails包括60个电子邮件模板和主题，全部用MJML编写，并经过兼容性测试。代码都可以在Github上找到，模板可以免费用于非商业项目，而MJML源文件则需要额外付费提供。

Stripo、Chamaileon、Postcards、Topol.io、GoodEmailCode、Pixelbuddha和Bee Free都有大量免费的HTML电子邮件模板，Litmus为通讯、产品更新和收据提供响应式电子邮件模板，CampaignMonitor有一个免费的HTML电子邮件模板构建器，具有拖放功能。另一个值得考虑的拖放式编辑器是Unlayer。它可以帮助你创建可移动的HTML电子邮件模板，只需点击几下，不涉及编码。

HTML电子邮件功能支持。我可以用电子邮件...吗？

Caniemail.com是一个方便的工具，它属于每个发现自己在处理HTML电子邮件的人的工具集--无论是偶尔还是定期--。受caniuse.com成功概念的启发，_Can I email_让你检查31个电子邮件客户端对179个HTML和CSS功能的支持。

你可以输入一个功能来查看它的支持程度，检查功能索引，比较电子邮件客户，或查看电子邮件客户支持情况的记分牌，根据其支持情况对电子邮件客户进行排名。完整的数据也以JSON文件的形式提供。

电子邮件缺陷的储存库

苹果邮件不显示嵌入的SVG，Gmail不以全宽显示邮件，Outlook改变动画Gifs的行为--我们都知道电子邮件客户端有时表现得很奇怪。

为了帮助你了解当你遇到类似这些错误时发生了什么，Rémi Parmentier维护了电子邮件错误，这是一个关于奇怪的电子邮件客户端行为的GitHub存储库。它不仅通过提供一个讨论bug的地方使电子邮件设计者的生活更容易，而且还试图将每个bug报告给有关公司，并永久地修复它们。但万一这是不可能的，How to Target Email Clients提供了一个针对特定邮件客户端的变通方法的概述。

邮件链接生成器

好的老式HTML链接可以做得比我们通常给予它们的荣誉更多。我们可能已经习惯了mailto: 前缀，但实际上生成代码可能是相当烦人的。Mailtolink.me做了一件事，而且做得很好：它为mailto 链接生成代码段，包括抄送、密送、主题行和正文。

邮件地址选择提示

有时当你点击一个电子邮件地址时，它可能会打开一个你的客户并不真正使用的应用程序。这就是为什么人们通常会复制粘贴电子邮件地址，而不是直接点击链接。为了避免另一端的挫败感，我们可以使用Mailgo和MailtoUI。

这两个工具都没有打开原生的电子邮件客户端，而是提示一个模态窗口，让用户选择一个首选的服务，或者复制粘贴链接。此外，Mailgo也可以解决所有tel ，允许他们打开Telegram、WhatsApp、Skype，作为默认呼叫或复制电话号码 - 而且它也支持黑暗模式。

电子邮件的灵感

这似乎只是因为HTML电子邮件感觉相当古老和过时，所以我们可以用HTML电子邮件做什么的可能性也很大。然而，有很多资源、博客和播客都在介绍新的电子邮件技术--其中一些往往是非常有创意的东西

无障碍的电子邮件

对于电子邮件，我们在_无障碍性_方面的立场如何？我们是否向屏幕阅读器正确地公布了电子邮件？黑暗模式如何？Accessible Email repo突出了一些关于无障碍性的文章、工具、介绍和资源--不仅是针对电子邮件，而且是最具体的。

通过Accessible-Email.org，你可以分析已发送的活动并检查无障碍性的改进。通过Dark Mode for Email Simulator，你可以检查你的邮件在黑暗模式下的样子。

内联CSS和转化HTML邮件

如果你只需要一个干净的空间来变换你的HTML和CSS，Alter.Email是一个可靠的选择。通过该工具，你可以选择一些 "转化器"--例如内联CSS和清理代码，删除未使用的CSS，以及格式化HTML，甚至防止寡言。另外，你也可以使用Postdrop，它也允许你最小化和内联CSS，并发送一个测试邮件。

删除电子邮件模板中未使用的CSS

对于HTML电子邮件来说，编写CSS并不是一个特别令人兴奋的任务，到处都是!important 和内联样式。要从电子邮件模板中删除未使用的CSS，可以使用Email Comb。该工具允许你添加你想忽略的类和ID，选择你是否想将其最小化和删除注释，并显示它所删除的具体内容。

瞄准电子邮件客户端的小技巧

电子邮件客户修改和删除你的一些HTML和CSS，往往是无情的。如果其中一个电子邮件客户端的行为不尽如人意，你可能想把它分开处理。针对电子邮件客户端的小抄可以让你挑选一个目标电子邮件客户端，至少尝试直接解决它。由于电子邮件客户端一直在变化，它可能不是一直有效，但这是值得一试的。

一切HTML电子邮件资源

Thebetter.email提供了一个不断增长的有用的电子邮件营销资源库，包括人员、学习网站、工具、关于电子邮件服务提供商的细节、新闻简报、代码和互动的电子邮件资源。由Jason Rodriguez亲自挑选，他在这个行业已经有多年的经验，并且花了很多时间从淤泥中寻找好东西。

电子邮件营销资源

如果你需要深入了解HTML电子邮件、最佳实践和电子邮件营销，CampaignMonitor指南和Mailchimp指南有很多资源可以开始使用。的确，其中一些是针对产品的，但它们也是围绕着发送电子邮件的最佳实践、设计指南、交付技巧、反垃圾邮件要求和大量其他类似主题的一般性指南。

如果你正在寻找电子邮件营销的持续趋势，甲骨文的电子邮件营销趋势包括大量围绕电子邮件交付能力、模块化电子邮件架构、电子邮件可及性和电子邮件营销的视频。

Gmail和Outlook的黑暗模式

我们都已经习惯了许多应用程序和网站中的黑暗模式，但HTML电子邮件客户端中的黑暗模式支持呢？当然，我们可以向所有用户提供相同的电子邮件，但如果你在你的操作系统上已经习惯了黑暗模式，那么明亮的电子邮件可能反而会引起反感并鼓励放弃。

电子邮件中的黑暗模式开发者指南》强调了一些重要的指导方针，当你为你的HTML电子邮件建立一个黑暗模式版本时，要牢记在心。它解释了如何针对黑暗模式，如何处理图像和一般的浏览器支持（这是很好的！）。

Rémi Parmentier更深入一点，展示了如何用CSS混合模式修复Gmail的黑暗模式问题。Gmail强制将任何浅色文本颜色改为深色文本颜色。如果你需要修复它，Rémi想出了一个创造性地使用mix-blend-mode （Gmail中支持）来维持浅色文本的颜色。而如果你需要确保你的邮件响应Outlook.com的深色模式，雷米也为你提供了保障。

HTML电子邮件开发IDE

如果你花了相当多的时间处理HTML电子邮件，你可能想使用一个专门的HTML电子邮件编辑器。Parcel就是这样：一个专门为编码和设计电子邮件而建立的代码编辑器。它提供实时预览，所以你可以实时看到你正在构建的内容，而且它还具有开箱即用的无障碍功能，所以你可以在构建或设计电子邮件时检查无障碍问题。此外，该工具还允许你与你的团队合作，直接从该工具中运行电子邮件测试。

另外，你也可以看看Mail Studio，这是一个复杂的桌面应用程序（适用于Windows、macOS和Linux），在一个电子邮件IDE中结合了视觉和代码编辑。

该应用程序有一个组件库，从标题到导航条和手风琴，还有几个响应式电子邮件模板，谷歌字体集成，内置Sass支持，命令调色板，协作工具，电子邮件预览，甚至与电子邮件服务提供商如MailChimp、Campaign Monitor和Sendgrid集成。Figma的集成应该很快就会到来。

生成全页的电子邮件预览

如果你需要对你的HTML邮件进行全页预览，Emailpreview.io可能正是你所需要的。你可以复制/粘贴HTML，或导入你刚收到的EML文件，该工具会输出你的电子邮件的完整渲染图像。你也可以选择设备的宽度。这是一个有用的小工具，可以放在附近。

邮件跟踪器拦截器

大多数营销邮件在HTML邮件中都包含追踪器，所以他们可以追踪客户打开邮件的频率、时间和地点。MailTrackerBlocker的作用与浏览器的广告拦截器差不多，但也适用于电子邮件客户端。该工具标明谁在跟踪客户，并在显示之前删除跟踪像素，因此你仍然可以加载所有远程内容，并保持你的行为隐私。目前只适用于macOS 10.11 - 11.x的苹果邮件_（向Jeremy Keith致敬！_）。

让电子邮件变得更好

溢出的收件箱、带有反向链接请求的垃圾邮件、人们在周五下午给你发邮件，周一早上才跟进--有很多事情让处理电子邮件变得不愉快。然而，既然无法绕过电子邮件，那么就只有一个解决办法。让我们一起改善这种情况。考虑到这一点，Chris Coyier正在经营 "电子邮件是好的"，一个关于电子邮件生产力的网站。

"电子邮件是好的 "审视了使电子邮件令人讨厌的事情，关于我们如何能做得更好的提示和想法，以及每个人都可以涉及的小轶事。这是一个反思我们每个人如何处理电子邮件以及我们的电子邮件习惯可能在收件人方面引起的反应的好机会。

总结

我们可能遗漏了一些重要的、有价值的技术和资源!因此，请留下评论并参考它们--我们很愿意更新这篇文章，让它成为我们大家的最新资料，以便能够回到这里，更好、更快地建立HTML电子邮件。

保持精彩!

进一步阅读

avatar
文章
阅读
粉丝