如何建立完美的HTML郵件

製作一封郵件和製作web頁面還是有很大不同的。當不同的瀏覽器都在不斷向標準靠近的同時，大多數郵件客戶端卻止步不前，甚至有一些是在退步的。在2007年，Microsoft 將 Outlook 的渲染引擎從 IE 轉換成 Word的渲染方式，而一些基於web的郵件客戶端，像Gmail和Hotmail，則增加了一些怪異的模式，還有Lotus Notes的一些技巧。

根據我的經驗來看，我們解決這些問題的關鍵是要關注下面三件事情。首先，保持簡單，你的郵件設計的越複雜，你的郵件在某個受歡迎的、不支援標準的客戶端上“抽風”的可能性就越大。其次，你需要將你的編碼技巧退步十年，這通常意味著我們要使用巢狀的表格，將CSS寫成內聯的形式等。最後，你需要對你的設計進行規律性的測試。

使用表格佈局

因為諸如Gmail和Outlook 2007 無法支援浮動(float)、外邊距(margin)、內填充（padding）,你需要使用表格來作為你的郵件的框架。雖然表格巢狀的方法被廣泛支援，但是在對單元格的寬度、外邊距和內填充的處理方法並不一致。為了達到最優的效果，當製作表格結構時，請記住下面的技巧。

1、為每個單元格設定寬度，而不是表格

當你把表格寬度、td 寬度、td的填充和CSS的填充寫到一封郵件時，你看到的結果可能是每個郵件客戶端它們看上去都不一樣。最可靠的方法是我們將為表格的每個單元格(th,td)設定寬度，而不是表格(table)本身。如下：

永遠別指望郵件客戶端能夠計算出你沒有指定寬度的單元格的寬度。它絕對不會。同時也要避免使用基於百分比的寬度，像 Outlook 2007 這樣的客戶端從來不考慮這種寬度方式，特別是這些巢狀的表格。畫素級視覺，如果你想對每個單元格做填充，可以使用表單的單元格填屬性或者用CSS的內填充，但是不要這兩種一起使用。

2、巢狀迷思

表格的巢狀相對於設定左右浮動和外邊距(margin)或者表單單元格填充的方法更加穩固。如果你能使用這種表格巢狀的方法達到相同的效果，這將會給你在那些蹩腳的（buggier）郵件終端上面獲得最好的結果。

3、使用一個容器表單來設定 body 背景色彩

很多郵件客戶端會忽略掉在CSS中或者標籤中設定的背景色。針對這種情況，將你的整封郵件用一個寬度為100%的表單包起來，並且為其設定背景色。如下：

你可以使用同樣的方案在背景圖片的設定上，需要記住的是某些郵件客戶端是不支援背景圖片的，這樣你就需要設定一個背景顏色作為備份方案。

4、在單元格中避免使用多餘的空格（whitespace）

盡最大可能，避免

CSS 和基本的文字格式

當某些郵件設計師盡他們最大的努力去避免使用CSS時，他們又會去依賴夢魘般的標籤，但實際情況是很多的CSS屬性是被大部分郵件客戶端支援的。請檢視下面的跨郵件終端的綜合CSS支援列表list of CSS support，從中你也能發現一些安全的屬性和一些應該被避免使用的屬性。

1、將css寫成內聯(inline)的樣式

Gmail就是這方面的罪魁禍首。CSS被從和中剝離，我們別無選擇的會將樣式寫成內聯的形式。一個好訊息是你可以完全自動化的完成轉化。像Premailer提供意見點選的方式完成這一過程。我強烈建議你將此步驟作為你構建活動的最後一步，你就能感受到這個CSS的所有益處。

2、避免使用字型的簡寫和十六進位制計數法

一部分郵箱客戶端會放棄對簡寫的css字型屬性的解析。比如，絕對不要將你的字型樣式設定成下面的樣子。如下：

相反，我們應該寫成下面的形式：

談到字型這個話題，我最近也在不同的郵件客戶端測試引用字型（@font-face）。結果是淒涼的，這些瀏覽器安全的字型在郵件中使用還是遙遙無期。

當我們用CSS來宣告顏色屬性時，有些郵件客戶端並不支援簡寫的16進位制的顏色值，比如 color:#f60; 我們需要將其補充完整 color:#ff6600;。為了達到最優的效果，我們需要使用常規寫法。

段落

像前面提到的單元格的間距，段落的間距也無法做到所有客戶端的一致。我看到過設計師使用兩個
或者用DIV寫上內聯(inline)的外邊距(margin)樣式彌補這個短板，但是我最近的測試顯示大多數情況下對段落的支援都還是比充足的（有一段時間 Yahoo! 根本不支援段落標籤）。

最好的實踐方法是對每個段落通過內聯(inline)的方法設定外邊距(margin)，像下面這樣：

再次提示，在你構建郵件的時候通過在head標籤中增加樣式，然後通過Premailer將他們轉化成每個段落的內聯樣式。

如果你的設計對高度是很敏感的或者需要畫素級別的完美，我強烈建議你不要將所有的段落寫到一起，而是將文字的格式化工作放到表單的單元格中來做。你可能會需要使用到表單的巢狀或者單元格填充(cellpadding)/CSS 來達到期望的樣子。下面就是一個例子：

連結

某些郵件客戶端將會用他們的預設樣式覆蓋你的連結色，你可以通過兩部來防止其發生。第一，針對每一個連結設定一個內聯的（inline）的顏色：

接下來，增加一個冗餘的 span 標籤在 a 標籤中。

也許這些方案看上去比較過激，如果這個顏色對你的設計很重要，這個多餘的 span 標籤是你達到一致表現的最好解決方案。

HTML郵件中的圖片

很重要的一件需要牢記在心中的關於圖片的事情是你的訂閱者可能看不到你的圖片。如果你有這方面的準備，你就會保持你的內容簡單，並且重要的內容不通過圖片的形式來展示。

在這個思想的指導下，在使用HTML郵件的過程中，下面有一些基本的要領需要牢記：

1、避免佔點陣圖片

雖然使用佔點陣圖片和巢狀表格的方式在10年前很流行，許多郵件客戶端已經將其排除作為一種可靠的技術。很多客戶端會使用一個相同尺寸的空佔位來替換圖片，另外一些會將所有的圖片移除。大多數郵件客戶端會給圖片賦予預設的圖片區塊，這將導致訂閱者的第一感覺很差。堅持將單元格賦予固定的寬度，讓其在沒有圖片的時候版式不會亂掉。

2、將圖片定義尺寸

如果你沒有給每個圖片設定尺寸，當圖片沒有被下載時，有些客戶端會自己發明一個他們自己的尺寸，你的版式就亂掉了。同時，確保你的所有圖片在被用到郵件中前，都被賦予了正確的尺寸。某些客戶端會忽略你程式碼中設定的尺寸，而去使用真實的圖片尺寸。

3、避免使用 PNG 圖片

Lotus Notes 6 和 7 並不支援 8位（8-bit）和24位（24-bit）的 PNG 圖片，所以需要使用GIF或者JPG格式的圖片，即使這會增加而外的圖片大小。

4、為背景圖片提供備份的顏色

Outlook 2007 不支援背景圖片(aside from this hack to get full page background images working)。如果你想在你的設計中使用背景影象，提供一個背景色作為備份支援方案。這樣就能同時解決圖片被遮蔽和Outlook 2007的問題。

5、不要忘記標註替代文字（alt text）

缺少標準的支援意味著郵件客戶端對語義化和訪問性良好的HTML郵件的破壞性是很大的。即使這樣，從圖片可能被遮蔽角度看，提供替代文字也是很重要的。這樣即使圖片在預設狀態下被限制，大多數郵件客戶端也能顯示提供的文字來替代。另外還需要技術的是某些客戶端，比如 Outlook 2007, Hotmail 和 Apple Mail 在圖片被遮蔽的時候，並不提供替代文字（alt text）.

6、針對 Hotmail 使用顯示hack

令人費解的是，Windows Live Hotmail 對每個圖片增加了幾個畫素的填充。一個變通的方案就是使用下面的顯示屬性來解決這個問題。

這樣就能移除掉Hotmail的填充值，但是你也可能會給其它客戶端埋下隱患。

7、避免使用浮動屬性（float）

Outlook 2007 和早期版本的 Notes 並不支援浮動屬性（float）。在郵件中我們可以使用對齊屬性在針對影象標籤做到浮動圖片的目的。

如果你在 Yahoo！的郵件中發現圖片的怪異表現，增加 align="top" 可能能夠解決你遇到的問題。

視訊郵件

由於缺少 Javascript 或者其他物件標籤（object tag）的支援，視訊郵件最大的程度就是gif動畫（如果你認為那是視訊的話）。儘管如此，我最近做的一些關於用html5 videio 標籤的測試結果，還是讓人感覺不錯。

HTML 5的標籤目前在一部分郵件終端是無法執行的，包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作為如果視訊不被支援的補救方法，你可以提供穩定的備選內容，比如gif 動畫或者一個可以點選到瀏覽器播放視訊的圖片。

當然，你是否需要將視訊新增到你的郵件裡面，那就是另外一個議題了，如果你的答案是肯定的，你可以使用這些程式碼案例。

關於移動端郵件的那些事

移動端有機胺的情況近期顯得比較雜亂了，隨著iPhone,Android的發明和Palm和RIM的改進，認為移動端電子郵件終端不重要的年代一去不復返了。

為了給移動端訂閱使用者良好的體現，我們在編碼的過程中也有幾個關鍵點需要牢記心中。

1、保持寬度小於600畫素

受限於郵件客戶端的視窗，這條規則來移動視窗到來之前的年代就很重要。事實上，iphone 的視窗是320畫素，Droid是480畫素，Blackberry大概360畫素。堅持最大600畫素寬的設計，能夠讓你的郵件縮小到上面提到的裝置上面依然可讀。這個尺寸在桌面端和web端的預覽效果也很好。

2、注意文字尺寸的自動調整

作為一個好的特性，基於webkit郵件客戶端(比如 iPhone, Pre 和 Android) 能夠自動調整文字的大小來提高閱讀性。如果你的測試結果表明這項特點給你帶來的好處是破外了你的設計，你可以通過下面的屬性禁用：

不要忘記去測試

雖然近幾年郵件客戶端對標準的支援並沒有取得長足的進步，但是某些郵件客戶端的改變卻從未停止（有好有壞），基於 web 的客戶端，如 Yahoo!、hotmail 和 Gmail 在這方面乏善可陳。我看到過無數次可行的設計方案被停止支援，沒有任何解釋。

基於這個原因，你也要對你的郵件設計保持規律的測試。我發現每個月進行一些快速的測試的小技巧，特別基於web的客戶端。好的訊息是經過幾次設計和測試，你將會從這些雜亂無章中找到規律。一些潛在的陷阱將變的可以預計，一個對郵箱友好的設計模型也會在你心中成型。

本文參考“新浪UED”：建立堅如磐石的HTML郵件