edm郵件營銷郵件內(nèi)容（電子報(bào)郵件）的設(shè)計(jì)

發(fā)布時(shí)間：2019/7/31 18:14:00 作者：Admin 閱讀：541

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

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

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

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

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

body {font-size:20px}

</style>

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

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

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

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

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

（外鏈的css樣式在郵件里將不能被讀取，所以發(fā)送出去的郵件因?yàn)闆]有鏈接到樣式，將會(huì)使你的郵件看起來很難看），

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

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

5、<table></table>以外的body、meta和html之類的標(biāo)簽是可以無視的，郵箱系統(tǒng)里會(huì)把這些過濾掉。

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

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

</ul>

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

9、郵件內(nèi)容里不要出現(xiàn)鼠標(biāo)經(jīng)過的事件”onMouseOut” “onMouseOver”，即使在里設(shè)置了，發(fā)送到郵箱后也將被過濾，將不能顯示設(shè)定鼠標(biāo)經(jīng)過所顯示的內(nèi)容。

10、同一段文字請盡可能放在同一里。如果有3段文字，千萬不要用回車換行。那樣會(huì)導(dǎo)致代碼里自動(dòng)加入。這個(gè)標(biāo)簽會(huì)導(dǎo)致雙倍行高。

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

12、HTML代碼和圖片盡量不要超過50kb（各個(gè)郵箱的收件標(biāo)準(zhǔn)不一樣，如果超出50kb您的郵件很有可能會(huì)進(jìn)入垃圾郵件箱里）。

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

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

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

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

17、制作模板時(shí)，希望郵件內(nèi)容全部左右居中顯示的話，請?jiān)谠O(shè)定table里的width=”100%”，而不要使用

設(shè)定居中。

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

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

20、書寫標(biāo)題時(shí)，在中文輸入法下輸入的標(biāo)點(diǎn)符號(hào)在21CN中標(biāo)題會(huì)顯示亂碼，請大家盡量將標(biāo)點(diǎn)符號(hào)轉(zhuǎn)化成英文輸入法下的標(biāo)點(diǎn)符號(hào)。

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

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

23、在切圖時(shí)，需要為文字區(qū)域留出一定的邊距（5px左右，視行數(shù)和字?jǐn)?shù)的多少調(diào)整），由于outlook中默認(rèn)行間距和字間距大于普通網(wǎng)頁，預(yù)留邊距可以防止出現(xiàn)不必要的換行和圖片縫隙。

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

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

26、字體大小會(huì)發(fā)生變化，排版出現(xiàn)異常：使用table來排版，每個(gè)部分的樣式用內(nèi)聯(lián)樣式寫法style=”…” ，例如：

</td>

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

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

28、對于純文本郵件：

郵件標(biāo)題不要超過18個(gè)字；

每行不要超過34個(gè)字。

對于HTML郵件：

郵件標(biāo)題不要超過18個(gè)字；

HTML代碼和圖片盡量不要超過50kb；

頁面寬度推薦650px，最大不要超過800px；

附錄：圖片屏蔽

由于圖片可以用來偵測郵件的打開率和email地址的有效性。

不少郵件客戶端都會(huì)默認(rèn)把郵件中的圖片屏蔽，用戶需要再點(diǎn)一下才能顯示圖片。

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
外鏈的圖片是否默認(rèn)被屏蔽	Yes	Yes	No	No	No	Yes	Yes	No
用戶能否設(shè)置是否屏蔽圖片	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes
能不能讓用戶點(diǎn)擊某個(gè)按鈕就顯示郵件中的圖片	Yes	Yes	Yes	No	No	Yes	Yes	N/A
當(dāng)發(fā)件人在用戶的聯(lián)系人列表里時(shí)是否默認(rèn)顯示圖片	Yes	No	Yes	No	Yes	Yes	Yes	Yes
發(fā)件人在ISP白名單中時(shí)能不能默認(rèn)顯示圖片(國內(nèi)好像沒這個(gè)概念)	Yes	N/A	Yes	No	N/A	N/A	N/A	N/A
圖片被屏蔽時(shí)是否顯示alt屬性	No	Yes	No	No	No	No	No	N/A
預(yù)覽時(shí)顯示windows的主題樣式	No	No	No	No	Yes	Yes	Yes	Yes

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

一旦圖片被屏蔽，整個(gè)郵件就會(huì)變得面目全非，這里再次重申一下：

重要內(nèi)容盡量避免使用圖片，比如標(biāo)題、鏈接等；

制作一份和郵件內(nèi)容一樣的web頁面，然后在郵件頂部寫一句話，類似：“如果您無法查看郵件內(nèi)容，請點(diǎn)擊這里查看”；

所有圖片都要加上alt屬性；

所有的圖片都要定義高和寬；

通知收件人把你的發(fā)件地址加入白名單。

Outlook 2007的限制

由于outlook 2007使用了word的渲染引擎來展現(xiàn)郵件內(nèi)容，所以很多HTML屬性沒法得到支持了，比如：

背景圖片(這一點(diǎn)很重要！)

css浮動(dòng)和定位(這個(gè)沒啥用)

自定義列表項(xiàng)的圖像(這個(gè)也沒啥用)

Flash(反正不放)

GIF動(dòng)畫

圖片的alt屬性(值得注意)

表單(反正不放)

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

本資料來自國外某郵件營銷公司，所以缺乏國內(nèi)郵件客戶端的數(shù)據(jù)。

<style> 標(biāo)簽

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

<link> 標(biāo)簽

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
<head>中的<style>標(biāo)簽	No	No	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
<body>中的<style>標(biāo)簽	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和其他一些朋友的幫助，在此感謝。

分享到： QQ空間微信新浪微博

相關(guān)文章

国产老熟女高潮毛片A片仙踪林,欧美喂奶吃大乳,狠狠爱无码一区二区三区,女神的私人医生动漫免费阅读

新聞動(dòng)態(tài)

網(wǎng)站技術(shù)

edm郵件營銷郵件內(nèi)容（電子報(bào)郵件）的設(shè)計(jì)