散文網(wǎng) » 科技 »學習 » 前端高質(zhì)量郵件信開發(fā)實現(xiàn)

前端高質(zhì)量郵件信開發(fā)實現(xiàn)

2023-06-29 20:53 作者:unlexx 0人讀過 | 我要投稿

聲明：本文涉及圖文和模型素材僅用于個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。

背景

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

什么是郵件信

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

低質(zhì)量郵件信 ??

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

高質(zhì)量郵件信 ??

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

實現(xiàn)高質(zhì)量郵件信

實現(xiàn)效果

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

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

代碼實現(xiàn)

在?<style>?標簽中可以添加全局樣式代碼，大部分郵箱都支持在?header?標簽中添加樣式，不過也有可能少數(shù)古早的郵件客戶端會將這部分樣式過濾掉，在這種郵箱客戶端中只能通過?行內(nèi)樣式?來解決。

如下面示例代碼所示，html?使用?table?布局，以便于盡可能兼容所有郵件客戶端。頁面父級容器是一個?table?元素，它?3?個子元素也是?table?元素，第一個?id="top-message"?和第三個用于在頁面頂部和頁腳顯示提示信息、第二個?table?id="main"?是郵件信的主體部分，它里面的每個子元素模塊也是?table?元素，而頁面的內(nèi)容主要填充在?tr?與?td?元素中。

???完整代碼：https://github.com/dragonir/start-html-email

測試高質(zhì)量郵件信

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

高質(zhì)量郵件信代碼編寫原則

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

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

???外鏈的?css?樣式在郵件里將不能被讀取，發(fā)送出去的郵件會失去樣式。

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

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

列表樣式：如果文字內(nèi)容是寫在?<li>?里，樣式盡量寫在?<ul>?里，在sohu?郵箱中寫在?<td>?或?<tr>?里的樣式會被過濾，其它郵箱沒有問題。
`img` 元素設置寬高：所有的圖片都要設置?height?和?width。這點很關鍵。關鍵圖片要添加?alt?屬性。

???alt?屬性是讓郵件在圖片未加載完成前提示圖片內(nèi)容。

不要設置鼠標事件：不要在郵件內(nèi)容中設置鼠標經(jīng)過事件如?onMouseOut，onMouseOver，發(fā)送到郵箱后會被過濾，將不能正確顯示設定鼠標經(jīng)過所顯示的內(nèi)容。
不要回車換行：同一段文字請盡可能放在同一元素里。如果有多段文字，千萬不要用回車換行，這樣會導致郵件中自動換行符導致該標簽雙倍行高。
添加可替代網(wǎng)頁：制作一份和郵件內(nèi)容一樣的?WEB?頁面，然后在郵件頂部提示鏈接?如果您無法查看郵件內(nèi)容，請點擊這里查看。這樣即使郵箱客戶端內(nèi)異常，通過鏈接也能查看正確內(nèi)容。
壓縮體積：HTML?代碼和圖片盡量不要超過?50kb。

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

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