轉載：http://www.maildesign.cn/archives/1380

在我們的日常工作中，經常需要發送郵件和我們的會員溝通。如注冊確認、營銷推廣等。這些由站方發給會員的信件，往往純文本格式不能滿足界面和交互的要求，我們需要發送HTML郵件。由于HTML郵件不同于HTML網頁，不是存放于自己的服務器，是要通過郵件服務器來展現。所以編寫HTML郵件與編寫HTML頁面有很大的不同。因為，主流郵箱都或多或少的會對它們接收到的HTML郵件在后臺進行過濾。毫無疑問，JS代碼是被嚴格過濾掉的，包括所有的事件監聽屬性，如onclick、onmouseover，這是基于郵件安全性的考慮。不僅如此，CSS代碼也會被部分過濾。通過對各大主流郵箱的了解，我們可以知道哪些是可以使用，哪些是不可以實用的。這樣可以幫助我們來制作一份相對完美的EDM郵件。

首先，我們先來看看郵箱是如何展現HTML郵件的。各大郵箱后臺的過濾算法也不是那么容易可以讓外人知道的。所以，我們只能通過前端展現，來推測哪些是被郵箱接受的寫法，而哪些又是會被過濾掉的。通過對gmail、hotmail、163、sohu、sina幾個郵箱的分析，我把郵箱分為兩類：

第一類包括gmail、hotmail、sohu，這類郵箱，郵件內容是被布局在整個郵箱頁面中的某個div中。如圖：

‘

第二類，包括163、sina，這類郵箱，郵件內容被布局在獨立的iframe中。如圖：

熟悉HTML的朋友都知道，iframe內容是作為獨立的document，與父頁面的元素和CSS是互不相干的，幾乎可以作為一個獨立的頁面來對待。而如果如果郵件內容是在div中，那么郵件內容是作為整個郵箱頁面的一個組成部分。顯然，以iframe作為展現方式的郵箱，對郵件內容就會寬容許多，因為它給了你一個足夠獨立的表現空間。而div就不是那么客氣了。試想一下，如果你在你的郵件里寫上這么一句CSS，是不是整個郵箱的展現頁面上字體都變成20px而因此亂了套：

<style type=”text/css”>
body {font-size:20px}
</style>

我們需要寫兼容各郵箱的統一郵件模板，那么必然就要避開以上這種外聯CSS寫法，另外類似于float、position等成非正常內容流的style也會被過濾，假如你寫了，就會影響到外部郵箱的表現。

下面我結果實際工作中碰到的情況，整理出一些編寫原則：

1、頁面寬度推薦600-800px，最大不要超過800px；

2、制作HTML的email頁面時，不使用css+div來布局，請使用table表格來布局。

3、定義文字或圖片的樣式時，請不要使用外鏈的css樣式

（外鏈的css樣式在郵件里將不能被讀取，所以發送出去的郵件因為沒有鏈接到樣式，將會使你的郵件看起來很難看），

正確的做法請將樣式書寫在<td>或<font>里，寫法如下：

<td style=”font-family:宋體; font-size:12px; color:#000000;” >文字</td>
<font style=”font-family:宋體; font-size:12px; color:#000000;” >文字</font>

4、不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML，如果頁面中的圖片一定要是動態的，請將FLASH文件轉換成GIF動畫使用。（Outlook 2007限制GIF動畫，在Outlook 2007里，GIF將不能正常顯示）

5、<table></table>以外的body、meta和html之類的標簽是可以無視的，郵箱系統里會把這些過濾掉。

6、有背景圖時，style內容里面background可以設置color，但是img會被過濾，就是說不能通過CSS來設置背景圖片了。但可以直接寫在代碼里。代碼寫法如下：<table background=”background.gif” cellspacing=”0″ cellpadding=”0″>（在outlook中查看郵件時，背景圖片不顯示，這是因為outlook中對背景圖片無法識別。同時，背景圖需要用絕對地址）

7、如果文字內容是寫在<li>里，那么樣式請盡量寫在<ul>里，在sohu中寫在<td>或<tr>里的樣式會被過濾，其它郵箱沒有問題。例如：

<ul style=”font-family:宋體; font-size:12px; color:#000000;”>
<li>你的文字</li>
</ul>

8、在同一個里最好只放一個圖片。如<img alt=”" src=”photo.JPG” />,所有的圖片都要定義高和寬。這點很關鍵。圖片必須設定高寬，關鍵圖片alt=”…” 屬性要寫得很清楚，不要使用背景圖片。寫alt屬性是讓瀏覽器在圖片未被顯示前提示圖片內容。不使用背景圖片是防止部分web郵箱和客戶端對背景圖片進行過濾，例如Qq郵箱中的背景圖片會隨窗口的大小變化而產生移動，而outlook2007干脆就過濾了背景圖片。

9、郵件內容里不要出現鼠標經過的事件”onMouseOut” “onMouseOver”，即使在里設置了，發送到郵箱后也將被過濾，將不能顯示設定鼠標經過所顯示的內容。

10、同一段文字請盡可能放在同一里。如果有3段文字，千萬不要用回車換行。那樣會導致代碼里自動加入。這個標簽會導致雙倍行高。

11、制作一份和郵件內容一樣的web頁面，然后在郵件頂部寫一句話：“如果您無法查看郵件內容，請點擊這里查看”，鏈到放有同樣內容的web頁面，這樣即使用戶收到的郵件圖片無法瀏覽，通過鏈接也能正常查看內容；

12、HTML代碼和圖片盡量不要超過50kb（各個郵箱的收件標準不一樣，如果超出50kb您的郵件很有可能會進入垃圾郵件箱里）。

13、郵件模板內的圖片地址請不要寫成本地路徑，例如：<img alt=””"” src=””image/menu-5.gif”” />，（這樣發送出去的郵件，收件人將沒辦法看到您的圖片）；正確的寫法請寫成：

<img src=”http://www.hanlinweb.com/images/menu-5.gif” alt=”” />

14、郵件模板內的所有超鏈接請寫成絕對地址，例如：翰林院網絡營銷；（以確保收信人在點擊超鏈接時能夠正常瀏覽您的內容）。

15、在樣式中，可以省略font-family屬性，但如果font-family：后屬性為空，會被QQ屏蔽為垃圾郵件。

16、在制作HTML郵件內容時，請盡量保持您的鏈接數量不要超過10個，如果同一模板內所有圖片的鏈接地址一樣，請將所有的小圖拼和成一張大圖加鏈接。

17、制作模板時，希望郵件內容全部左右居中顯示的話，請在設定table里的width=”100%”，而不要使用

設定居中。

18、設定郵件主題時，請不要在主題中加入帶有網站地址的信息，比如“exxx.com祝您新年好”。那樣只會進垃圾郵箱！

19、頁面的文字中不要出現網址，例如： http://www.hanlinweb.com，此類文字即使加了超鏈接，被屏蔽為垃圾郵件的風險也是及高的。

20、書寫標題時，在中文輸入法下輸入的標點符號在21CN中標題會顯示亂碼，請大家盡量將標點符號轉化成英文輸入法下的標點符號。

21、如沒有特殊要求，圖片的文件名稱一律使用小寫

22、不要在郵件中使用高度過小的圖片，outlook2007不能很好的顯示高度為1像素的圖片，會出現拼合縫隙

23、在切圖時，需要為文字區域留出一定的邊距（5px左右，視行數和字數的多少調整），由于outlook中默認行間距和字間距大于普通網頁，預留邊距可以防止出現不必要的換行和圖片縫隙。

24、因hotmail信箱的接收問題，段落之間不要用< p >標記，用< br >代替。由于Gmail的兼容性問題，假如td里有文字，如要定義該文字樣式，必須在td里寫style來定義字體，另外td內樣式最好也加上這個style=”word-break:break-all;”，其作用在于不會讓表格撐開，會自動換行(對IE5.5有效)

25、Tom郵箱的排版問題：在代碼中盡量不要使用span標簽，使用其他標簽替代，可以參考模板中“小提醒”部分的代碼寫法

26、字體大小會發生變化，排版出現異常：使用table來排版，每個部分的樣式用內聯樣式寫法style=”…” ，例如：

<td style=”font-size:12px; color:#000000;”>
<a href=”http://www.hanlinweb.com”style=” color:#FFFFFF;”>文字</a>
</td>

這種寫法使樣式能準確的作用到每個html元素，防止部分web客戶端過濾全局樣式或者因同名樣式引起的問題。其實這是每個edm制作方法中都會提到的問題，只是剛開始做edm的人大多都有偷懶的心態，事實證明這個懶偷不得

27、sohu的郵箱很怪異，會在每個文本段后面加一個空格，導致原本正常的排版一行放不下而換行，從而使某些布局錯亂。所以，如果你要兼容sohu郵箱的話，遇到一些緊湊的布局就要格外小心了，盡量減少文本段的數量，留足寬度。

28、對于純文本郵件：

郵件標題不要超過18個字；
每行不要超過34個字。
對于HTML郵件：
郵件標題不要超過18個字；
HTML代碼和圖片盡量不要超過50kb；
頁面寬度推薦650px，最大不要超過800px；

附錄：圖片屏蔽

由于圖片可以用來偵測郵件的打開率和email地址的有效性。
不少郵件客戶端都會默認把郵件中的圖片屏蔽，用戶需要再點一下才能顯示圖片。

Blocking Issue	AOL v. 6.0-9.0	Gmail	Hotmail	Yahoo!	Outlook 2000/XP	Outlook 2003	Outlook Express w/SP2	Outlook Express w/o SP2
外鏈的圖片是否默認被屏蔽	Yes	Yes	No	No	No	Yes	Yes	No
用戶能否設置是否屏蔽圖片	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes
能不能讓用戶點擊某個按鈕就顯示郵件中的圖片	Yes	Yes	Yes	No	No	Yes	Yes	N/A
當發件人在用戶的聯系人列表里時是否默認顯示圖片	Yes	No	Yes	No	Yes	Yes	Yes	Yes
發件人在ISP白名單中時能不能默認顯示圖片(國內好像沒這個概念)	Yes	N/A	Yes	No	N/A	N/A	N/A	N/A
圖片被屏蔽時是否顯示alt屬性	No	Yes	No	No	No	No	No	N/A
預覽時顯示windows的主題樣式	No	No	No	No	Yes	Yes	Yes	Yes

來源：EmailLabs, 2004。國內用戶常用的Foxmail似乎沒有屏蔽郵件內圖片的功能，我也找不到相關設置的地方。

一旦圖片被屏蔽，整個郵件就會變得面目全非，這里再次重申一下：
重要內容盡量避免使用圖片，比如標題、鏈接等；
制作一份和郵件內容一樣的web頁面，然后在郵件頂部寫一句話，類似：“如果您無法查看郵件內容，請點擊這里查看”；
所有圖片都要加上alt屬性；
所有的圖片都要定義高和寬；
通知收件人把你的發件地址加入白名單。

Outlook 2007的限制

由于outlook 2007使用了word的渲染引擎來展現郵件內容，所以很多HTML屬性沒法得到支持了，比如：
背景圖片(這一點很重要！)
css浮動和定位(這個沒啥用)
自定義列表項的圖像(這個也沒啥用)
Flash(反正不放)
GIF動畫
圖片的alt屬性(值得注意)
表單(反正不放)

附：Email客戶端的CSS支持情況

本資料來自國外某郵件營銷公司，所以缺乏國內郵件客戶端的數據。

<style> 標簽

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
<head>中的<style>標簽	No	No	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
<body>中的<style>標簽	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No

<link>標簽

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
<head>中的<style>標簽	No	No	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
<body>中的<style>標簽	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No

CSS選擇器

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
*	No	No	No	No	Yes	Yes	Yes	Yes	Yes	Yes	No
e	No	No	No	No	Yes	Yes	Yes	Yes	Yes	Yes	No
e > f	No	No	Yes	No	No	No	No	Yes	Yes	Yes	No
e:link	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:active,e:hover	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:focus	No	No	Yes	No	No	No	No	Yes	Yes	Yes	No
e + f	No	Yes	Yes	No	No	No	No	Yes	Yes	No	No
e [foo]	No	Yes	Yes	No	No	No	No	Yes	Yes	No	No
e.className	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e#id	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:first-line	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:first-letter	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No

CSS屬性

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
background-color	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
background-image	No	Yes, but	Yes	No	Yes *	Yes	Yes	Yes	Yes	Yes	No
background-position	No	No	No	No	Yes *	Yes	No	Yes	Yes	Yes	No
background-repeat	No	Yes	Yes	No	Yes *	Yes	No	Yes	Yes	Yes	No
border	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
border-collapse	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	No	No
border-spacing	Yes	No	Yes	No	No	No	No	Yes	Yes	No	No
bottom	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
caption-side	Yes	No	Yes	No	No	No	No	Yes	No	No	No
clip	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
color	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
cursor	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	No	No
direction	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	No
display	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	No
empty-cells	Yes	No	Yes	No	No	No	No	Yes	Yes	No	No
filter	No	No	Yes	Yes	No	No	No	No	No	No	No
float	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
font-family	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
font-size	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
font-style	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
font-variant	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
font-weight	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
height	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
left	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
letter-spacing	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
line-height	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
list-style-image	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
list-style-position	Yes	No	No	Yes	Yes	Yes	No	Yes	Yes	Yes	No
list-style-type	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
margin	Yes	No	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
opacity	No	No	Yes	Yes	No	No	No	Yes	Yes	No	No
overflow	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
padding	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
position	No	No	No	No	Yes	Yes	No	Yes	Yes	Yes	No
right	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
table-layout	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
text-align	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
text-decoration	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
text-indent	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
text-transform	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
top	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
vertical-align	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
visibility	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
white-space	Yes	Yes	Yes	No	No	No	No	Yes	Yes	Yes	No
width	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
word-spacing	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
z-index	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No

(*) 不被Microsoft Outlook 2007支持。

本文在寫作過程中，得到了口碑UED和其他一些朋友的幫助，在此感謝。

下載PDF版收藏：EDM-code-normal

總結

以上是生活随笔為你收集整理的(转)EDM邮件制作规范完整版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。