前端高質量郵件信開發實現 ?

背景

最近做了公司產品邀請成員加入傳送郵件信的需求，郵件信是顯示在各種郵箱客戶端裡的 HTML頁面，有很多相容性問題。本文內容主要是對郵件信開發過程中需要注意的地方的總結、對收集到的郵件信相關資料整理總結、以及對開發高質量郵件信的建議。

什麼是郵件信

在我們的日常工作中，經常需要傳送郵件進行註冊確認、營銷推廣等我們需要傳送 HTML 郵件，這就是 郵件信EDM。由於 HTML 郵件不存放於自己的伺服器，通過郵件伺服器來展現，因此編寫HTML郵件與編寫 HTML 頁面有很大的不同。主流郵箱往往會對它們接收到的 HTML 郵件在後臺進行過濾，對 JS 程式碼進行嚴格過濾，包括所有的事件監聽屬性，如 onclick、onmouseover 等。CSS 程式碼也會被部分過濾。這是基於郵件 安全性 的考慮。

低質量郵件信 `?`

部落格園 評論通知：郵件內容雖然簡明扼要，但是作為官網發出的郵件，樣式缺少權威性，很容易被忽略。
某廣告郵件：樣式排版佈局雜亂，一眼就能識別出是垃圾郵件 ?，完全沒有仔細閱讀的慾望。

高質量郵件信 `?`

SegmentFault 評論通知：同樣作為技術部落格網站，醒目的主題樣式除了突顯官方權威性之外，也能達到品牌宣傳的作用。
Frontend Focus 訂閱郵件：標題、banner、文章列表層次結構分明，使讀者能夠清晰快速地定位到自己感興趣的內容，整潔的樣式也能吸引更多的讀者訂閱。

實現高質量郵件信

實現效果

首先展示本文內容實現的郵件信示例模版實現效果，郵件信由頁面頂部和頁尾的提示以及主體內容組成。主體內容中，有些元素只有 一列 內容、有些元素有 左右兩列、有些元素有 左中右三列，基本滿足實際開發需求，大家可以參照實現。

? 線上預覽：https://dragonir.github.io/st...

程式碼實現

在 <style> 標籤中可以新增全域性樣式程式碼，大部分郵箱都支援在 header 標籤中新增樣式，不過也有可能少數古早的郵件客戶端會將這部分樣式過濾掉，在這種郵箱客戶端中只能通過 行內樣式 來解決。

<style type="text/css">
 body, #header h1, #header h2, p {margin: 0; padding: 0;}
 #main {border: 1px solid #cfcece;}
 a {color: #2d95ec;}
 img {display: block;}
 #top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
 #header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
 #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }
 #header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }
 h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
 h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
 h4 {font-size: 22px; color: #2d95ec !important; font-family: Arial, Helvetica, sans-serif; }
 h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
 p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5; }
</style>

如下面示例程式碼所示，html 使用 table 佈局，以便於儘可能相容所有郵件客戶端。頁面父級容器是一個 table 元素，它 3 個子元素也是 table 元素，第一個 id="top-message" 和第三個用於在頁面頂部和頁尾顯示提示資訊、第二個 table id="main" 是郵件信的主體部分，它裡面的每個子元素模組也是 table 元素，而頁面的內容主要填充在 tr 與 td 元素中。

<body>
  <table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>
    <table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
      <tr>
        <td align="center">
          <p>在郵箱中預覽有問題? <a href="#">在瀏覽器中開啟</a></p>
        </td>
      </tr>
    </table><!-- top message -->
    <table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">
      <tr>
        <td>
          <table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">
            <tr>
              <td width="570" bgcolor="2d95ec"><h1>Communitech Venture Services</h1></td>
            </tr>
            <tr>
              <td width="570" bgcolor="2d95ec"><h2 style="color:#ffffff!important">News and Events</h2></td>
            </tr>
            <tr>
              <td width="570" align="right" bgcolor="2d95ec"><p>October 2021</p></td>
            </tr>
          </table><!-- header -->
        </td>
      </tr><!-- header -->
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>
          <table id="content-1" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td width="170" valign="top">
                <table cellpadding="5" cellspacing="0">
                  <tr><td bgcolor="ffffff"><img src="https://tricell.fun/email/images/example/emoji.png" width="160" /></td></tr></table>
              </td>
              <td width="15"></td>
              <td width="375" valign="top" colspan="3">
                <h3>All New Site Design</h3>
                <h4>It's 150% Better and 40% More Efficient!</h4>
              </td>
            </tr>
          </table><!-- content 1 -->
        </td>
      </tr><!-- content 1 -->
      <tr>
        <td>
          <table id="content-2" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p></td>
            </tr>
          </table><!-- content-2 -->
        </td>
      </tr><!-- content-2 -->
      <tr>
        <td height="30"><img src="https://tricell.fun/email/images/example/blank.png" /></td>
      </tr>
      <!-- 省略中間類似模組 -->
      <tr>
        <td>
          <table id="content-6" cellpadding="0" cellspacing="0" align="center">
            <p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
            <p align="center"><a href="#">CALL TO ACTION</a></p>
          </table>
        </td>
      </tr><!-- content-6 -->
    </table><!-- main -->
    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
      <tr>
        <td align="center">
          <p>之所以您會收到該郵件?，是因為您已經在我們網站訂閱了更新訊息！</p>
          <p><a href="#">取消訂閱</a> | <a href="#">推薦給好友</a> | <a href="#">在瀏覽器中檢視</a></p>
        </td>
      </tr>
    </table><!-- top message -->
  </td></tr></table><!-- wrapper -->
</body>

? 完整程式碼：https://github.com/dragonir/s...

測試高質量郵件信

完成郵件信頁面開發後，就需要在不同郵箱中進行測試，以便於發現在不同郵件客戶端中的樣式的錯亂問題。網易郵箱 有新增程式碼功能，我們可以直接將開發好的郵件信程式碼貼進郵件裡，然後傳送給其他郵箱進行測試。QQ郵箱 也有直接上傳 html 文件的功能。（我去年2020年測試的時候是可以用的，今天我上傳時介面會報錯 ?）189郵箱 以前也有新增程式碼的功能，今天我去測試的時候發現已經下線了該功能，可能是出於安全性的考慮 ?。

高質量郵件信程式碼編寫原則

這部分內容總結了上述郵件信開發過程中需要注意的問題，提前瞭解這些規則可以提高開發效率，少走一些彎路 ?。

頁面寬度：推薦 600px - 800px，最大不要超過 800px。
頁面佈局：製作 email頁面時，不要使用 css+div 來佈局，使用 table 來佈局。
樣式：定義文字或圖片樣式時，不要使用外鏈 css 樣式，正確的做法請將樣式書寫在 <td> 或 <font> 裡。

<td style=”font-family:Arial; font-size:12px; color:#000000;” >text</td>
<font style=”font-family:Arial; font-size:12px; color:#000000;” >text</font> <!-- 已廢棄 -->

? 外鏈的 css 樣式在郵件裡將不能被讀取，傳送出去的郵件會失去樣式。

動態內容：不使用 Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML，如果頁面中的圖片一定要是動態的，可以使用 gif 動圖。
標籤：<table> 以外的 body、meta 和 html 之類的標籤是可以無視的，郵箱系統裡會把這些過濾掉。
背景圖片：有背景圖時，style 內容裡面 background 可以設定 color，但是 img 會被過濾，就是說不能通過 css 來設定背景圖片。但可以直接寫在程式碼裡。如：

<table background=”background.gif” cellspacing=”0″ cellpadding=”0″>

? 在 outlook 中檢視郵件時背景圖片不顯示，同時，背景圖需要用絕對地址。

列表樣式：如果文字內容是寫在 <li> 裡，樣式儘量寫在 <ul> 裡，在sohu 郵箱中寫在 <td> 或 <tr> 裡的樣式會被過濾，其它郵箱沒有問題。
img 元素設定寬高：所有的圖片都要設定 height 和 width。這點很關鍵。關鍵圖片要新增 alt 屬性。

? alt 屬性是讓郵件在圖片未載入完成前提示圖片內容。

不要設定滑鼠事件：不要在郵件內容中設定滑鼠經過事件如 onMouseOut，onMouseOver，傳送到郵箱後會被過濾，將不能正確顯示設定滑鼠經過所顯示的內容。
不要回車換行：同一段文字請儘可能放在同一元素裡。如果有多段文字，千萬不要用回車換行，這樣會導致郵件中自動換行符導致該標籤雙倍行高。
新增可替代網頁：製作一份和郵件內容一樣的 WEB 頁面，然後在郵件頂部提示連結 如果您無法檢視郵件內容，請點選這裡檢視。這樣即使郵箱客戶端內異常，通過連結也能檢視正確內容。
壓縮體積：HTML 程式碼和圖片儘量不要超過 50kb。

? 各個郵箱的收件標準不同，有些郵箱超過 50kb 會被識別為垃圾郵件。示例中，為了展示效果，是我隨便找的圖片，體積比較大 ?。

限制圖片數量：在製作 HTML 郵件內容時，連結數量儘量保持在 10 個以內，如果同一模板內所有圖片的連結地址一樣，可以將所有小圖拼成一張大圖使用。
使用絕對路徑：郵件模板內的所有超連結使用絕對地址，以確保收信人在點選超連結時能夠正常瀏覽內容。
font-family 屬性可以省略：font-family 屬性是非必要的，如果有 font-family且值為空，會被 QQ郵箱 遮蔽為垃圾郵件。
居中顯示：製作模板時，如果希望郵件內容全部左右居中顯示的話，需要將 table 的 width 設為 100%。
避免在郵件中直接顯示網址：頁面的文字中不要出現網址，會被有些郵箱被遮蔽為垃圾郵件，網站可以寫在 a 標籤中。
檔名稱小寫：如沒有特殊要求，圖片的檔名稱一律使用小寫。
避免使用尺寸過小圖片：不要在郵件中使用高度過小的圖片，outlook2007 不能很好的顯示高度為1畫素的圖片，會出現拼合縫隙
可以將邊距留在切圖中：在切圖時，可以為需要為文字區域留出一定的邊距，由於 outlook 中預設行間距和字間距大於普通網頁，預留邊距可以防止出現不必要的換行和圖片縫隙。
使用 <br> 換行：因 hotmail 信箱的接收問題，段落之間不要用 <p> 標記，用 <br> 代替。
推薦行內樣式：由於 Gmail 的相容性問題，假如td裡有文字，如要定義該文字樣式，必須在 td 裡寫 style 行內樣式來定義字型。
使用強制換行：td 內樣式最好加上 style=”word-break:break-all;，其作用在於不會讓表格撐開，會強制折斷文字換行。
純文字郵件：郵件標題不要超過 18 個字、每行不要超過 34 個字。

附錄

下面內容羅列了一些國外郵箱客戶端對 html 標籤和 css 屬性的支援度。對於國內常用郵箱客戶端，根據開發經驗，一般相容 Outlook 郵箱的郵件信，大多是是相容國內郵箱的。

圖片遮蔽

由於圖片可以用來偵測郵件的開啟率和 email 地址的有效性。不少郵件客戶端都會預設把郵件中的圖片遮蔽，使用者需要再點一下才能顯示圖片。

Blocking Issue	AOL	Gmail	Hotmail	Yahoo!	Outlook 2000/XP	Outlook 2003	Outlook Express w/SP2	Outlook Express w/o SP2
外鏈圖片是否預設被遮蔽	✔	✔	❌	❌	❌	✔	✔	❌
使用者能否設定是否遮蔽圖片	✔	❌	✔	✔	✔	✔	✔	✔
能否讓使用者點選某個按鈕就顯示郵件中的圖片	✔	✔	✔	❌	❌	✔	✔	◯
發件人在使用者聯絡人列表時是否預設顯示圖片	✔	❌	✔	❌	✔	✔	✔	✔
發件人在ISP白名單中時能否預設顯示圖片	✔	◯	✔	❌	◯	◯	◯	◯
圖片被遮蔽時是否顯示alt屬性	❌	✔	❌	❌	❌	❌	❌	◯
預覽時顯示windows的主題樣式	❌	❌	❌	❌	✔	✔	✔	✔

郵箱客戶端對 `CSS` 的支援情況

`<style>` 標籤

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`<head>`中的`<style>`標籤	❌	❌	✔	✔	✔	✔	❌	✔	✔	✔	❌
`<body>`中的`<style>`標籤	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌

`<link>` 標籤

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`<head>`中的`<link>`標籤	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌
`<body>`中的`<link>`標籤	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌

`CSS` 選擇器

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`*`	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌
`e`	❌	❌	❌	❌	✔	✔	✔	✔	✔	✔	❌
`e > f`	❌	❌	✔	❌	❌	❌	❌	✔	✔	✔	❌
`e:link`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:active,e:hover`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:focus`	❌	❌	✔	❌	❌	❌	❌	✔	✔	✔	❌
`e + f`	❌	✔	✔	❌	❌	❌	❌	✔	✔	❌	❌
`e [foo]`	❌	✔	✔	❌	❌	❌	❌	✔	✔	❌	❌
`e.className`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e#id`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:first-line`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`e:first-letter`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌

`CSS` 屬性

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
`background-color`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`background-image`	❌	✔	✔	❌	✔ *	✔	✔	✔	✔	✔	❌
`background-position`	❌	❌	❌	❌	✔ *	✔	❌	✔	✔	✔	❌
`background-repeat`	❌	✔	✔	❌	✔ *	✔	❌	✔	✔	✔	❌
`border`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`border-collapse`	✔	✔	✔	✔	✔	✔	❌	✔	✔	❌	❌
`border-spacing`	✔	❌	✔	❌	❌	❌	❌	✔	✔	❌	❌
`bottom`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`caption-side`	✔	❌	✔	❌	❌	❌	❌	✔	❌	❌	❌
`clip`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`color`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`cursor`	❌	✔	✔	✔	✔	✔	❌	✔	✔	❌	❌
`direction`	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌	❌
`display`	❌	✔	✔	✔	✔	✔	✔	✔	✔	❌	❌
`empty-cells`	✔	❌	✔	❌	❌	❌	❌	✔	✔	❌	❌
`filter`	❌	❌	✔	✔	❌	❌	❌	❌	❌	❌	❌
`float`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`font-family`	❌	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`font-size`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`font-style`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`font-variant`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`font-weight`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`height`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`left`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`letter-spacing`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`line-height`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`list-style-image`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`list-style-position`	✔	❌	❌	✔	✔	✔	❌	✔	✔	✔	❌
`list-style-type`	✔	❌	✔	✔	✔	✔	✔	✔	✔	✔	❌
`margin`	✔	❌	✔	❌	✔	✔	❌	✔	✔	✔	❌
`opacity`	❌	❌	✔	✔	❌	❌	❌	✔	✔	❌	❌
`overflow`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`padding`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`position`	❌	❌	❌	❌	✔	✔	❌	✔	✔	✔	❌
`right`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`table-layout`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`text-align`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`text-decoration`	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	❌
`text-indent`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`text-transform`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`top`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌
`vertical-align`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`visibility`	❌	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`white-space`	✔	✔	✔	❌	❌	❌	❌	✔	✔	✔	❌
`width`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`word-spacing`	✔	✔	✔	✔	✔	✔	❌	✔	✔	✔	❌
`z-index`	❌	✔	✔	❌	✔	✔	❌	✔	✔	✔	❌

?符號說明：

✔：支援。
❌：不支援。
◯: 未知。
*：不被 Microsoft Outlook 2007 支援。

參考資料

[1]. dribbble
[2]. Email頁面程式碼書寫建議及規範

前端高質量郵件信開發實現 ?

背景

什麼是郵件信

低質量郵件信 `?`

高質量郵件信 `?`

實現高質量郵件信

實現效果

程式碼實現

測試高質量郵件信

高質量郵件信程式碼編寫原則

附錄

圖片遮蔽

郵箱客戶端對 `CSS` 的支援情況

`<style>` 標籤

`<link>` 標籤

`CSS` 選擇器

`CSS` 屬性

更多高質量郵件信

參考資料

相關文章

前端高質量郵件信開發實現 ?

背景

什麼是郵件信

低質量郵件信 ?

高質量郵件信 ?

實現高質量郵件信

實現效果

程式碼實現

測試高質量郵件信

高質量郵件信程式碼編寫原則

附錄

圖片遮蔽

郵箱客戶端對 CSS 的支援情況

<style> 標籤

<link> 標籤

CSS 選擇器

CSS 屬性

更多高質量郵件信

參考資料

相關文章

低質量郵件信 `?`

高質量郵件信 `?`

郵箱客戶端對 `CSS` 的支援情況

`<style>` 標籤

`<link>` 標籤

`CSS` 選擇器

`CSS` 屬性