開始制作HTML Email（商品宣傳郵件EDM）

本文轉載自查看原文 2014-02-19 22:59 3636 web設計

出自：http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails 作者:Tessa Thornton

譯文：http://www.w3cplus.com/css/getting-started-with-html-emails.html 譯者：大漠

HTML Mail介紹

作為Web開發人員，編寫HTML電子郵件是一件非常具有挑戰性的任務，我們也必須得處理。幸運的是，當我的第一個客戶要求我設計和編寫一個HTML電子郵件的通知，他耐心的陪我渡過整個編寫過程，讓我明白了編碼HTML電子郵件的一切。你可能不會有我那么幸運，所以本教程可以幫你做好一切的准備。

電子郵件客戶端的問題

你認為IE很痛苦。等你見到Outlook2007，你就不這么認為了。因為電子郵件客戶端渲染HTML/CSS有巨大差異，在許多流行的電子郵件客戶端使用現代編碼技術讓布局相當的混亂。電子郵件客戶端和瀏覽器渲染HTML不一樣——甚至在許多情況下不一樣。浮動、背景圖像，甚至是外距不再是你編寫代碼的一些詞匯。所以你應該怎么編碼呢？

解決文案：代碼像1997年的一樣

這是正確的。table、cellpadding、cellspacing、colspan，所有這些你以為你可以使用。格式是電子郵件唯一布局的方法，所以你暫時要忘記你喜歡的CSS方式和你想要的語義化，這樣只會讓表格更混亂。

步驟一：電子郵件設計

保持簡單

當設計一個HTML電子郵件時，請記住保持簡單。我們今天使用的設計是一個多列布局，主要是出於演示的目的，但電子郵件布局的時候，編碼的時候考慮堅持兩列布局，這樣能為您省去很多麻煩的事情。

減少圖像的使用

記住你的設計不能太花哨，因為Outlook不支持背景圖像。事實上，根據客戶的需求，你可能想跳過Photoshop的過程，強迫自己完成一個實用型的電子郵件設計。也就是說，在這里我們將使用Photoshop，這樣你就可以更好的理解我們要做的事情。

如果郵件是清晰的或者不用沒有什么影響的，你可以使用背景圖片來裝飾。例如，我們要給郵件頭部添加一個漸變的效果，如果它不會顯示，但這也沒什么大不了。

窄屏最好

因為電子郵件客戶端預覽窗口通常只是一小部分屏幕寬度，你最好上你的電子郵件的寬度設計在大約600px。沒有人喜歡水平滾動條。

保持一致

記住，我們使用固定的元素屬性cellpadding和cellspacing設置單元格的邊距和單元格的間距。這樣保持元素之間的間距一致性是正確的與謹慎的。

我們的設計

這個設計類似於去年夏天我的客戶的一個電子郵件通知的設計，他非常的簡單。這雖然不是很好看，但這並不很重要。他非常簡單一致，有許多布局選項，這樣你就可以看到他們是不同的。

開始制作HTML Email

步驟二：規划我們的代碼

以我的經驗來看，HTML電子郵件代碼變得非常的復雜，非常的快速。重要的是要有一個可行性計划。這里是我們的計划(我們會回來的，如果你沒有遵循，不用擔心)。

首先，我們先要設置一個寬度為100%的灰色背景，這是我們的表格容器。

接下來，請注意表容器里有三個單獨的表格：一個在頂部，放置“瀏覽器中查看”的鏈接，中間的表格放置主要內容和一個度部的表格，用來放置“郵件退訂”鏈接。

開始制作HTML Email

最后，在主表格中，每個水平區域的內容都放置在表格的行或單元格里。也就是說，表格的每個單元格都包含了每一個內容。

開始制作HTML Email

`cellpadding`和`cellspacing`

我們將使用HTML的cellpadding和cellspacing屬性來替代CSS的margin和padding屬性。

cellpadding和CSS的padding幾乎是一樣的——用來設置內容周邊的空白空間。cellspacing是用來設置表格單元格與單元格之間的間距。

#main表格設置了15px的cellspacing，這樣我們的主內容周圍就有15px的空白間距，每個水平組之間有15px間距。cellpadding和cellspacing僅僅適用於父表格，而不適合每一個單元格。如果我們不希望有單元格邊距或單元格間距，我們只需要給每個表格指定他們的值為0。

步驟三：開始編碼

現在我們可以一段一段的為我們的電子郵件開始編碼。與最佳實踐相反，我們將要單獨的給每個結構添加樣式。我們將從布局開始，包括所有的間距和內距，背景顏色，之后我們要寫排版和其他的CSS樣式。

設置

設置電子郵件很簡單：只包括了html、head和body標記。讓我們在表容器中放置我們之前討論的三個主要表格。

對於DOCTYPE布言，有幾種不同的方法，在這文章中做過詳細的介紹。在我們的這個例子中，我決定不使用任何文檔類型，因為我們不需要任何DOCTYPE聲明的任何東西。在大多數情況下，電子郵件客戶端會刪除我們自定義的DOCTYPE類型。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Nettuts Email Newsletter</title>
    </head>
    <body>
        <table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4">
            <tr>
                <td>
                    <table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- top message -->

                    <table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">
</table><!-- main -->

                    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- bottom message -->
                </td>
            </tr>
        </table><!-- wrapper -->
    </body>
</html>

注意兩個信息的表格設置了cellpadding值為20px。這將設置了主內容中段落的空間。主表格設置了15px的cellspacing。這是為了在垂直方向有一個間距。因為每個部分都放置在表格的單元格里，他們之間設置了一個15px的間距。

還要注意，表格都設置了align="center"和我們都定義了表格的寬度。在HTML電子郵件中，一般最好不要給表容器定義寬度。你最好為每個單元格定義寬度，但在這種情況下，我們將打破這個規則，因為我們擔心表格有cellspacing和cellpadding。

一般而言，指定表格單元格寬度要比指定表格自身寬度要好。

信息表格

這些非常簡單：段落在單元格中居中顯示。

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
    <tr>
        <td align="center">
            <p>Trouble viewing this email? <a href="#">View in Browser</a></p>
        </td>
    </tr>
</table><!-- top message -->

底部的信息表格和這個完全一樣。

頭部

頭部非常簡單，有三行，每行一列。因為我們表格有藍色背景，我們需要給每個表格的單元格設置一些內距，讓文本不挨着邊框。

<tr>
    <td>
        <table id="header" cellpadding="10" cellspacing="0" align="center">
            <tr>
                <td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
            </tr>
            <tr>
                <td width="570" bgcolor="8fb3e9"><h2>News and Events</h2></td>
            </tr>
            <tr>
                <td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
            </tr>
        </table><!-- header -->
    </td>
</tr><!-- header -->

記得要設置每個單元格的寬度，在本例中是570px（600px - 兩邊單元格各15px）。我們還設置了align屬性為right，讓日期向右對齊。現在，我們還沒有添加背景圖片，不過我們稍后會這么做。同時我們給單元格設置淺藍色背景。

請注意，我們使用bgcolor來替找style="background:"。這是因為在電子郵件客戶端中HTML屬性要比CSS樣式更好。

開始制作HTML Email

到目前為止，這樣看起來很糟糕，但布局正是我們想要的。

內容區域——兩列

我們的第一部分內容是圖像居左，圖像右邊有兩個標題。這里不使用常用的CSS浮動，我們在這里使用一個具有三個單元格的表格：

第一個放置圖像
第二個用來制作圖像與標題之間的間距
最后一個放置標題

開始制作HTML Email

圖像有邊框效果，我們將在單元格內嵌套一個表格，前且設置表格的cellpadding="5"，同時給他設置一個灰色的背景色。cellpadding增加了元素的寬度，所以我們在定義單元格寬度的時候需要減雲10px。

<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="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></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 -->

注意：

我們添加一個空行。因為我們內容有15px的間距，我們使用一個空的單元格來制作這個間距。在我的測試中，這個空格沒有問題，但你最好在單元格中添加一個空白的符號 
我們也給單元格設置了align屬性值為top，讓單元格內容垂址方各，頂端對齊。這個很重要，因為單元格垂直方向的align默認值為middle，這樣將會導致一些奇怪的結果。
我們使用的虛擬圖像來自於dummyimage.com,因為電子郵件客戶只支持服務器上的圖像，這樣做更容易讓圖片顯示。看看這個網站，它解釋了如何讓你通過URL地址來指定你需要的圖像。

內容區域——一列

這一部分真的很簡單：單列的表格里面放了一個段落。不要忘記了設置單元格的寬度和設置表中心對齊。

<tr>
    <td>
        <table id="content-2" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="570"><p>Lorem ipsum dol...</p></td>
            </tr>
        </table><!-- content-2 -->
    </td>
</tr><!-- content-2 -->

分割器

添加垂直空間的單元格間距(超過15px)時，我們必須使用一個圖像來模擬制作間隔。就像90年代一樣！我們可以使用一個空白的gif，但目前只需要使用一個虛擬的圖像，你可以看到一開始是灰色的，但后來我們把設置成白色的。

<tr>
    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>

效果如下圖所示：

開始制作HTML Email

內容區域——三列

對於三列內容區域，我們使用一個具有五個單元格的表格，每一個單元格為一列，兩列之間的單元格用來制作間距。

開始制作HTML Email

<tr>
    <td>
        <table id="content-3" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <table cellpadding="5" cellspacing="0">
                        <tr>
                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table><!-- content-3 -->
    </td>
</tr><!-- content-3 -->

很簡單，使用前面介紹的方法一樣，實現邊框效果。別忘記了給單元格添加align="top"。

三個文本列制作是相同的。

<tr>
    <td>
        <table id="content-4" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="180" valign="top">
                    <h5>Exciting New Products!</h5>
                    <p> Ut enim ad minim veniam, ...</p>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <h5>A Newsletter Every Month</h5>
                    <p>Excepteur sint occaecat ...</p>
                </td>
                <td width="15"></td>
                <td width="180" valign="top">
                    <h5>New and Improved Forum</h5>
                    <p>Lorem ipsum dolor sit ...</p>
                </td>
            </tr>
        </table><!-- content-4 -->
    </td>
</tr><!-- content-4 -->

使用前面介紹的方法，在底部添加另一個分隔器。

開始制作HTML Email

其他

一切只是重復我們已經做好的兩列內容和一列內容。

<tr>
    <td>
        <table id="content-5" cellpadding="0" cellspacing="0" align="center">
            <tr>
                <td width="267" valign="top">
                    <table cellpadding="5" cellspacing="0" bgcolor="d0d0d0">
                        <tr>
                            <td>
                            <img src="http://dummyimage.com/267x200/e9e9e9/fff" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="15"></td>
                <td width="278" valign="top">
                    <h4>This is a heading</h4>
                    <p>Lorem ipsum dolor sit...</p>
                </td>
            </tr>
        </table><!-- content-5 -->
    </td>
</tr><!-- content-5 -->
<tr>
    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>
<tr>
    <td>
        <table id="content-6" cellpadding="0" cellspacing="0" align="center">
            <tr>
                </td>
                    <p align="center">Lorem ipsum dolor si... </p>
                    <p align="center"><a href="#">CALL TO ACTION</a></p>
                </td>
            </tr>       
        </table>
    </td>
</tr>

主內容的布局到此就完成：

開始制作HTML Email

圖片的使用

與常規的Web頁面不同，你不能把圖片都放在一個文件夾中，然后使用相對路徑鏈接這些圖片。所有的路徑必須是絕對的。當我開發一個電子郵件時，我通常把圖片放在一個子域下或Amazon S3。當我准備發送郵件到電子郵件客戶端時，我將所有的圖片放到網站的子域名下。

所有圖片路徑必須是絕對路徑。

步驟四：美化電子郵件

我們不能將外部的樣式表嵌入到電子郵件中，因為有些電子郵件客戶端會刪除整個<head>中的標簽，或者忽略<style>標簽。我們要使用內聯樣式是一件痛苦的事情。幸運的是，有相關服務可以幫助我們將嵌入的CSS變成內聯樣式。我使用的是一個名為Premailer網站，你可以直接把代碼粘貼到里面，它會將樣式嵌入到行內中。

在本教程中，我們先把要嵌入的CSS寫在<style>標簽內，然后我們將使用Premailer將樣式轉換到行內。

Premailer將需要的CSS嵌入到行內。

重置基本樣式

我們不會在你喜歡的頁面中強硬的使用*選擇器來重置樣式。因為使用默認的值會讓效果更佳一致。唯一的就是我們需要重置元素（如我們的標題和段落）的margin和padding，讓元素周圍空間一致(如cellpadding/cellspacing)。

您還將注意到表容器周邊有一個空白的間距，這是body元素默認的樣式。

<style type="text/css"> body, #header h1, #header h2, p {margin: 0; padding: 0;} </style>

排版

對於電子郵件的排版沒有什么很特別，因為它和Web頁面的文字排版幾乎是一樣的。不要使用簡寫的聲明(如，font)，因為在不同的電子郵件客戶端會產生不一致的結果。

#top-message p, 
#bottom-message p { color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 { color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; }
#header h2 { color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
#header p { color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; }
h3 { font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
h4 { font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; }
h5 { font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
p { font-size: 12px; color: #444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.8em 0; }

現在這樣看起來，效果更好：

開始制作HTML Email

背景圖片

背景圖像在一些電子郵件客戶端不能正常顯示，如果你需要使用背景圖片，最好提供一個備選顏色，把他們應用到一個單元格上。這樣一來，不支持顯示背景圖片的客戶端將會顯示背景顏色。

<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:> <h2>News and Events</h2> </td>

各種各樣的其他樣式

我們需要給每個鏈接根據客戶需要重新設置樣式，用來覆蓋電子郵件客戶默認的樣式，並給主體表格設置一個邊框。我也還要給圖片添加一個display:block，用來解決Outlook和Hotmail電子郵件客戶中圖片底部增加空白間距的問題。

確保所有圖片添加display:block，以防止Outlook和Hotmail電子郵件客戶端產生一個怪異的margin。

#main {border: 1px solid #cfcece;}
img {display: block;}
a {color: #4A72AF;}

開始制作HTML Email

我們完成了比較容易的部分。現在我們需要測試我們制作的電子郵件。

步驟五：測試

電子郵件的測試過程是非常重要的，也是最讓人討厭的。處理電子郵件的時候，在每個階段我都常測試，這樣我就可以確定有什么差錯。有很多客戶測試和大量的方法來測試他們，讓我們去結束這一切吧。

電子郵件客戶端

下面這些電子郵件客戶端，你應該都需要測試：

Outlook2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird

怎么測試

我們首先需要找到一種方法發送制作好的HTML電子郵件。你的客戶可能會像Mailchimp和Campaign Monitor測試電子郵件或發送電子郵件。

你可能認為沒有必要這么復雜化，你可能認為只需要將HTML代碼粘貼到電子郵件客戶端發送即可。然而，這可能導致在不同的電子郵件客戶端有不同的結果。所以為了有一個好的應用，測試是必不可少的。

使用Mailchimp測試

我的首選方案是使用Mailchimp進行測試和發送電子郵件。Mailchimp有一個免費發送500人的版本，這樣你就不需要支付測試的費用。它有一個簡單易用的界面，這里有一個快速操作的介紹：

注冊一個免費的Mailchimp的賬戶，並添加一個測試電子郵件賬戶的收件人列表：Hotmail、Yahoo!和Gmail等，登錄到您的新賬戶。
在你的賬戶主界面選擇創建一個活動並選擇常規的。填寫基本信息，你需要的只是一個用於測試的一個名稱。
在設計頁面，選擇Import -> 粘貼代碼，確保您選擇了自動的CSS inliner選項。
如果你不使用Mailchimp,確保您使用Premailer將CSS轉換成內聯。
直到你確認了並選擇發送測試。從這里您可以發送一些測試，但在那之后，你需要一個實際發送電子郵件的列表。

使用litmus測試

Litmus是一個Web應用程序，可以測試HTML電子郵件在各種各樣版本下的電子郵件客戶端。需要全方位的服務，你需要付費，你可能無法說服你的客戶支付這筆測試費用，但他的免費版本仍然允許您在Outlook2003和Gmail上做測試。

結果——好的

我們的一些測試結果很完美：

開始制作HTML Email

結果——有點差的

有些是有點差，但或多或少有些相同的。

開始制作HTML Email

結果——丑陋的

我們也有一些故障。

開始制作HTML Email

清理這個爛攤子

經過全面的考慮，這是一個非常成功的測試，因為我們測試了Outlook和Gmail下的很多元素。我們與老的Gmail和Hotmail的問題相關的客戶使用默認樣式表。我們使用!important覆蓋了標題自帶的綠色文本效果。有時候這些效果真的讓我們要瘋了。

開始制作HTML Email

為了解決這個問題，我們需要給我們帶有綠色標題元素添加!important重新設置，覆蓋默認的樣式。

h3 { font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
h4 { font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
h5 { font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

在老的Gmail郵箱中有一個類似的問題，Gmail會給標題標簽底部添加一個margin。我們只需要覆蓋margin-bottom樣式即可。

#header h1 { color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; }
#header h2 { color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important }

我們修復hotmail下的效果

開始制作HTML Email

所以有一個實用的，一致的HTML電子郵件。這是一件痛苦的事情，但是你得到一個系統就要快得多。盡量保持你的代碼有注釋和組織結構清晰，以便你以后可以重用。

如果你能說服你的客戶注冊Litmus之類，讓你變得更容易。你也可以通過Mailchimp和Campaign monitor更多版本來做測試。

排除故障

你肯定還會遇到我這里沒有提到的問題，但我有一些建議可以幫助你更好的排除這些故障：

檢查你的數學：我不記得有多少次是因為計算出錯，增加了單元格寬度而搞砸了我的布局。記得占用的單元格邊距：他會增加你單元格的寬度。
檢查默認樣式表：使用類似Firebug或Webkit的檢查工具來檢查是否客戶端會覆蓋你的樣式。如果發生這種情況，添加一個!important聲明，應該可以幫助你解決問題
搜索查找，總是有人經歷過你碰到的問題。如果Google幫不了你，試着找一些技術博客和流行的電子郵件客戶端的博客，他們可能知道這些東西。
將其分解：如果你找不到你的問題出在哪，加到最開始，一點眯地查看你的電子郵件，直到你找到問題所在。

結果

這是最后的代碼，僅供你參考。由於篇幅原因，只提供下載鏈接和Web瀏覽器下的演示效果，如果你感興趣，可以下載相關文件或在線閱讀：

DEMO DOWNLOAD

這里是我們最終的效果，如下圖所示：

開始制作HTML Email

沒什么特別的，但是它應該是你開始設計自己的HTML電子郵件的一個很好示例。當然，還有其他的方法可以做到我實現的效果，但是HTML電子郵件，真正需要的是要知道它的工作原理。因為制作電子郵件沒有Web標簽或最佳實踐的概念。

擴展閱讀

Purchase Email Templates on ThemeForest
Campaign Monitor Resources (Their Blog also has some really useful tips)
Mailchimp Resources
6 Easy Ways to Improve Your HTML Emails
20 Email Design Best Practices and Resources for Beginners
30 HTML Best Practices for Beginners

我希望你今天學到了一點。我知道我找到了我的第一個HTML電子郵件項目的教程。看來分享讓我學到很多東西。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載，煩請注明出處：

英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails/

中文譯文：http://www.w3cplus.com/css/getting-started-with-html-emails.html

免責聲明！

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

猜您在找 【html】edm 郵件制作指南 EDM郵件營銷之如何制作模板郵件營銷EDM模板制作規范 html-edm(郵件營銷)編寫規則 HTML郵件制作規范 EDM制作要點郵件EDM模板編寫總結制作html郵件的注意點 springboot發送email郵件 python發送email郵件