响应式邮件设计工具推荐

响应式邮件设计工具推荐

最近工作上需要做一些HTML邮件模版，就是在平时邮箱里收到的那种推广邮件。深入研究之后，才知道这坑有多深。

回到蛮荒时代

最初我的理解是，既然是HTML，我大前端的看家本领！半小时搞定没啥问题。试了才知道，HTML邮件没有任何标准，而且不管是HTML和CSS全部都是被阉割了的（啥？你还想用JS？），并且不同邮件客户端之间差异也很大。对于div和float的处理也带有很多的不确定性，所以浮动布局，flexbox啥的一样也用不了，只能用90年代流行的表格布局，90年代啊！开发体验是奇差无比，更重要的是我并不想去学过时的table布局。

我这次的要做的是出模版，服务端套，还需要考虑到收件人可能用的是手机客户端查看的邮件，所以需要响应式。对于我来说，可以拖拽的邮件工具肯定是不合适的，它并不能很好的实现设计和需求，况且作为一名开发者应以它为耻。

找工具

1. foundation-emails

首先GitHub找到了foundation-emails，扫了一下文档和DEMO，感觉非常好用，还能用sass，狂笑！！等模版做完了，按照文档npm run build 文档上说这是把所有样式插到行内（没看到会压缩啊），当我执行之后，我看到的是这样的画面。

还是要在build的之前往里面插入服务端模版引擎的循环语句？只能手动去格式化html代码再加循环？我首先试了试第一个在模版里面想替换的地方加几个模版引擎常用的{{ }}，结果build之后，直接就编译没了，再去GitHub看看,找到了这条还没有修复的issue，看来大家都还没什么优雅的办法。

对于只需要替换个用户名或者只有少部分内容需要动态的邮件，foundation-emails是非常不错的选择，在其中使用响应式非常非常简单，格栅布局，就像这样

<columns large="6" small="12">

2. mjml

在社区里找到了这款工具，用它写的模版大概是这样的， 也很不错。

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-image src="/assets/img/easy-and-quick.png"  width="112"></mj-image>
          <mj-text font-size="20px" color="#595959" align="center">Easy and Quick</mj-text>
        </mj-column>
        <mj-column>
          <mj-image src="/assets/img/responsive.png" width="135"></mj-image>
          <mj-text font-size="20px" color="#595959" align="center">Responsive</mj-text>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-button background-color="#F45E43" font-size="15px">Discover</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

而且它还有客户端，客户端中可以导出html，导出的代码还算清新。动态替换的内容，我通过官方demo中发现用[[ ]]包裹就没什么事了。

写在最后

这篇就是推荐俩工具。如果需要，请留言留言，我可以出个小教程啥的，完！