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. 郵件的寬度一般在600px到800px不等，具體寬度由設計師制定，正常不超過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>標籤的width、bgcolor、align，img標籤的width、height。字型加粗可以使用<b>標籤而不是css的font-weight。

  7. 內邊距和外邊距儘量不適用padding和margin，正確的做法是使用空標籤來設定間距，否者會導致各個郵箱平臺解析不同，造成差異。注意：使用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 編寫指南](

相關文章