準備 HTML 電郵的提示


關於圖像

提示 1:<img> 標籤需要有 width 和 height 屬性

為了確保在電郵客戶端裏渲染正確,請在 <img> 標籤中定義 widthheight 屬性。

Don't<img src="images/banner.jpg" alt="SalesCatalysts.com">

Do<img src="images/banner.jpg" width="600" height="50" alt="SalesCatalysts.com">


提示 2:<img> 標籤裏的 width 和 height 屬性需要與圖像的原始大小相同

一些電郵平台如 Outlook 2007Outlook 2010 會忽略了您在 HTML 代碼裏指定的圖像的寬度和高度,而顯示圖像的 原始大小

這經常破壞了整個電郵的設計。因此如果您想調整圖像的大小,請不要只是在<img>標籤中修改它的大小屬性。

您應該用 Photoshop 或者其他圖像編輯軟件調整圖片的大小。


提示 3:<img> 標籤需要有屬性 border="0"

如果您在圖像加入超連結,而沒有加上 border="0" 屬性,Internet Explorer 會自動在圖片的周圍加上一個 藍色邊框

為了避免這種情況,一個很簡單的方法就是,在每個 <img>標籤裏加上屬性 border="0"

Don't<img src="images/banner.jpg" width="600" height="50" alt="SalesCatalysts.com">

Do<img src="images/banner.jpg" width="600" height="50" border="0" alt="SalesCatalysts.com">


提示 4:<img> 標籤應該要有屬性 style="display: block;"

如果您設計 HTML 電郵時使用了很多放置於 <td> 中的切片圖像,請在每一個 <img> 標籤裏加上 style="display: block;"

如果沒有這個屬性,當在 GmailHotmail(現在是 Outlook.com)Yahoo! 或其他電郵平台查看電郵時,在圖像之間會出現未知的空隙。

Don't<img src="images/banner.jpg" width="600" height="50" border="0" alt="SalesCatalysts.com">

Do<img style="display: block;" src="images/banner.jpg" width="600" height="50" border="0" alt="SalesCatalysts.com">


提示 5:圖像不應該高於 1728 像素

Outlook 2007 和 2010 會裁切高於1728像素的圖像的頂部。

更多細節,請查看 為甚麼在 Outlook 2007 和 Outlook 2010 裏電郵被裁切?


提示 6:避免在您的電郵中使用背景圖片

Outlook 2007 和 2010 不會顯示背景圖片,因此避免在您的電郵中使用背景圖片。

如果您必須使用,請規定一個候補背景顏色給 Outlook 2007 和 2010。


提示 7:為 <img> 標籤加上 alt 屬性

預設設定下,電郵客戶端會禁止顯示圖像。

當圖像被禁止顯示時,在 alt 屬性中的信息依然能夠顯示,以提供給您的收件人基本的文本信息。


關於 <td> 標籤

提示 1:每個 <td> 標籤都應該有 width 屬性

這是確保您的電郵能夠正確顯示的一個簡單方法。

Don't<td>

Do<td width=“60“>

如果可能的話,也請設定 height 屬性。然而,有時 <td> 的 height 屬性受文本內容長度的影響而有所不同。在這種情況下,您不應該定義一個固定的高度。

注意:<table> 標籤和 <tr> 標籤都沒有 height 屬性。


關於CSS

提示 1:始終使用內聯 CSS

一些電郵平台會忽略定義在 HTML 文檔中 <head> 部分的 CSS。因此請始終使用內聯 CSS。


提示 2:避免使用 CSS 定位元素

避免使用 CSS 定位元素。大部分網絡電郵平台不支持 “float” 和 “position”。


提示 3:使用 “margin-bottom” 代替 “margin” 或 “margin-top”

避免使用 “margin” 和 “margin-top”,因為 Hotmail(現在為 Outlook.com)會忽略它們。

使用 “margin-bottom” 相對穩妥一點。您可以在 <p> 標籤裏加上 “margin-bottom” 去控制段落之間的距離。

更多有關在 HTML 電郵中的 margin 和 padding 屬性的提示,請看 這裏