碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2021-10-25 21:43   1626    前端

背景

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

什么是郵件信

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

低質量郵件信 👎

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

高質量郵件信 👍

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

實現高質量郵件信

實現效果

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

🔗 在線預覽：https://dragonir.github.io/start-html-email

代碼實現

在 <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/start-html-email

測試高質量郵件信

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

高質量郵件信代碼編寫原則

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

  1. 頁面寬度：推薦 600px - 800px，最大不要超過 800px。

  2. 頁面布局：制作 email頁面時，不要使用 css+div 來布局，使用 table 來布局。

  3. 樣式：定義文字或圖片樣式時，不要使用外鏈 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 樣式在郵件里將不能被讀取，發送出去的郵件會失去樣式。

  1. 動態內容：不使用 Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML，如果頁面中的圖片一定要是動態的，可以使用 gif 動圖。

  2. 標簽：<table> 以外的 body、meta 和 html 之類的標簽是可以無視的，郵箱系統里會把這些過濾掉。

  3. 背景圖片：有背景圖時，style 內容里面 background 可以設置 color，但是 img 會被過濾，就是說不能通過 css 來設置背景圖片。但可以直接寫在代碼里。如：

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

💡 在 outlook 中查看郵件時背景圖片不顯示，同時，背景圖需要用絕對地址。

  1. 列表樣式：如果文字內容是寫在 <li> 里，樣式盡量寫在 <ul> 里，在sohu 郵箱中寫在 <td> 或 <tr> 里的樣式會被過濾，其它郵箱沒有問題。

  2. img 元素設置寬高：所有的圖片都要設置 height 和 width。這點很關鍵。關鍵圖片要添加 alt 屬性。

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

  1. 不要設置鼠標事件：不要在郵件內容中設置鼠標經過事件如 onMouseOut，onMouseOver，發送到郵箱后會被過濾，將不能正確顯示設定鼠標經過所顯示的內容。

  2. 不要回車換行：同一段文字請盡可能放在同一元素里。如果有多段文字，千萬不要用回車換行，這樣會導致郵件中自動換行符導致該標簽雙倍行高。

  3. 添加可替代網頁：制作一份和郵件內容一樣的 WEB 頁面，然后在郵件頂部提示鏈接 如果您無法查看郵件內容，請點擊這里查看。這樣即使郵箱客戶端內異常，通過鏈接也能查看正確內容。

  4. 壓縮體積：HTML 代碼和圖片盡量不要超過 50kb。

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

  1. 限制圖片數量：在制作 HTML 郵件內容時，鏈接數量盡量保持在 10 個以內，如果同一模板內所有圖片的鏈接地址一樣，可以將所有小圖拼成一張大圖使用。

  2. 使用絕對路徑：郵件模板內的所有超鏈接使用絕對地址，以確保收信人在點擊超鏈接時能夠正常瀏覽內容。

  3. font-family 屬性可以省略：font-family 屬性是非必要的，如果有 font-family且值為空，會被 QQ郵箱 屏蔽為垃圾郵件。

  4. 居中顯示：制作模板時，如果希望郵件內容全部左右居中顯示的話，需要將 table 的 width 設為 100%。

  5. 避免在郵件中直接顯示網址：頁面的文字中不要出現網址，會被有些郵箱被屏蔽為垃圾郵件，網站可以寫在 a 標簽中。

  6. 文件名稱小寫：如沒有特殊要求，圖片的文件名稱一律使用小寫。

  7. 避免使用尺寸過小圖片：不要在郵件中使用高度過小的圖片，outlook2007 不能很好的顯示高度為1像素的圖片，會出現拼合縫隙

  8. 可以將邊距留在切圖中：在切圖時，可以為需要為文字區域留出一定的邊距，由於 outlook 中默認行間距和字間距大於普通網頁，預留邊距可以防止出現不必要的換行和圖片縫隙。

  9. 使用 <br> 換行：因 hotmail 信箱的接收問題，段落之間不要用 <p> 標記，用 <br> 代替。

  10. 推薦行內樣式：由於 Gmail 的兼容性問題，假如td里有文字，如要定義該文字樣式，必須在 td 里寫 style 行內樣式來定義字體。

  11. 使用強制換行：td 內樣式最好加上 style=”word-break:break-all;，其作用在於不會讓表格撐開，會強制折斷文本換行。

  12. 純文本郵件：郵件標題不要超過 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>標簽 ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
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 支持。

更多高質量郵件信

使用高顏值的設計稿，添加gif動畫等設計元素，可以開發出更加高質量的郵件信。下面幾個郵件信設計是我在逛 dribbble 時覺得好看的。在項目沒有設計師的情況下，我們也可以多逛逛設計網站找找開發靈感，做到真正的 全鏈路全棧 開發 🌟。

參考資料

本文作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/15463365.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 編寫高質量代碼:Web前端開發修煉之道（一） 編寫高質量代碼:Web前端開發修煉之道（四） 高質量編程 使用 WordPress 插件模板開發高質量插件 五郎高質量求偶視頻——開發日志 高質量代碼的特征 如何搜索高質量論文 前端高質量知識(一)-JS內存空間詳細圖解 R語言繪圖高質量輸出 如何快速准備高質量的AI數據？
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM