HTML郵件模版分享

Skyshine發表於2019-11-21
HTML

簡介

有時因為業務的需要，平常的文字郵件已經滿足不了需求，這個時候可以考慮使用HTML程式碼生成需要的郵件

HTML郵件模版在各個客戶端存在不同的問題，程式碼語法相當於使用了早期的html寫法，以相容各個郵箱的顯示

本文分享個人開發郵件模版的思路，有什麼不對，請提出，歡迎分享

詳細規則可以在網上找到很多其他的規則

github地址： 尚未建立project，後期補充

檢視各種郵箱屬性支援情況的網站：www.campaignmonitor.com/css/

編寫規則

1、無法使用js

2、無法使用外部CSS 郵件模版為一個頁面，傳送給使用者時，無法讀取到外部CSS連結

建議最好使用行內樣式（ps：head裡面寫入css可能會存在莫名的bug，暫未親測）

3、Doctype

目前，相容性最好的Doctype是XHTML 1.0 Strict，事實上Gmail和Hotmail會刪掉你的Doctype，換上下面這個Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 &emsp;<head>
 &emsp;&emsp;<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 &emsp;&emsp;<title></title>
 &emsp;</head>
 </html>
複製程式碼

4、佈局 使用table佈局

div，p等標籤不完全被郵件客戶端支援，so無法使用div+css佈局（ps：你可以強行使用試試，會有意想不到的bug）

5、img

img標籤：

圖片是唯一可以引用的外部資源。其他的外部資源，比如樣式表檔案、字型檔案、視訊檔案等，一概不能引用。

有些客戶端會給圖片連結加上邊框，要去除邊框。所以基本所有的圖片要加上border=0

需要注意的是，不少客戶端預設不顯示圖片（比如Gmail），所以要確保即使沒有圖片，主要內容也能被閱讀，alt屬性

因為在有些郵箱裡，圖片不是預設載入的，往往載入前需要使用者的許可。那麼高寬的指定可以使郵件在沒有圖片撐出樣子前也能保持良好的大小結構，加上 alt 屬性更可以明確告知圖片的內容讓使用者選擇是否下載它們。

如果因為專案需要（比如需要適配 Retina 高分屏），width 和 height 屬性更是必不可少的，並且由於一些 outlook 版本的奇葩表現，width 和 height 屬性一定不要加上單位！一定不要加上單位！一定不要加上單位！重要的事情說三遍。

因為加上單位會使一些版本的 OutLook 無法正確識別，導致圖片顯示使用實際的寬高而非我們設定的

背景圖片： 在outlook2007中，背景圖片將無法顯示，其他郵件客戶端可正確顯示背景圖片。 Gmail也不支援css裡面的背景圖

全域性規則

1、模版頁面的寬度維持在550px-800px

2、關於頁面內容居中，使用table的align="center"，使用，margin：0 auto;在郵箱裡面不起作用

3、儘量不要寫 style 標籤、不要寫class，所有CSS都用style屬性，什麼元素需要什麼樣式就用style寫內聯的CSS。

4、不使用flash、java、javascript、frames、iframe、activeX以及DHTML，如果頁面中的圖片一定要動態的，請將flash檔案轉換成gif動畫使用，但在outlook2007裡，gif將不能正常顯示，因為outlook2007限制gif動畫。

5、font-family屬性不能為空，否則會被QQ遮蔽為垃圾郵件。

6、上下左右邊距不要用padding和margin，可以使用td空白標籤設定寬度和高度達到間距要求,或者使用 (ps: &nbsp 這個傢伙在不同的郵箱顯示不一樣的間距)

<tr>
  <td height="20">&nbsp;</td>
</tr>
複製程式碼

阿里雲郵箱對用td做間隔的標籤不起作用，一定要加上個 才會生效，而此時間距明顯是其他郵箱的兩倍(ps: 暫未找到很好的相容方式，有解決方法的同學，請賜教！！！)

7、少用float, margin,padding. 絕對定位不能用，清除浮動用

8、如果使用了line-height屬性，請加上mso-line-height-rule: exactly;（ps：不要問，問就是要）

9、少用圖片，郵箱不會過濾你的img標籤，但是系統往往會預設不載入陌生來信的圖片，如果用了很多圖片的郵件，在片沒有載入的情況下，醜陋無比甚至看不清內容，沒耐心的使用者直接就刪除了。圖片上務必加上alt。

10、郵箱裡面顯示郵件模版一般都是用iframe巢狀，在outlook郵箱裡面，並沒有看到任何的iframe的標籤，請注意

11、關於字型 有時設計師會讓你使用特定字型，而郵件裡面一般使用的是系統支援的字型，如果不支援，將會變成預設字型（ps： 個人覺得蘋方字型在郵件裡面顯示特醜，不如預設字型）

相關文章