响应式邮件设计工具推荐

响应式邮件设计工具推荐

最近工做上须要作一些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中发现用[[ ]]包裹就没什么事了。

写在最后

这篇就是推荐俩工具。若是须要，请留言留言，我能够出个小教程啥的，完！