製作郵件模板的規範

郵件模板的製作和我們平時的寫html是有一些不一樣的地方，在做郵件模板的時候踩了很多坑，尤其是outlook郵箱客戶端，會自動遮蔽掉很多html標籤，導致我們的樣式錯亂，但是在客戶端又無法除錯，所以給我們造成了很多困擾，這個文章只記錄一下我們做郵件模板需要注意的地方：

一：靜態頁面的製作
1.郵件模板中，圖片及文字應具有平衡的比例，從門戶的判斷機制上看，郵件正文中文字的比例越合理，被判斷為垃圾郵件的可能性越小，尤其是網易。
通常建議 根據郵件的內容將非效果性文字都以文字的形式展現。

2.切圖片時候，在不影響圖片失真的情況下，所切圖片應儘可能優化，
圖片優化後，容量減少，保證了使用者開啟郵件時，在最短時間看到感興趣的圖片，提高郵件模板的閱讀率；另外，當頁面中有動畫時，可以將動畫匯出為gif圖片；對於頁面中的flash動畫，目前大部分郵件客戶端不支援正常的顯示。

3.插入的圖片要定義寬和高
通常圖片的高和寬都使用width和height,但是qq郵箱會清除裡面所有圖片的高和寬，導致圖片變形；所以圖片的寬和高建議採用style中定義的方式，如：
style=“width:xx;height:xx”.

4.圖片的地址連結
不採用map標記形式，因為map標記在outlook中無法進行正常的點選，即無法開啟該連結指向的網址。

二：css樣式定義
1、CSS樣式的新增可分為兩種方式：

1)外部呼叫樣式；

2)內部呼叫樣式；

3)HTML Tag中直接定義樣式。

2、對以上內容分別進行相關闡述

1)外部呼叫樣式，指在網頁的中寫出樣式表檔案的名稱和路徑，例如：

2)內部呼叫樣式，指在頁面的頭部，以結尾的樣式定義。例如：

3)HTMLTag中直接定義樣式，指直接在htmltag標記中寫style定義。例如：

文字資訊

第一種和第二種方式為製作網頁的常用方式，但這兩種方式在郵件客戶端中某些定義將無法生效。第三種方式在郵件客戶端中顯示相容性最高，但手工製作繁瑣，所以系統整合了“網頁抓取”功能，抓取功能將自動把第一種和第二種網頁轉換成第三種網頁的樣式定義模式，從而確保了模板顯示的最大相容性。

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

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

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

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

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

正確的做法請將樣式書寫在或裡，寫法如下：

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

5、

以外的body、meta和html之類的標籤是可以無視的，郵箱系統裡會把這些過濾掉。

6、有背景圖時，style內容裡面background可以設定color，但是img會被過濾，就是說不能通過CSS來設定背景圖片了。但可以直接寫在程式碼裡。程式碼寫法如下：

（在outlook中檢視郵件時，背景圖片不顯示，這是因為outlook中對背景圖片無法識別。同時，背景圖需要用絕對地址）

7、如果文字內容是寫在

• 裡，那麼樣式請儘量寫在
  • 裡，在sohu中寫在或裡的樣式會被過濾，其它郵箱沒有問題。例如：

• 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”” />，（這樣傳送出去的郵件，收件人將沒辦法看到您的圖片）；正確的寫法請寫成：

  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=”…” ，例如：

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

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

  28、對於純文字郵件：

  郵件標題不要超過18個字；
  每行不要超過34個字。
  對於HTML郵件：
  郵件標題不要超過18個字；
  HTML程式碼和圖片儘量不要超過50kb；
  頁面寬度推薦650px，最大不要超過800px；
  附錄：圖片遮蔽

  由於圖片可以用來偵測郵件的開啟率和email地址的有效性。
  不少郵件客戶端都會預設把郵件中的圖片遮蔽，使用者需要再點一下才能顯示圖片。

  

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

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

  Outlook 2007的限制

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

  這些是我在工作中遇到整理的，希望可以幫助大家