從零製作edm郵件，需要了解的一些規則

木易濤童鞋發表於2018-09-22

一、初見

table

  • <table> 標籤定義 HTML 表格
  • 簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成
  • tr(table row) 元素定義表格行，th(table head) 元素定義表頭，td(table data) 元素定義表格單元
  • 更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素
  • HTML table 標籤

table屬性

  • border --- 規定表格邊框的寬度
  • align --- 規定表格相對周圍元素的對齊方式 (left,center,right)
  • valign --- 垂直，預設是valign="middle"，但是會修改為valign="top"
  • cellspacing --- 規定單元格之間的空間
  • cellpadding --- 規定單元邊沿與其內容之間的空白
  • width --- 規定表格的寬度
  • height --- 規定表格的高度
  • background --- 背景影象
  • bgcolor --- 背景顏色
<table border="1" width="600" align="center" bgcolor="#cccccc" cellspacing="10" cellpadding="20">
<tr>
  <td>語文</td>
  <td>數學</td>
  <td>英語</td>
</tr>
</table>
複製程式碼

style

  • width、height
  • font-family
  • font-size
  • font-weight
  • color
  • line-height
  • border
  • background-color
  • background-image
  • vertical-align

標籤

行內元素
  • <a href="http://www.eefocus.com" target="_blank">
  • <img src="http://baidu.com/hao123.png" alt="hao123圖片">
  • <span>我也可以是一段話，只是沒法自主設定寬度而已</span>
塊級元素
  • <p>我是一段話...</p>

二、瞭解

基本格式

Area-1
  • HTML 編碼格式：utf-8
  • 頁面儘量保持寬（600px~800px）、高（1024px），整體郵件不要太大，比如15k（各個郵箱不同）左右，不然很容易走垃圾郵箱
  • 樣式使用行間樣式，如：<td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000;" >文字</td>其他的方式會被無視
Area-2
  • font-family 屬性不能為空
  • 使用<table>佈局，居中顯示使用align="center
  • 不使用 table 以外的 body、meta和html之類的標籤，部分郵箱系統會把這些過濾掉
  • 不使用 flash、java、javascript、frames、iframe、activeX 以及 dhtml
  • 不要出現onmouseover、onmouseout，即使設定了，也會被過濾掉
Area-3
  • 區域與區域之間的上下、左右之間的空白間隙，使用標準的<td width=15>&nbsp;</td>或<td height="15">&nbsp;</td>，不要使用padding="15px" --- 防止各個郵箱的解析不同

圖片

  • 圖片的每個屬性都要定義完整，如：<img src="http://www.eefocus.com/logo.png" style="vertical-align:top;display:block;" width="210" height="100" alt="logo"/>
  • 定義style="vertical-align:top;" --- 防止圖片之間會有縫隙、變形等顯示異常的情況
  • 定義display:block --- 解決Outlook電子郵件客戶中圖片底部增加空白間距的問題
  • 限制每張圖片的大小width="200 height="200"或者style="width:200px;height:200px;"
  • 新增每張圖片alt屬性，如：alt="我是幹啥的" --- 防止圖片無法載入，也可以知曉這是做什麼的
  • 圖片格式使用jpg、png，儘量不要使用gif
  • 地址使用絕對路徑（以http/https開頭的）
  • 儘量不使用背景圖片background-image（Outlook不顯示，但是可以顯示背景色：bgColor="f3f3f3"），直接使用圖片<img src="">
  • 為了保持各個郵箱的一致性，儘量使用圖片，大圖可拆分成幾張小圖拼接，每張圖片不要太大（15K以內）

連結

  • 地址絕對路徑：<a href="http://www.eefocus.com">Logo Plus</a>
  • 地址不可過長（超過255個字元），儘量簡短
  • 數量儘量不超過10個
  • 地址不要使用特殊符號，避免解析錯誤
  • 文字中出現連結地址，被遮蔽的風險比較高，一般是文字+連結、圖片+連結
  • 不要使用地圖功能連結，很容易被劃分為垃圾郵箱
  • 為避免使用者收到的郵件圖片無法瀏覽，請製作一份和郵件內容一樣的web 頁面，然後在郵件頂部寫一句話：“如果您無法檢視郵件內容，請點選這裡”， 連結到放有同樣內容的web頁面

Outlook郵箱規則

  • 內斂元素的padding無效、vertical-align不能被識別，可定義在td
  • 別想著繼承的事兒，某一塊的樣式都單獨設定，比如連結樣式，文字樣式等
  • p標籤的width不起作用，可定義在td
  • 當設定 <img align="left" /> 或 <img align="right" />時，圖片會脫離文件流，在其父元素設定了 margin 或 padding 的話，都無法使其下移，左移或右移
Tips
  • 避免使用margin padding等屬性，定義寬高的屬性放在td，定義樣式放在p或者span等標籤內
  • 一般而言，指定表格單元格寬度要比指定表格自身寬度要好
  • 使用bgcolor來替找style="background:",在電子郵件客戶端中HTML屬性要比CSS樣式更好，但是優先等級依舊是：css樣式>html屬性

三、悟道

郵件設計

  • 電子郵件的設計過程是非常糾結的，為了美還得考慮製作過程的煎熬
保持簡單
  • 當設計一個HTML電子郵件時，請記住保持簡單，編碼的時候考慮堅持兩列布局，這樣能為您省去很多麻煩的事情
減少影象的使用甚至避免使用
  • 記住你的設計不能太花哨，因為Outlook不支援背景影象
窄屏最好
  • 因為電子郵件客戶端預覽視窗通常只是一小部分螢幕寬度，你最好上你的電子郵件的寬度設計在大約600px。沒有人喜歡水平滾動條
保持一致
  • 記住，我們使用固定的元素屬性cellpadding和cellspacing設定單元格的邊距和單元格的間距。這樣保持元素之間的間距一致性是正確的與謹慎的

節選自：開始製作HTML Email 之郵件設計

郵件製作

  • 電子郵件的製作過程是非常煎熬的，一不小心就亂了、亂了。

郵件測試

  • 電子郵件的測試過程是非常痛苦的，也是最讓人奔潰的，因為你很有可能拆了西牆補東牆

最後

我們看一下測試郵件：效果圖

相關文章