设计响应式企业邮箱并不容易。
这是因为呈现企业邮箱很复杂。 当企业邮箱到达其预期收件箱时，它已经经过了多层渲染。 事实上，Litmus 声称每封企业邮箱可能有 300,000 次演绎。
但反应性企业邮箱是不可避免的，对吗？
作为一名编码员，您习惯于编写复杂的媒体查询以使企业邮箱布局适应不同的设备。 这需要时间。
更不用说维护代码的负担了； 随着新设备和屏幕尺寸的出现，您需要更新媒体查询以保持响应能力。
缓慢的编码、多次迭代、延迟的传输以及随之而来的一切！ 我们理解你。 我们了解企业邮箱开发的来回、乒乓球过程。
但是，您可以通过求助于 MJML，摆脱这种例行公事，双手插在口袋里。
读完本文后，您将了解什么是 MJML 企业邮箱以及如何利用 MJML 框架更快地编写响应式企业邮箱代码。 从一开始 ！
什么是 MJML？
MJML 是 Mailjet 标记语言的缩写，是一个旨在简化响应式 HTML 企业邮箱编码的框架。 MJML 将响应能力构建到代码中，因此您无需编写复杂的代码即可实现与企业邮箱客户端无关的渲染。
根据 MJML 文档，MJML 是一个转译器。
转译器是一种将一种代码语言转换为另一种语言的程序。 它充当编程语言之间的一种转换器。
MJML 也被认为是一个抽象层，这是计算机科学中的一个概念，指的是向用户隐藏系统复杂性的东西。
以下是 MJML 的一些好处：
- 语义语法允许企业邮箱开发人员轻松直接地进行编码，从而提高他们的工作效率。
- 其广泛的标准组件库简化了企业邮箱代码库并加快了开发过程。
- MJML 的开源引擎可以创建出色的 HTML 企业邮箱。
- 作为一个开源框架，MJML 受益于大型贡献者社区，他们不断改进框架并向开发人员提供支持、文档和资源。
- 通过使用 MJML，您可以避免 HTML 表的复杂嵌套以及企业邮箱客户端特定 CSS 的需要。
- MJML 处理不同企业邮箱客户端的许多特性和不一致，提供更一致的渲染体验并减少对特定于客户端的 CSS 黑客的需求。
如何使用 MJML 发送企业邮箱？
请按照以下步骤对 MJML 企业邮箱进行编码：
- 你从
<mjml>标签。 这<mjml>该标签充当 MJML 文档的基础。 它包括将用于创建企业邮箱的所有内容。
- 然后你添加
<mj-head>标记其中，类似于<head>HTML 中的标签将包含 head 部分的所有信息。
- 当到达企业邮箱正文时，
<mj-section>该标签将其分为包含列的部分（<mj-column>）和文本（<mj-text>）。
- 使用以下命令为按钮、图像和表格添加相关标签
<mj-button>, <mj-image>和<mj-table>分别。 - 继续为您的导航栏、社交共享、英雄横幅、手风琴、轮播等添加相关的 MJML 标签。 您还可以创建自定义 MJML 组件。
以下是使用 MJML 设计的简单欢迎企业邮箱的示例。
这就是欢迎企业邮箱的样子。
完成编码后，请转到 MJML 在线编辑器。 单击左下角的“渲染”按钮，然后单击左上角的“HTML”选项。 生成 HTML 代码后，您可以通过您首选的 ESP 发送企业邮箱。
MJML 与 HTML：有什么区别？
从概念上讲，两者之间的主要区别在于 HTML 是用于构建网站、移动应用程序和企业邮箱上的内容的标准标记语言，而 MJML 是专门为创建响应式企业邮箱而设计的。
与在呈现方面本质上并不友好的 HTML 不同，MJML 使得在主要企业邮箱客户端上编码和呈现企业邮箱变得简单。
让我们看另一封简单的欢迎企业邮箱。 下面是用 HTML 和 MJML 编写的企业邮箱之间的比较。 请注意这两种情况的复杂性和长度。
1.MJML代码
2.HTML代码
<!doctype html>
<html xmlns=" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> </title>
<!--(if !mso)><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<!(endif)-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--(if !mso)><!-->
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<!(endif)-->
<!--(if mso)>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<!(endif)-->
<!--(if lte mso 11)>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<!(endif)-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.full-width-mobile {
width: 100% !important;
}
td.full-width-mobile {
width: auto !important;
}
}
</style>
</head>
<body>
<div style="">
<!--(if mso | IE)>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<!(endif)-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--(if mso | IE)>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<!(endif)-->
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:100px;"> <img height="auto" src=" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;" width="100" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size:0px;padding:10px 25px;word-break:break-word;">
<p style="border-top:solid 4px #F45E43;font-size:1;margin:0px auto;width:100%;"> </p>
<!--(if mso | IE)>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #F45E43;font-size:1;margin:0px auto;width:550px;" role="presentation" width="550px"
>
<tr>
<td style="height:0;line-height:0;">
</td>
</tr>
</table>
<!(endif)-->
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;color:#F45E43;"> Hello World </div>
</td>
</tr>
</table>
</div>
<!--(if mso | IE)>
</td>
</tr>
</table>
<!(endif)-->
</td>
</tr>
</tbody>
</table>
</div>
<!--(if mso | IE)>
</td>
</tr>
</table>
<!(endif)-->
</div>
</body>
</html>这就是企业邮箱的样子。
MJML 的局限性
使用 MJML 创建企业邮箱时，您可能会遇到以下问题：
- 背景图像可能无法在某些企业邮箱客户端上正确显示。
- Outlook 并不总是正确解释 MJML 默认添加的 CSS 类，从而导致移动布局受损。
- 转换后的 HTML 代码可能很复杂并且包含错误。
- 转换后的 HTML 代码通常很长。 因此，您需要“缩小”代码。 MJML 在线编辑器提供了缩小代码的选项。
- 自动 MJML 转换可能并不总是在不太流行或较旧的企业邮箱客户端中产生所需的结果，需要额外的测试和调整以确保企业邮箱客户端之间的兼容性。
- 尽管 MJML 提供了各种预构建组件，但该框架对于高度个性化的企业邮箱设计来说灵活性较差，可能需要依赖传统的 HTML 和 CSS，从而限制了自定义选项。
- MJML 中的抽象层有时会导致 HTML 输出臃肿，从而影响企业邮箱加载时间并影响较慢连接或设备的性能。
- MJML 的调试工具不如纯 HTML 和 CSS 的调试工具广泛，这可能会使复杂企业邮箱设计的故障排除变得更加困难。
MJML 的注意事项
让我们快速浏览一下使用 MJML 的注意事项。 首先，要做的事情：
- 使用 MJML 在线编辑器： 使用 MJML 在线编辑器快速测试和渲染您的 MJML 代码。 它提供实时预览，可以帮助您更早地发现问题。
- 利用预定义组件： 利用 MJML 丰富的预定义组件库来加快您的开发过程并确保设计的一致性。
- 验证并优化结果： 始终验证和优化 MJML 生成的 HTML 输出。 使用工具来缩小和清理代码，以确保更好的性能和可交付性。
- 定期更新MJML： 将您的 MJML 框架更新到最新版本，以便从新功能、改进和错误修复中受益。
- 在多个客户端上测试： 尽管 MJML 旨在提供跨客户端兼容性，但请务必在多个企业邮箱客户端和设备中测试您的企业邮箱，以确保它们按预期显示。
最后，不该做的事情：
- 不要仅仅依赖 MJML 的默认设置： 尽管 MJML 具有良好的默认设置，但不要单独依赖它们。 根据需要自定义您的样式和布局，以满足您的品牌和设计要求。
- 避免过于复杂的设计： 不要使用过多的嵌套和复杂的布局来使您的企业邮箱设计过于复杂。 更简单的设计更有可能在不同的客户端上一致地呈现。
- 不要忽视企业邮箱客户端的限制： 请注意不同企业邮箱客户端的限制和特定功能。 例如，Outlook 可能无法正确处理某些 CSS 属性，即使 MJML 在其他客户端中处理这些属性也是如此。
- 不要跳过文档： 避免忽视 MJML 文档和资源。 它们提供了有价值的信息和最佳实践，可以帮助您充分利用该框架。
- 不要忽视可访问性： 不要忽视企业邮箱的可访问性。 通过使用语义 HTML 标签并为图像提供适当的替代文本，确保残障用户可以访问您的 MJML 企业邮箱。
反应灵敏、负责任的代码！
MJML 是复杂编码最流行、最实用的替代方案之一。
话虽如此，除了专业知识之外，没有明确的替代方案。 企业邮箱很复杂，企业邮箱客户端也是不可预测的。 虽然 Gmail 和其他客户端开始支持更好的渲染功能，但由于其开放平台性质，企业邮箱仍然缺乏普遍接受的编码标准。 因此，负责任的企业邮箱编码与响应式编码同样重要。
我们的文章仅介绍 MJML 企业邮箱的基础知识。 这应该会给你一个良好的开端。 但如果您想进一步调查，请查看 MJML 文档。
