文章出處

EDM是Email Direct Marketing的縮寫，雖然也是html，但是和我們在網頁上使用的html不同，因為安全原因，各大郵箱服務商級郵件客戶端都會對郵件內容進行一定程度上的處理，不會按照你寫的原本的html展示

避免垃圾郵件

即使郵件做的再精美，被郵箱自動識別為垃圾郵件也白費，每個郵箱都有自己的垃圾郵件識別規則，了解一下可以避免EDM被當作垃圾郵件，關于這點知乎上喲個經典的問題怎么樣才能讓自己服務器發出的郵件不被 Gmail、Hotmail、163、QQ 等郵箱放入垃圾箱？

絕大多數是服務器設置、發送頻率等，前端需要注意的主要是郵件內容部分

  1. 圖文比例，圖片比例過大或者只是簡單切圖組成的郵件稱為垃圾郵件的概率很大，多數郵箱對圖片大小也有限制，一般圖片超過150k后幾乎所有郵箱都不會默認加載郵件中的圖片，這也是需要注意的地方
  2. 標題，標題中帶有鏈接或者明顯是推銷字眼如發票、促銷、免費等關鍵字也容易被判斷為垃圾郵件
  3. 內容中出現大面積黃色、紅色強調的文字，或者字號超大的文字也是判斷垃圾郵件的依據之一
  4. 鏈接、圖片地址盡量使用短而有意義的字符
  5. 郵件中包含附件或者js代碼也會加大被識別為垃圾郵件的概率
  6. 標題字符全部大寫，帶有過多感嘆號等也是垃圾郵件的標志

常見的垃圾關鍵詞包含：發票、發財、致富、代開、薪水、交友、支付、商機、法寶、寶典等，還有政治敏感詞匯

基本準則

在編寫EDM的時候有幾個不同于頁面的基本準則

控制寬度

由于Outlook仍然是郵件客戶端的霸主，默認界面郵件的科室寬度對于一般屏幕在800px左右，所以不要把郵件內容設置的過寬，700px是個不錯的選擇

table布局

這幾乎是EDM與普通頁面html最大的區別，因為各個郵箱對div＋css這一套布局的解析問題很大，基本各大郵箱都會解析混亂，所以老式的table布局時上乘之選

這就意味著EDM中幾乎只有這幾個元素table、tr、td、span、img、a，計量避免使用div、p或是其他標簽

使用table布局需要注意的一點是并不是所有郵箱很支持colspan、rowspan屬性，盡量使用table嵌套解決

body之外的內容幾乎沒用

我們知道完整的html包括DOCTYPE聲明、html標簽、head標簽及其內容、body標簽，對于在一個iframe中顯示郵件內容的郵箱還好，會保留上述結構，但是有些郵件（Gmail）都是在div中直接包含EDM，這就對安全要求極為苛刻，后續講的幾個要點基本原因這是安全

安全原因郵箱會默認把上述結構做刪除處理，所以在有些情況下寫了幾乎沒有作用，不要試圖以來head標簽內的meta或者其他內容（如果真多海外用戶，Gmail會刪除），在可能的情況下盡量把內容寫到body內，甚至很多EDM的建議是從table開寫，直接放棄DOCTYPE、html、head、body標簽

盡量使用內聯樣式

寫html就離不開css，EDM并不支持外部的style文件，上面講到head標簽極有可能被刪除，所以不要試圖在head標簽內寫style標簽。

在body內寫style標簽是不是就保險了呢？ 也不是，典型的就是Gmail郵箱，會把EDM內所有style標簽刪除，這就意味著只有內聯的style屬性內的CSS是唯一可靠的樣式信息

能使用屬性就不用樣式

并不是使用style屬性就保險了，很多郵箱會對特定標簽的屬性做強制改造，比如把所有td的line-height設成1.2等，使用style屬性并不是保險的，所以在有屬性能夠實現樣式的時候盡量使用屬性，常見的屬性有

table

  • width
  • bgcolor
  • align

td

  • align
  • valign
  • bgcolor
  • height
  • width

img

  • width
  • height

對于加粗字體我們可以使用b標簽而不是css的font-weight

樣式書寫

EDM的樣式書寫也有很多讓人吃驚的地方

屬性的支持

EDM對CSS支持的匱乏是令人震驚的，普遍支持的幾乎就剩支持文字、背景顏色相關的屬性，我們可以在The Ultimate Guide to CSS看到具體支持情況

  • Gmail對所有的style標簽都不支持

  • 稍微高級的選擇器Yahoo和Gmail普遍不支持，這個對于針對國內市場的同學還能接受國際市場的就悲劇了

  • 文字相關的CSS2的基本都支持，但是font-size、font-family基本各個客戶端都有默認值，保險起見，寫上自己的；text-indent只對塊元素生效，基本使用td的padding可以解決

  • background支持比較好的就是color，不要為EDM添加背景圖片，多數郵箱不支持

  • box相關的border的支持不錯，height和width也基本可以，padding和margin的支持并不盡如人意，一個好的建議是不使用margin，主要靠空的、有width和height的td與其padding解決間距問題

  • 位置、顯示相關的基本EDM很少設計，不要使用float、position屬性即可

如果想寫出在各個郵箱上看起來都不錯的郵件，能用的CSS極其有限，也許看到這里就能明白為什么很多EDM的代碼看起來很挫，但是這還沒完，套用美劇中常出現的“It's just the beginning”

繼承與簡寫

在寫頁面的時候利用CSS的繼承和簡寫會為我們帶來很多便利，但是到了EDM，一切都要NO！

首先是繼承，其實繼承規則依舊有效，但是多數郵箱都會有一套自己的規則，比如line-height，如果我們的元素沒有設置，它會以內聯樣式的形式自動添加，這就造成我們不能輕易依賴繼承規則，所有幾乎有問題的td都要寫

style="color:#333;font-size:12px;font-family:Arial;line-height:1.5;"

然后是簡寫問題

padding:4px;
border:solid 1px #999;

類似的代碼很常見，但是鑒于EDM的特殊性，建議大家不要這么寫，color的代碼也要寫成六位，而不是簡寫為3位

padding-top:4px;
padding-...
...
border-width:1px;
border-style:style;
border-color:#999999;

元素的特殊性

table

  • 上面有提到colspan、rowspan屬性并不能很好的得到支持，所以盡量使用table嵌套解決此類問題
  • 所有的table一定要寫的幾個屬性cellpadding、cellspacing、border，不同的瀏覽器、郵箱對此的默認值不同，寫成我們希望的
  • table使用border的時候添加border-collapse的屬性值為collapse
  • 使用bgcolor定義table的背景顏色
  • td的內容默認是水平左對齊、垂直居中對齊
  • td的屬性十分豐富，對其、尺寸、背景

img

  • 做好圖片默認不被加載的預期，Gmail非通訊錄郵箱的郵件圖片默認都不加載，所以要寫上width、height與alt屬性
  • 僅包含圖片的td把line-height設置為0，否則會有間隙，在圖片并列的時候尤為明顯，很多人也建議設置樣式display:block，雖然一樣能實現，但是不推薦
  • 很多時候郵箱會為圖片默認加上邊框，確認不需要的話將其border屬性設置為0

p

少用p標簽，hotmail會先過濾掉p標簽的margin然后再加上hotmail系統默認設置的值；qqmail會給p設定一個line-height值

DOCTYPE

如果一定要使用完整的html（其實這是有用的，尤其是對于響應式的EDM），盡量使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

幾篇有用的文章

HTML電子郵件應該知道的一些事

從頭開始構建一個HTML電子郵件模板

HTML Email 編寫指南


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄