EDM郵件製作

張大敏發表於2020-06-28

EDM營銷(Email Direct Marketing)也叫:Email營銷、電子郵件營銷。是指企業向目標客戶傳送EDM郵件,建立同目標顧客的溝通渠道,向其直接傳達相關資訊,用來促進銷售的一種營銷手段。也可用於傳送郵件廣告、產品資訊、銷售資訊、市場調查、市場推廣活動資訊等。

1. 清除表格預設樣式

如果你對<table>相關屬性不太瞭解,建議先了解一下它常用的一些屬性

table標籤用來定義一個表格,無論是在郵件中還是在不同瀏覽器中,table標籤都帶有預設的間距以及一些不能被Style覆蓋的屬性,在頁面清除相對簡單一行CSS就搞定,但在郵件中我們只能寫行內樣式,所以需要給<table>加上以下屬性和樣式。

<table cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; border-collapse:collapse;table-layout:fixed;">
    <tr>
    	<td style="padding: 0;">
        	<!-- 巢狀表格也需要清除樣式 -->
            <table cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; border-collapse:collapse;table-layout:fixed;"></table>
        </td>
    </tr>
</table>

這裡有一個需要注意的地方,如果要在<table>上使用padding需要將border-collapse: collapse去除,否則不能使用padding

屬性 功能
cellpadding="0" 單元格邊距為0
cellspacing="0" 單元格間距為0
border="0" 邊框大小為0
border-spacing: 0 邊框間距為0
border-collapse: collapse 用於表格屬性,表示表格的兩邊框合併為一條
table-layout: fixed; 固定表格佈局,允許瀏覽器更快地對錶格進行佈局

2. 格式

  1. 郵件的寬度一般在600px800px不等,具體寬度由設計師制定,正常不超過800px

  2. HTML編碼使用utf-8

  3. 佈局應嚴格使用table表格佈局,常用的div + css在郵件中顯示會發生異常,也會加大郵件被牆的機率。

  4. 郵件中不能使用JavaScript程式碼,無效且會加大被牆機率。

  5. 嚴格來說郵件不支援使用外鏈樣式以及內聯樣式,僅能使用行內樣式,像這樣:

    <td style="font-family: serif;font-size: 16px;color: #ccc;">Text</td>
    

    關於樣式繼承,不同郵箱平臺解析標準不同,部分繼承樣式可能會失效,所以應當減少使用樣式繼承,雖然這會增加更多的樣式程式碼。

    不過目前大部分郵箱也已經支援使用內聯樣式,意味著可以在<style></style>標籤中編寫CSS,支援Class、媒體查詢、hover效果等。

    正常情況下郵件會忽略body以外的所有內容,所以使用內聯樣式前請務必確認郵件傳送工具支援編寫內聯樣式,郵箱也支援,否則郵件中的樣式會丟失。

    具體的樣式支援可以在The Ultimate Guide to CSS看到。

    <style>
    	.normal-text{
    		font-family: serif;
    		font-size: 16px;
    		color: #ccc;
    	}
    	.hover-bule:hover{
    		color: bule;
    	}
    </style>
    
    <td class="normal-text">
    	Text
    	<p class="hover-bule">hover change font color</p>
    </td>
    
  6. 能使用屬性就不用樣式,例如<table>標籤的widthbgcoloralignimg標籤的widthheight。字型加粗可以使用<b>標籤而不是cssfont-weight

  7. 內邊距和外邊距儘量不適用paddingmargin,正確的做法是使用空標籤來設定間距,否者會導致各個郵箱平臺解析不同,造成差異。注意:使用padding請先去掉<table>上的border-collapse:collapse樣式,或者將值改為border-collapse: unset

  8. 表格居中可使用align="center"屬性,加在<table>標籤上。合併單元格(td)可使用colspan="3"屬性,不過還是有些郵箱不支援此屬性,最好的解決方法還是table巢狀。

  9. 一般專案中我們會避免深層巢狀,但郵件中使用表格佈局免不了深層巢狀,所以有些巢狀十多層標籤也不足為奇。但需要注意避免搞混。

3. 注意事項

  1. 郵件傳送前先發幾封測試郵件給自己,手機端也需要檢查,如果有2封及以上郵件內容大致相同,相同的部分會被隱藏,也會大概率被標記為垃圾郵件。
  2. 主題和郵件都儘量避免發票、促銷、免費、低價、信用卡付款、立刻訂購等關鍵字,奇怪符號、過多的紅黃色、超大字型也最好不要用,如果需要,請把敏感詞做成圖片,在圖片中顯示。
  3. 直接發一張圖片或切幾張圖傳送的情況,很大機會被遮蔽,請注意圖文比例,圖片大小最好不要超過500kb。
  4. 給重要圖片加上alt標籤:如果您的郵件主體內容是圖片,那麼給圖片加上alt標籤顯得格外重要,這樣當圖片被預設遮蔽時,使用者看到的不只是被遮蔽圖片的邊框,還有您在alt標籤中加上的圖片說明,這讓使用者依然能夠明白這個郵件的大體內容。

幾篇有用的文章

EDM製作要點避免自己的郵件被牆,[HTML Email 編寫指南](

相關文章