編寫郵件模板的注意事項

事情的原由是運營須要給用戶推送各種活動郵件，產品便把實現郵件模板的需求交由我來完成，得，有需求咱實現即是了。一開始想的確實挺好，不就是個靜態頁面嘛，刷的一下就搞定了，而後郵件發送出去各類兼容性問題，所幸只是測試郵件，否則就炸鍋了。果真事情沒有想象中的簡單，網上查了一下發現HTML郵件模板的編寫仍是有點學問在的（文末附有「HTML郵件相關資源推薦」）

編寫前提

HTML郵件模板的編寫，先排出如下前提條件

1. 「郵件內容展現於第三方平臺」
2. 「郵件的解析器比較老舊」 以上兩點前提是咱們在編寫HTML郵件時須要認識到的，根據這兩點前提加網上的總結，我有如下注意點：

1. 採用table佈局方式

根據前提條件2，在不知道郵件最終會在哪一個第三方郵件平臺上展現時，確保佈局不能亂的狀況下只能用最保守的佈局方式，就是table佈局。這個佈局方法是早期的網頁比較流行的方式，優勢很明顯，兼容性無敵

2. 注意兼容性，儘可能有替代方案

仍是前提條件2，儘可能避免使用css3的語法，很大可能性會失效，那麼要如何肯定兼容性呢，文末有附上鑑別工具。在某些狀況下，在與設計和產品反饋說兼容性不太好的狀況下仍要採用當前設計（沒錯，這種狀況也有不少），這時候就要儘可能採用一些備用方案了。好比如下所示：

/* 失效狀況下的補救方案 */
background: #00A9BA;
/* 漸變背景，有可能會失效 */
background: linear-gradient(90deg, #52D6CE 0%, #00A9BA 100%);
複製代碼

4. 行內樣式優先

爲何說行內樣式優先，是由於第三方郵件平臺展現郵件內容的時候，有可能會去除郵件模板的head,style等標籤，若是樣式是統一存放與style標籤內的，則模板也就亂了。因此，在編寫郵件模板時，儘可能使用行內樣式實現。若是存在一些特殊的狀況如須要處理響應式郵件時，就不得不用到style標籤來作class的處理，這時候也得要有備用的兼容方案，好比移動端樣式優先顯示，經過媒體查詢再顯示PC端的內容。固然了，最好在設計前和設計師溝通一下（大霧

5. 不要存在定位

經過兼容性的查詢可知，position屬性基本不被主流郵件客戶端支持，這東西最好不用就是了。具體的緣由是什麼沒查到，這裏能夠猜想的是，若是開放position，那麼有可能會將郵件客戶端的內容給遮擋住，這也是很尷尬的

6. No JavaScript！

這個自沒必要說了，全部的郵件沒法執行Javascript代碼，爲了安全性。因此若是產品有要求對郵件進行一些腳本操做，最好的辦法就是跳轉至自用的網站下再進行相應地操做。

7. 將元素放置於body中

將佈局的內容及樣式放置於body標籤中，是爲了防止第三方客戶端刪除頭部、只保留body標籤的狀況出現。這裏要注意的一點是，若是存在特殊狀況下的style標籤，那麼留在body中存在的機率會大一些。

End

存手工編寫是最靠譜也是最麻煩的方法，看實際狀況而定，郵件的實現必要時也須要和產品以及設計溝通，切忌讓設計天馬行空的去搞，否則麻煩的仍是前端（扯皮麻煩）。 如下是一些郵件資源，這裏須要說明的是，這一類的框架優勢是比較省事，不用寫太多，那缺點也很明顯，就是得學多一門幾乎是新的語言

• MJML:  mjml.io/
• emailframe  emailframe.work/
• Foundation for Emails 2: [ foundation.zurb.com/e...]()
• responsive HTML email template:  github.com/leemunroe/r…
• campaignmonitor： www.campaignmonitor.com/a/

本文使用 mdnice 排版