上篇 中提到，電子郵件仍然是現(xiàn)代互聯(lián)網(wǎng)中最佳的通訊方式，掌握好這個(gè)工具無論是對(duì)我們的品牌傳播或營銷自化都會(huì)非常的有利。

雖然現(xiàn)在微信、QQ等通迅軟件已經(jīng)非常普通，但仍然代替不了電子郵件的地位，反而電子郵件通訊比以往都有更多的應(yīng)用來配合我們的互聯(lián)應(yīng)用，每個(gè)人都喜歡為他們的用戶設(shè)計(jì)一個(gè)美觀并豐富的網(wǎng)站，例如官網(wǎng)、商城、平臺(tái)。但非常不幸的是，電子郵件不是網(wǎng)站，也許你設(shè)計(jì)了漂亮的畫面，但在郵件中卻不能完美的呈現(xiàn)，或許在一個(gè)電子郵件客戶端中可能看起來很棒，但電子郵件客戶端種類煩多，結(jié)果可能會(huì)相差很遠(yuǎn)。可惜的是在百度上搜索也沒有找到非常完整的教程和經(jīng)驗(yàn)，我通過結(jié)合經(jīng)驗(yàn)及國外的一些分享得出了行之有效的總結(jié)，希望可以對(duì)后來人有所幫助。

我們的問題是很多電子郵件客戶端不能支持HTML和CSS的所有特性。 CSS（層疊樣式表）是一種流行、強(qiáng)大、靈活的網(wǎng)站設(shè)計(jì)的技術(shù)。（如果你不知道CSS是什么或者如何使用它，這篇文章你閱讀起來就會(huì)非常因難了，可事先對(duì)CSS進(jìn)行了解和學(xué)習(xí)方能流暢的閱讀本文）

在Gmail 2021的時(shí)候它的最嚴(yán)格的控制了CSS，因?yàn)樗鼤?huì)忽略所有外部和嵌入式CSS。微軟的Outlook 2021和2007實(shí)際上在CSS和HTML支持方面采取了很大的退步，選擇使用MS Word作為呈現(xiàn)引擎。出于這個(gè)原因，我們認(rèn)為與Gmail的兼容性CSS和HTML支持是設(shè)計(jì)郵件CSS的標(biāo)準(zhǔn)，畢竟他的客戶是比常多的，在國內(nèi)以QQ郵箱、163郵箱作為兼容標(biāo)準(zhǔn)。雖然有很多限制 ，但我們有個(gè)技巧就是老的HTML標(biāo)簽屬性將填補(bǔ)某些禁用內(nèi)聯(lián)樣式的作用（即空格，背景顏色，對(duì)齊方式等）

我們的目標(biāo)是盡量達(dá)到每個(gè)客端的電子郵件情況都如同我們?cè)O(shè)計(jì)的原樣，就是最偏門的電子郵件客戶端，也能看起來很不錯(cuò)。我們這里并沒有提到設(shè)計(jì)美學(xué)，只是編碼實(shí)踐的經(jīng)驗(yàn)分享，我們需要知道的幾件事如下：

一、編寫郵件HTML需要避免的事情

1、不能導(dǎo)入外部（ link rel="stylesheet" ）或嵌入式樣式表（包含于 style 標(biāo)簽中的樣式及 body 上面樣式）。這是最重要避免的事情。許多電子郵件服務(wù)將所有超出body標(biāo)記的內(nèi)容刪除，并禁用外部樣式表。也就是說，只要你在某些電子郵件客戶端中不渲染，你就可以包含一些內(nèi)嵌的CSS語句（比如鏈接顏色）。

2、不要在電子郵件代碼中使用JavaScript。因?yàn)檫@樣會(huì)讓你的E-mail標(biāo)識(shí)為垃圾郵件。

3、不要在 body 上使用標(biāo)簽屬性（如寬度或背景顏色）。大多數(shù)電子郵件服務(wù)忽略 body 標(biāo)簽。你可以試著把你的整個(gè)內(nèi)容放在一個(gè)div中，并用 inline styles來設(shè)置它的樣式，但是結(jié)果可能會(huì)有所不同。

二、郵件編碼最佳實(shí)踐

1、使用表格 table 進(jìn)行布局。有些地方也允許 div 布局，但我們的經(jīng)驗(yàn)表明 table 更受支持。哈哈，重新?lián)肀П砀癫季?，那可是十年前的網(wǎng)頁布局的主流。

2、在表格中使用內(nèi)聯(lián)樣式（inline styles）。事實(shí)上，你會(huì)發(fā)現(xiàn)你可以在內(nèi)聯(lián)標(biāo)簽中獲得內(nèi)聯(lián)樣式的最佳里程數(shù) td 。這樣，您就可以在每個(gè)表單元格中設(shè)置小樣式區(qū)域。將這些內(nèi)聯(lián)樣式看作是微型樣式表。這允許非技術(shù)用戶以模塊化的方式交換預(yù)先格式化的單元格中的內(nèi)容。

3、固定寬度(width="100")，單元格邊距和單元格間距，所有表格和單元格。這樣做將導(dǎo)致模板的固定寬度。這很有幫助，因?yàn)榇蠖鄶?shù)人會(huì)在預(yù)覽窗格中查看時(shí)事通訊，這比他們的監(jiān)視器寬度小得多。不要給機(jī)會(huì)留下寬度，因?yàn)楹芏嚯娮余]件客戶端喜歡“填充空白”，這會(huì)破壞設(shè)計(jì)。

4、通過發(fā)送給你自己或同事來測(cè)試你的電子郵件。這將給你最好的機(jī)會(huì)來捕捉任何問題之前，您的整個(gè)訂戶名單！發(fā)送測(cè)試郵件各種電子郵件客戶端，如Outlook，Hotmail和Gmail，163郵箱，QQ郵箱。

三、關(guān)于郵件中使用的圖像

1、不要使用背景圖像。在Gmail中會(huì)忽略任何url()內(nèi)聯(lián)樣式屬性，和舊的背景HTML標(biāo)簽屬性。如果你愿意你可以使用背景色（bgcolor或 background-color：CSS聲明）。

2、不要將圖片用于重要的內(nèi)容，如按鈕、標(biāo)題和網(wǎng)站鏈接。Outlook，Gmail和其他用戶默認(rèn)關(guān)閉顯示 圖像，只有用戶允許才會(huì)顯示 。如果你的整個(gè)郵件都是圖形化的，你所有的收件人都會(huì)看到很少的內(nèi)容。

3、為所有圖像提供alt文本（ img alt="text" ）。這樣讀者就會(huì)看到一些內(nèi)容代替沒有顯示的圖片。

4、聲明圖像的高度和寬度參數(shù)。一些電子郵件客戶端默認(rèn)為未聲明的高度或?qū)挾鹊摹?”。

使用空間和vSpace標(biāo)簽屬性添加圖片周圍的空白間距。margin和padding內(nèi)聯(lián)樣式是最支持的，但并不是所有的電子郵件客戶端（Outlook和Hotmail提供有限的支持）。

為了避免額外的空格下方的圖像（特別是在tables），應(yīng)用style="display:block;"img標(biāo)簽。這將刪除多余的空格中經(jīng)常出現(xiàn)的問題。

四、目前最流行的移動(dòng)、網(wǎng)絡(luò)和桌面電子郵件客戶端的CSS支持手冊(cè)。