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

新聞建站cms系統、政府cms系統定制開發

廣州網站建設公司-閱速公司

asp.net新聞發布系統、報紙數字報系統方案
/
http://www.tjsimaide.com/
廣州網站建設公司
您當前位置：首頁>網站技術

網站技術

edm郵件營銷郵件內容（電子報郵件）的設計

發布時間：2019/7/31 18:14:00  作者：Admin  閱讀：527  

廣告：

在我們的日常工作中，經常需要發送郵件和我們的會員溝通。如注冊確認、營銷推廣等。這些由站方發給會員的信件，往往純文本格式不能滿足界面和交互的要求，我們需要發送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和其他一些朋友的幫助，在此感謝。

廣告：

相關文章
edm郵件
電子報
cms新聞系統購買咨詢
掃描關注 廣州閱速軟件科技有限公司
掃描關注 廣州閱速科技
主站蜘蛛池模板： 潞西市| 普格县| 灵寿县| 阜新| 九龙坡区| 舞阳县| 襄城县| 富阳市| 南投市| 博客| 铜陵市| 蒙山县| 凤庆县| 二连浩特市| 西青区| 霍邱县| 怀来县| 新巴尔虎左旗| 公安县| 大安市| 鄂托克前旗| 漾濞| 名山县| 大兴区| 广饶县| 曲靖市| 佳木斯市| 西充县| 上林县| 吉安市| 盐津县| 德江县| 西青区| 高淳县| 赤城县| 广德县| 卓尼县| 济源市| 交口县| 新绛县| 桂林市|