從頭開始構建一個 HTML Email 模板

() translation by (you can also view the original English article)

理解任何過程的最好方式就是從頭自己時間一遍。今天，我們來實踐 Email 設計，從頭建立一個 HTML Email 模板。

開始

在開始之前，值得提及的是本文引用的資源來源。

可愛的2D 圖標 by Pierre Borodin on Dribbble
使用的字體是 Oli Can, Source Sans Pro 和 Mission Script
社交圖標 by Metrize Icons

現在，正如我們在之前教程中討論過的，你可以從一個 XHTML doctype 開始你的HTML Email 文檔。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

與排序，我們可以開始構建結構的其餘部分。

創建 Body 和主表格

首先，從標籤<body>開始，我們將為 email 添加一個總體的結構，把 body 標籤的內外邊距設置為零，來去掉所有不必要的空格。

添加一個寬度為100%的表格。對於我們的email來說，tabl標籤將會作為body標籤，因為body標籤的款式不被完全支持。如果你想給email的body添加背景顏色，你需要把它應用在這個大表格上。

設置你的單元格padding（內邊距）和單元格spacing（間距）到0來避免任何不需要的空白區域出現在表格中。

注意：把所有表格設置為border="1"，這樣方便看到它的骨架。在最後將用簡單的查找替換的方式去掉它。

<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    Hello!
   </td>
  </tr>
 </table>
</body>

如果存在標籤屬性，直接寫入HTML，不要用CSS

現在在容器表格中添加一個寬度為600px的居中表格。如果你希望你的郵件可以舒服的顯示在大多數分辨率下的桌面郵件程序或者網頁版郵件程序，600像素就是一個安全的最大寬度。

在HTML中用width屬性設置寬度，不要用CSS。 HTML郵件開發的黃金規則就是：如果有屬性，就用HTML不用CSS。

然後用這個表格替換”Hello!"：

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
 <tr>
  <td>
   Hello!
  </td>
 </tr>
</table>

我們同時添加了一個行內樣式屬性，將border-collapse設定為collapse。如果我們不這麼做，新一點版本的Outlook會在我們的表單和邊框之間添加一個小的白色區域。

創建結構和頁眉

在我們的設計裡，我們可以看到郵件是分為三個邏輯區域的，所以我們需要逐行來創建他們。

讓我們複製我們已經做好的表單中的行來製作出總共3個區域。我已經將其中的文字進行了改變，這樣我們就可以輕易的分辨出我們操作的是第幾行。

1	<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
2	<tr>
3	<td>
4	Row 1
5	</td>
6	</tr>
7	<tr>
8	<td>
9	Row 2
10	</td>
11	</tr>
12	<tr>
13	<td>
14	Row 3
15	</td>
16	</tr>
17	</table>

現在，我們需要根據設計需要來為他們添加顏色，由於bgcolor是一個有效地HTML屬性標籤，我們將用它來設置背景顏色，而不是CSS。永遠記住使用全部六位數的16進制顏色代碼，因為如果只是3位的簡寫有時候會不工作。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td bgcolor="#70bbd9">
   Row 1
  </td>
 </tr>
 <tr>
  <td bgcolor="#ffffff">
   Row 2
  </td>
 </tr>
 <tr>
  <td bgcolor="#ee4c50">
   Row 3
  </td>
 </tr>
</table>

好了，下一步我們要著重關註一下Row 1（第一行），我們希望修改他的padding來插入我們的圖片。

使用Padding

當在郵件中使用padding的時候，你必須總是特別的交代每一個方向的值（上、右、下、左），否則你有可能會獲得不想要的結果。我發現你任然可以使用簡寫，例如：padding: 10px 10px 8px 5px;，但是如果你發現它有任何的問題，你可能需要使用最長的一種方式把完整的表達式寫出來，例如：padding -top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;。

如果你的padding出現了更大的問題（例如你的郵件發送平台完全的剔除了你的CSS），那就完全不要使用它就好了，作為替代，簡單的使用一個空白的單元格來創建空白區域就好。使用創建空白的GIF是沒有必要的，你只需要確保你添加了style="line-height: 0; font-size: 0;"到你的單元格，並且在其內部放置一個並給它一個明確的高度或者寬度即可。這裡有個例子：

1	<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>

同時需要注意，將padding用在td標籤上但不要用在p或者div上會更安全，它們有時候會表現的更為不可預計。

這樣，我們就使用了一些內嵌的CSS來添加padding到單元格里，接下來我們要插入我們的圖片，添加alt文字以及添加style="display:block;"，這是一個比較常用的修復一些郵件客戶端在你圖片下方添加空白的方法。添加一個align="center”到我們的td標籤來居中顯示圖片。我們同時需要添加alt標籤，它是在我們郵件最開始被讀取的時候的一個很重要的元素，在大多數情況下，在無法讀取圖片的時候會顯示。

注意：如果你頁眉的內容對你的整體郵件非常的重要，那麼就不要僅僅使用圖片作為頁眉。記住，在大多數客戶端圖片是默認被阻擋的，所以如果你郵件的外觀是非常決定性的，那麼永遠不要使用一個圖片來作為頁眉。當然了，在本樣例中，我的頁眉確實是一個多餘的部分。

1	<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
2	<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
3	</td>

創建正文部分

首先，我們需要添加一些padding到單元格的中間，這樣在其內部的表單就有一圈白色的空間，正如我們所設計的那樣。

現在，我們要添加一個新的三行的表單來容納我們的正文內容——一個大標題、一段引導性的文字、以及一個段落來放我們的兩個列的內容。我們會設置這個表單的寬度為100%而不是使用像素化的值，因為如果你想得到一個完全自適應的郵件這會幫助我們更容易實現。如果你在所有的元素上一直都使用像素化的寬度，那麼你有可能在最後會需要創建很多的media query來覆蓋逐個的值。反之，如果你將子表單的寬度設置為百分比，那麼當你調整其父對像元素的寬度時，所有的值都會相應的被繼承。

1	<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
2	<table border="1" cellpadding="0" cellspacing="0" width="100%">
3	<tr>
4	<td>
5	Row 1
6	</td>
7	</tr>
8	<tr>
9	<td>
10	Row 2
11	</td>
12	</tr>
13	<tr>
14	<td>
15	Row 3
16	</td>
17	</tr>
18	</table>
19	</td>

現在，我們要添加我們的正文，然後添加一些padding到單元格的中間。

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Lorem ipsum dolor sit amet!
  </td>
 </tr>
 <tr>
  <td style="padding: 20px 0 30px 0;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
</table>

接下來，我們將要添加我們的兩個列的內容到Row 3（第三行）。因為我們希望在這兩個單元格之間有一個‘margin’，但是margin又不是被支持的，所以我們創建了一個三行的表單並且保持中間一行是空白的。

如果像我這樣也特別喜歡使用百分比，當你有一個內容需要使用特定的尺寸，那麼將它轉換為一個特定的百分比會變的比較棘手（例如，這個列需要是48.1%的寬度，看起來就很茫然）。所以因為這個原因，由於我們的兩個圖片都是260像素寬的，我們就創建兩個260像素寬的列來與之配合，同時在中間我們會有一個20像素的空白單元格作為margin。（這樣總共是540像素，我們的表單全寬是600像素，外加每一側邊30像素的padding）確保在你的margin單元格里面設置文字大小（font-size）到0，行高（line- height）為0，並且添加一個不換行空格字符 &nbsp 。

我們同時為兩個單元格設置valign到”top“，這樣他們在縱向上就會向上對齊到頂部，即使一個列會比另外一列包含更多文字。默認的縱向對齊設定是"middle"。

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   Column 1
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   Column 2
  </td>
 </tr>
</table>

現在，讓我們添加我們的圖片和內容到這些列裡面，由於我們需要很多行，我們需要將他們安放到另外一個表單裡面，我們同時需要在每個列的圖片和文字之間添加一些padding。

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

在這裡，我使用HTML將圖片的寬度設置為列寬度的100%，這樣，再次的，如果我們將郵件製作為自適應的版本，我們僅僅需要使用media query來改變其父對象的寬度即可。我們需要使用像素值來覆蓋其高度屬性，因為使用style="height: auto"並不能在所有的客戶端工作（咳咳，Outlook）。所以我們就要將其設置為像素。這就說明我們需要使用media query設定height: auto!important到那些圖片來覆蓋它們的像素值，但是我們可以使用一個類就完成它。由於我們使用了百分比的寬度，我們就不需要額外的覆蓋它了。越少的覆蓋，就越好。

頁腳

現在，我們要為我們的頁腳添加一些padding。

1	<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
2	Row 3
3	</td>

在單元格的內部，我們將要嵌入另外一個表單來創建我們的兩個列。

<table border="1" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Column 1
  </td>
  <td>
   Column 2
  </td>
 </tr>
</table>

我們需要創建另外一個更小的表單來囊括我們的社交媒體圖標們，首先將它的父對象單元格設置為align="right"，然後確保你設置border="0"到這個圖片鏈接上（來避免產生藍色的鏈接邊框）並且別忘了添加display:block。

<td align="right">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
   <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
   <td>
    <a href="http://www.twitter.com/">
     <img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
    </a>
   </td>
  </tr>
 </table>
</td>

現在，我們添加了文字到單元格里，即便我們還留出了很多的空白區域，但為了確保安全，我們還添加了寬度到我們的單元格。我們需要設置這個單元格的寬度為75%然後另外一個是25%。

1	<td width="75%">
2	® Someone, somewhere 2013<br/>
3	Unsubscribe to this newsletter instantly
4	</td>

這樣就完成啦！我們的佈局就全部結束了。

驗證

讓我們用W3C驗證器執行這個代碼來確保沒有任何壞的或者不完整的代碼。如果你一直是完全跟著我做的，它應該會說是通過的。

下一步，我們將要使用Litmus運行一個測試來確保我們郵件的結構是完美的。這裡是我做的測試的總結：

為文字添加樣式

我們的第一行是頁眉，我們將使用一個<b>標籤來創建粗體的文字，因為你可能已經知道了，如果HTML標籤是可以用的，我們將使用它來替代CSS。

1	<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">
2	<b>Lorem ipsum dolor sit amet!</b>
3	</td>

我們同時需要添加這個內嵌的樣式到其他的所有單元格文字：

1	style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

下一步，我們需要為頁腳添加文字樣式，並且我們需要整理一下退訂的鏈接。同時，退訂的鏈接文字將使用CSS以及HTML的<font>標籤。這個雙保險是最好的一種方式來確保你的鏈接永遠都不會顯示成默認的藍色。

1	<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;">
2	® Someone, somewhere 2013<br/>
3	<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly
4	</td>