響應式郵件設計工具推薦

響應式郵件設計工具推薦

最近工做上須要作一些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中發現用[[ ]]包裹就沒什麼事了。

寫在最後

這篇就是推薦倆工具。若是須要，請留言留言，我能夠出個小教程啥的，完！