Geekly articles weekly

分发和征服：用于创建和测试新闻通讯的工具



键入电子邮件是一种痛苦。 以交互方式（例如，使用表单和滑块）来布局和测试自适应字母是一个麻烦。 但是，如果您选择了正确的工具，并非一切都还不错。 在本文中，我将讨论电子邮件框架-MJML和电子邮件基础 -以及我最喜欢的测试邮件列表的资源-Litmus和Email On Acid 。

在上一篇文章中，我们了解了新闻通讯的历史是如何开始的以及Outlook在新闻通讯中扮演的角色，还发现了我们现在可以为新闻通讯添加哪些交互功能，以及将来可以添加哪些交互功能。 本文将为今天处理邮件列表的人员讨论工具。


假设您要撰写新闻简报


第一种选择是：创建一个新的HTML文档，准备一个现成的样板（例如，流行的Cerberus或Responsive Email Framework ）并坐下来编写具有内联样式的表，谷歌正在丢失黑客或修复布局的过程中突然丢失了一些用于Android的Gmail。 如果您对字母的布局有一定的经验，有足够的空闲时间，并且任务是布局单个和简单的字母，则此选项非常适合。



Cerberus中可用的现成字母模板的示例


第二种选择：使用在线编辑器创建模板（例如Mosaico或Stripo ）。 这是最简单的方法。 如果您不是开发人员，或者您初次面对布局，并且字母的布局非常简单，那么这是完美的选择。 几乎所有的在线编辑器都提供现成的模板，并且在模板的源代码中还包含一些hack，用于在流行的电子邮件客户端中正确地操作电子邮件。 但是，这些工具实际上不允许您针对特定布局自定义字母的布局，并且通常几乎无法控制字母的代码和外观。



更改Stripo邮件设计器中的信函模板


第三种选择：使用电子邮件框架。 如果您必须定期撰写新闻简报，字母的布局复杂且要求严格，并且要自动化工作流程以及部分开发字母的过程，那么此选项非常适合您。 我将讨论两个最强大的工具： MJML和电子邮件基金会 （在年轻时被称为Ink）。


我们使用现成的电子邮件框架。 j


  • Github： mjmlio / mjml
  • 开发人员： Mailjet
  • 发行日期： 2016
  • 执照：麻省理工学院
  • 人气： 7662+星
  • 模板： MJML

框架中嵌入的主要思想：

  1. 开箱即用的响应模板，
  2. 通过自己的模板引擎简化代码的工作，
  3. 一组准备在信函中使用的组件，
  4. 方便地集成到邮件列表开发过程中。

框架使用相同名称的模板引擎。 它既简单又强大。 忘记标签表，thead，tbody，th，tr，td。 忘记样式需要内联编写。 忘记字母代码的不可读的复杂结构。 使用MJML的电子邮件如下所示：

<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>

只需编写几行代码，而不用嵌套不同级别的HTML表进行复杂的构造，就可以在构建项目时将其转换为字母的有效HTML代码，并对其进行“必要的修改”。



MJML为流行的文本编辑器提供了插件-Visual Studio Code，Atom和Sublime Text。 它们直接在编辑器本身中添加语言语法突出显示，lint和带有排版预览的选项卡。

如果您不想打扰cli或文本编辑器，那么可以使用一个单独的正式多平台桌面应用程序，该应用程序带有一个内置的成熟代码编辑器，一个现成的字母模板查看器以及您的字母的实时预览。



除了一组标准组件（例如按钮或轮播）外，还有现成的自定义组件（例如，用于绘制图形的组件）。 您可以在社区加载项页面上找到有用的实用程序，例如WebPack的MJML加载器或Laravel MJML应用程序的集成工具。 不久之前，它还处于测试版状态，因此可以使用MJML API直接生成电子邮件，例如在移动应用程序内部。 这个东西很具体，但是肯定会找到它的用户。


同时，该框架的主要缺点是其优势之一：“响应能力”。 该框架自动且无需开发人员干预，可以照顾到字母模板在屏幕尺寸较小的设备上的行为。 这转化为网格中的四列约束，并且缺乏调整响应布局行为以适应您的需求的能力。


一个小巧但令人愉悦的细节：在网站上的文档部分中，有一个类似于CanIUse的部分，描述了各种电子邮件客户端中MJML组件的支持。 您可以立即在网站上进行检查，而不会怀疑这封信的行为，例如在Outlook 2007中。



底线： MJML是一个非常强大且易于学习的工具，用于创建响应式电子邮件。 仅当您需要非常精细，像素完美的模板自定义时，才会出现困难。


我们使用现成的电子邮件框架。 电子邮件基础



如果您不是前端世界的第一年，那么您可能听说过（但是-我敢打赌-几乎没有用过；））。 这个由ZURB公司的开发人员创建的框架长期以来一直保持着其在前端Web框架中第二受欢迎的地位（仅次于Bootstrap）。


电子邮件基金会由同一人创建，并且实质上是网站基金会的一部分。 这给他带来了很多好处（一家大型开发公司，一个相当大的社区，您喜欢Foundation for Sites的所有内容）和许多局限性（您不喜欢Foundation for Sites的所有内容都不会在Foundation for电子邮件）。


如果您决定尝试使用该框架，那么要做的第一件事就是安装Foundation CLI：


npm install --global foundation-cli

然后，您可以使用以下命令创建一个新项目：


foundation new --framework emails

然后开始写这封信。


没错，您必须等待几分钟，直到所有必需的模块和组件都装入。 由于下载了大量文件，因此不要对文件夹的大小感到惊讶-空项目的重量将超过400 mb。 除了cli之外，Live Reload还提供开箱即用，基本模板，其中包含所有必要的技巧，现成的模板和部件以及SASS支持。



电子邮件基础项目文件结构


FfE具有自己的模板引擎-Inky。 它的核心功能与MJML模板引擎相同，它简化了使用速记标记处理复杂嵌套表的工作：


 <container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container>

总共大约有十个标签，其中三个用于创建网格（请参见上面的示例），block-grid标签用于创建块网格，另外两个标签是菜单（菜单和项目），另外两个名称不言而喻：button和标注。


FfE使用12列网格，可以将其简化为2、3、4或6列，还可以让您分别为移动和桌面状态设置列数。


使用Panini文件编译器实现零件和助手系统，该编译器内部使用简单方便的Handlebars模板引擎。


与MJML不同，使用FfE时，会创建两个版本的字母-一个用于桌面客户端，一个用于移动客户端。 接下来，确定要切换桌面/移动状态的断点，还可以使用特殊的类（.hide-for-large和.show-for-large）启用或禁用布局的任何块。


底线：电子邮件基金会可以完全控制其桌面和移动状态下的字母布局。 由于框架很大且很复杂，因此在将其浸入框架以及尝试处理其细微之处时可能会遇到困难。 但是，如果您想控制模板的各个方面，则可以选择Foundation for Emails。


通讯测试工具


因此，我们的新闻通讯已经准备就绪。 在浏览器中看起来很棒。 那么Outlook和移动电子邮件客户端呢？ 现在该转向专门服务来测试新闻了： Litmus和Acid on Email 。


测试石蕊通讯



Litmus提供了测试邮件列表时可能需要的一整套工具。 这是一个用于编辑html代码（Builder）的Web端，一个邮件分析系统以及一组“清单”（性能测试工具，检查电子邮件中的垃圾邮件等等）。


最重要的“清单”-电子邮件预览-使您可以在90多个台式机/手机/网络电子邮件客户端中检查电子邮件。 单击几下即可完成此操作。 您需要在生成器中插入字母代码，单击测试按钮，然后选择必要的电子邮件客户端。



最近，开发人员添加了一个很酷的功能：电子邮件客户端（已处理的html）处理的html代码的检查器。 看起来有点像您喜欢的浏览器的开发工具中的检查器：您可以选择消息的特定区域并查看其代码。 这有助于分析特定于客户的问题，而无需进行盲目编辑，然后在“电子邮件预览”中查看结果。



在Litmus中查看已处理的HTML


我发现石蕊有两个缺点。 首先是整个UI的无响应性，并且电子邮件预览时滞不时发生，这使您花费大量时间等待创建预览并重新启动测试。


第二减：价格。 最低订购选项将花费您80美元/月。 而且，所选计划直接影响将可用的字母预览的数量。 因此，我建议您仔细考虑您是否真的需要石蕊，或者是否可以选择更便宜的替代品。


在酸性通讯上测试电子邮件


我想谈的第二项服务是“酸中邮件” 。 在几乎所有方面，可以将其安全地称为石蕊的“小兄弟”。


自己判断：这里有一个用于编辑新闻通讯的网络端，有分析信件的工具，有针对垃圾邮件的测试，当然，在70多个应用程序中也有电子邮件测试。


字母的预览与Litmus中的预览几乎相同。 区别主要在于外观，选项/设置略小，没有检查过的字母代码检查器以及其他一些不太有用的工具。 但是，UI EoA比Litmus更方便，更容易，并且几乎没有滞后。 测试电子邮件的速度大约快了一半半。



最后一个重要因素：价格。 具有类似功能的Email on Acid是石蕊的一半价格。 而且对您的信件预览的数量没有限制。 这些是EoA无疑的葡萄酒。


选择什么？


上述工具花费了很多钱。 我认为，仅当您每月至少几次连续地组成相当复杂的电子邮件并且对各种电子邮件客户端（尤其是移动电子邮件客户端）的支持有严格要求时，才需要持续使用它们。


如果您偶尔发送邮件，则有两个替代选择：


  1. 在7/14天（取决于服务）中使用试用石蕊/酸液化电子邮件（取决于服务）-第一个月的钱将退还到您的卡中；
  2. 结合使用具有免费计划的较不受欢迎的服务，并手动测试电子邮件客户端。

以下是一些可以免费使用的服务，但程度有限：


  1. PreviewMyEmail （适用于Chrome / FF / IE的Gmail，Thunderbird，适用于iOS7的Apple Mail）；
  2. InboxInspector （Thunderbird 2/3，Outlook 2003/2007/2010 / Outlook Express）;
  3. DirectMail （Outlook 2003，IE中的Gmail）；
  4. Putsmail + PilotMailer （在线服务，用于将字母代码发送到任何地址，便于手动测试新闻稿）；

从长远来看，无论您选择什么，主要是该工具可以满足您的需求。


结论


布局编码器的工具范围现已达到开发水平，我们不仅可以使用方便的框架来开发字母和用于测试字母的应用程序，还可以为我们的任务和功能选择合适的框架。


如果您很少打字母，而且通常都很简单-可以随意选择基本的样板，“手动”打样和测试。 或者，使用免费服务进行测试。


如果您必须定期处理排版字母，并且布局遇到复杂且适应性强的问题，那么MJML和电子邮件基金会将承担一些责任。 Limus和Acid上的Email可以节省大量时间和神经细胞，以击败Android上的某些烦人的Outlook或Gmail。


您选择哪种方式？ 分享评论。

Source: https://habr.com/ru/post/zh-CN429772/

More articles:


All Articles