快速小測驗：網路開發人員用來建立您每天訪問的網站結構的語言叫什麼？除了聰明過人的回答之外，超文字標記語言（HTML）是一種長青的標準，在網路誕生之初就已存在。然而，這並不僅僅適用於網頁。你的收件箱就是 HTML 電子郵件設計的沃土。
如果考慮到您幾乎每小時都會在郵件中看到大量圖片、GIF、視訊和品牌內容，這就很有意義了。雖然您可以提供純文字電子郵件，但 HTML 版本會帶來更多好處，讓您有更多機會打造品牌，推銷自己和企業。
在本篇文章中，我們將討論如何建立和傳送 HTML 電子郵件，以及為什麼要這樣做。有時，我們會深入探討如何編寫電子郵件程式碼，但你並不需要這些知識來建立自己的電子郵件。
什麼是 HTML 電子郵件？
您收件箱中的電子郵件有兩種型別：
- 純文字：這幾乎是現代的電報。沒有任何樣式或最低限度的格式化，收件人只能看到文字而看不到其他任何東西。
- HTML 超文字：與純文字相比，這是一種 “嗖嗖” 作響的爆竹，而且設計感很強。它使用 HTML 程式碼來顯示電子郵件，但正如我們將要討論的，它並不總是採用現代網路標準。
舉例來說，如果你收到的是純文字電子郵件，你就會知道它看起來和純文字文件一模一樣。相比之下，HTML 電子郵件的外觀幾乎與現代網頁相同（或多或少會有一些樣式和格式方面的問題）：
瀏覽器中的 HTML 電子郵件
在大多數情況下，HTML 電子郵件無法提供極致的互動性或動態參與性。這也是我們稍後要討論的內容，但從標準上來說，HTML 電子郵件已經落後於網路。因此，HTML 更像是一種設計驅動的工具，而不是幫助提供體驗的工具。不過，這也帶來了一個問題： 如果只是為了視覺效果，為什麼要使用 HTML 電子郵件？接下來我們就來回答這個問題。
一些 HTML 結構標籤。
然而，HTML 電子郵件卻是另一回事，因為它在某種程度上落後於時代。因此，你需要使用所有老式的 HTML4 表格和內聯樣式來建立佈局。至於為什麼會這樣，你需要向電子郵件客戶端的開發人員瞭解，因為他們通常會在 HTML 電子郵件進入收件箱時對其進行修改。最常見的行為之一就是出於安全原因（還有其他原因），將 CSS 和 JavaScript 從郵件中剝離。
這意味著您需要提供另一種方式來為 HTML 電子郵件新增樣式–內聯是相容性的唯一選擇。說到相容性，這是一個重要的考慮因素。您必須在獨特的樣式與終端使用者電子郵件客戶端的功能之間取得平衡。因此，您還需要注意其他一些技術上的注意事項：
- 使用系統字型而不是第三方字型可以節省 HTTP 請求，為使用者快速載入電子郵件，並提供外觀一致的電子郵件。
- 你還可以更進一步，為那些無法在客戶端檢視 HTML 電子郵件的使用者提供純文字版本的電子郵件。很多網站都會提供一個 HTML 版本，您可以線上訪問，既是出於這個原因，也是作為備份。
- 對於 HTML 電子郵件和網頁來說，alt-text 同樣重要。因此，在您的內容中新增圖片時，請使用 alt 文字，以便於訪問。
在 HTML 電子郵件的技術方面，有一點你應該多加考慮，因為它可以跨越內聯樣式、CSS 和其他因素之間的界限。讓我們來簡單討論一下 “條件”。
使用條件
條件式是 HTML 電子郵件的一種保留方式，曾經是老一代 HTML 網頁開發人員的工具包。在這裡，您可以指定哪個瀏覽器將使用特定的程式碼段。
老實說，這幾乎總是一個基於微軟的問題。對於網頁開發人員來說，Internet Explorer（IE）是瀏覽器的惡魔。但對於 HTML 電子郵件來說，則是 Outlook。在不同的版本之間，你可能會發現你的樣式以一種你意想不到的方式呈現。
因此，您可以在程式碼中新增條件塊，並定義這些元素。例如，你可以同時針對基於 Word 和基於 IE 的 Outlook 版本。
首先是 Word：
<!--[if mso]>
這適用於基於 Word 的 Outlook 版本：
<![endif]-->
對於 Internet Explorer，則使用不同的標籤：
<!--[if (IE)]>
這適用於基於 IE 的 Outlook 版本：
<![endif]-->
如果您的目標瀏覽器是基於 WebKit 的（如 Apple Safari、PlayStation 瀏覽器、亞馬遜的 Kindle 等），您可以使用媒體查詢來提供特定的樣式：
.html-email-webkit {
display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
..html-email-webkit {
display: block !important;
}
}
這就為您提供了一種稍好的方法，讓您的 HTML 電子郵件適應終端使用者的顯示方式。總的來說，HTML 電子郵件樣式並不完美，但每個電子郵件客戶端的引擎蓋下都有足夠的功能來幫助您建立一些令人驚歎的佈局。
建立 HTML 電子郵件的選項
儘管我們已經討論過，但您仍有許多靈活的選擇來幫助您建立 HTML 電子郵件。例如，您可以使用優秀的文字編輯器和 HTML 從頭開始建立。
不過，我們還可以考慮其他選項：
- 您可以使用專門的服務（如電子郵件營銷應用程式）來建立電子郵件。很多應用程式都會提供視覺化生成器，還可以讓你編寫自己的程式碼，甚至建立自己的模板。
- 說到這裡，你可以下載一個 HTML 電子郵件模板。這很像 WordPress 主題，因為它為你的其他設計提供了一個基礎。在此基礎上，您可以根據自己的喜好進行定製。這是在編碼和構建選項之間的一個很好的中間地帶。
稍後，我們將使用 HTML 建立電子郵件。不過，在此之前，無論你選擇哪種方法來建立電子郵件，我們先來看看你可能需要考慮的一些電子郵件服務提供商。
3 家最適合建立 HTML 電子郵件的電子郵件服務提供商
由於本篇文章的重點是建立 HTML 電子郵件，因此我們不需要對電子郵件服務提供商進行太深入的介紹。即便如此，您還是可能會考慮一些服務提供商。
我們無法一一列舉，因此我們將提到其中最受歡迎的三家。讓我們一起來看看。
1. Mailchimp
Mailchimp Logo
Mailchimp 是一家電子郵件服務提供商，幾乎是許多人的首選解決方案。在很多人眼中，Mailchimp 是電子郵件營銷應用程式的黃金標準，這是有很多充分理由的：
- 它包含了許多其他類似應用程式的典型功能。
- 在推廣業務方面有很多幫助，如營銷自動化、受眾管理工具等。
- 您還可以使用一流的創意工具套件來幫助您建立 HTML 電子郵件。
當然，我們要在這裡介紹的是後者。創意助手是 Mailchimp 瞭解您的品牌並幫助您建立和個性化電子郵件的一種方式。您還可以連線第三方應用程式，如 Adobe Photoshop，幫助您建立完美的電子郵件。
使用現有的 HTML 也很簡單，尤其是如果您使用 Mailchimp 的經典生成器。無論如何，如果您需要，確實有辦法匯入 HTML 模板。
Mailchimp 使用複雜的月訂閱層級和聯絡人數量混合計算最終價格。我們建議，小型企業需要每月 35 美元左右、最多 2,500 個聯絡人的計劃。不過，您需要根據自己需要的功能和聯絡人數量研究最適合自己的計劃。
2. AWeber
對於某些人來說，AWeber 代表著電子郵件營銷的頂峰。它是一個神奇而強大的平臺，與 Mailchimp 相比，它的功能集可以說更加集中。
AWeber logo
它包含傳送電子郵件所需的許多基本功能：
- 它能自動傳送和安排郵件、活動等。
- 您擁有強大的組織工具，如訂閱者標記和細分。
- AWeber 還可以讓您為電子郵件建立的內容自動化。例如，您只需做少量工作就能將部落格文章轉化為郵件。
在建立電子郵件方面，AWeber 有一些小技巧。它使用拖放式視覺化建立器，幷包含一個自定義模板庫，讓您一開始就能使用。此外，您還可以將 AWeber 連線到您的 Canva 賬戶，使用後者來幫助設計您的電子郵件。
還有一個專用的 HTML 編輯器，而 Mailchimp 則沒有。您甚至可以在 AWeber 的免費層上獲得這些功能。說到這一點，AWeber 的定價更加簡單明瞭。您每月只需支付約 25 美元，即可獲得多達 2,500 個聯絡人。
3. Constant Contact
在電子郵件服務提供商中，Constant Contact 是一個異類，但它更像是一種祕密武器。它提供了一系列出色的特性和功能，還能讓您在需要時使用 HTML。
Constant Contact Logo
與 AWeber 一樣，Constant Contact 專注於電子郵件營銷，而不是其他以業務為中心的領域。因此，您會喜歡它的功能設定：
- 您可以使用客戶名單管理工具和營銷自動化功能。
- 有豐富的報告選項。
- 你可以整合 Facebook、Instagram 和 Google 的廣告程式。
- 有很多方法可以吸引新的訂閱者加入你的列表。
Constant Contact 的設計功能也很不錯。您可以選擇一個模板，然後使用視覺化編輯器進行整體設計。不過，您也可以使用 HTML，有時與其他工具相比，它的方式更先進。
定價也很合理。核心計劃和 2,500 個聯絡人的月費約為 35 美元，而 Plus 計劃則為 70 美元。
製作 HTML 電子郵件需要什麼？
在開始製作 HTML 電子郵件之前，您需要準備一些工具和技能。以下是您在開始之前需要準備的東西：
- 您需要使用一個您覺得舒適的程式碼編輯器，因為它需要在整個過程中為您提供支援。如果你不知道該選哪個，很多使用者會選擇 Visual Studio Code，不過 Brackets 也非常適合這項特殊任務。我們將使用 Onivim2，它是基於 VS Code 核心基礎架構的 Vim 風格編輯器。
- 雖然你需要 HTML 技能，但你並不需要與現代網路開發人員相同的知識（儘管這並不影響你的前景）。
- 您需要一種測試電子郵件的方法 – MailHog 是其中一種解決方案。
- 雖然我們不會使用預製模板，但您可能希望將來使用其中之一。
- 您還需要一個電子郵件提供商，因為您需要某種方式來傳送完成的 HTML 電子郵件。
所有這些都準備就緒後，您就可以開啟文字編輯器開始工作了。接下來，我們將演示如何建立一封基本的 HTML 電子郵件。
如何從零開始建立 HTML 電子郵件
在開始之前，值得注意的是，我們不會使用 Mailchimp 或 AWeber 等專門服務。相反，我們將從頭開始建立一個簡單的模板，你可以根據需要隨時匯入。
我們將把整個過程分成幾個不同的部分，因為雖然 HTML 電子郵件只是相對於網站而言，但仍有很多地方需要考慮。
1. 建立 HTML 電子郵件的基礎
從電子郵件模板的骨架開始是個好主意。這將遵循一般 HTML 的一些典型做法：
<!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> </head> <body> </body> </html>
這裡有幾件事值得一提。首先，我們為 Transitional XHTML 1.0 指定了一個 “doctype”，這是電子郵件開發人員的常用做法。然後，我們指定了一個 XML 名稱空間，這在後面會很重要。
你還會注意到一些元標籤，這些標籤定義了字符集，以及瀏覽器應如何在其視口中呈現後面的 HTML。
骨架的其餘部分也很簡單，就是我們接下來要用到的標題和正文標籤。
2. 為電子郵件模板新增結構
回想我們關於使用 HTML 標記的討論，你會記得我們不想使用 <div> 或其他典型的結構元素。相反，我們希望使用表格，因為這在電子郵件客戶端和服務中渲染效果很好。
一切將從正文中一組簡單的 <table> 標記開始：
<body> <table role="presentation"> <tr> <td> </td> </tr> </table> </body>
我們在 <table> 標籤中設定的屬性可以幫助螢幕閱讀器解析其中的文字，因此有利於無障礙訪問。
從這裡開始，你需要在表格中新增新的行和列，以便建立 HTML 電子郵件模板。具體方法由你自己決定，但最好從頁首、頁尾和正文部分開始。為簡潔起見，我們在此不再贅述，但我們會在以後的工作中提及。
好訊息是，如果需要新增其他部分，可以繼續向表格新增新行。不過，從這裡開始，你將需要引入樣式和其他元素。
3. 為元素新增樣式
HTML 的美妙之處在於，它幾乎與你的樣式無關。標記是簡單明瞭的，但你應用的樣式可能並不簡單。在這裡，你將看到 HTML 電子郵件栩栩如生。
作為設計指導，我們將在 <head> 中新增 <style> 標籤，以顯示一般邊框：
<style>
table, td {border:2px solid #000000 !important;}
</style>
首先，我們要確保正文或主表格（此處作為正文，因為有些電子郵件客戶端會移除該標記）中沒有意外的空格：
<body> <table role="presentation"> </body>
我們還將新增一些居中功能，並移除不同部分單元格中多餘的填充：
<tr> <td align="center" style="padding:0;">Header </td> </tr>
如果您在瀏覽器中瀏覽一下，就會發現它並不起眼：
顯示 HTML 電子郵件骨架的瀏覽器視窗
不過，從這裡開始，你可以使用表格和樣式標籤進一步開發你的電子郵件模板。例如，我們為頁首製作了一個 Hero 部分，並擴充套件了頁尾和正文：
建立過程中的類比電子郵件模板（圖片來源：Settergren）
您可能會根據自己的需要建立一個更好、更合適的模板，但使用巢狀表格和一些基本的 HTML 技能，您就可以建立一個反應靈敏的自定義 HTML 電子郵件模板。
4. 測試電子郵件
在完成之前，您需要測試您的電子郵件，以確保它在不同裝置上都能很好地呈現。有一些不同的服務可以提供幫助。
例如，Email on Acid 就包含一份完整的部署前檢查清單，幫助您確保模板不會出現問題：
Email on Acid 網站
Litmus 使用者會知道 PutsMail，但所有人都可以訪問它：
Litmus 網站
您需要註冊一個賬戶才能使用這項服務，但使用起來非常簡單。您可以利用該功能在多種不同的瀏覽器和裝置上預覽電子郵件。
Mailgun 還提供與其主要產品相匹配的出色服務。您可以通過介面測試電子郵件客戶端、瀏覽器等。此外，您還可以測試主題行等元素，以確保您保持較高的開啟率。
Mailgun 的電子郵件測試工具
不過，一旦您測試了電子郵件，就需要確保它能進入收件人的收件箱。在最後一節，我們將詳細討論這個問題。
傳送 HTML 電子郵件：您需要了解的內容
使用電子郵件營銷服務的一個好處我們還沒有提到，那就是它將如何處理髮送電子郵件的法律問題。這一點很重要，因為如果你在這方面出了差錯，你不僅無法與收件人取得聯絡，還會給自己帶來麻煩。
電子郵件營銷服務公司已經與處理垃圾郵件和傳送電子郵件相關問題的機構建立了良好的工作關係。因此，如果你不想擔心傳送垃圾郵件，選擇這些服務通常是個好主意。
不過，無論您使用哪種平臺，我們都可以提供一些提示：
- 確保您遵守 CAN-SPAM 法案的所有規定，尤其是如果您的主要受眾在美國。當然，不同國家也有自己的法律規定。
- 包括訂閱者的雙重選擇。這是指您要求他們確認訂閱，但同時也會傳送第二封確認函。如果出現垃圾郵件查詢或隱私要求，這將保護您和訂閱者的利益。
可送達性是電子郵件的一個關鍵因素，我們將在另一篇文章中對此進行深入討論。不過，這一概念由多個方面組成，如使用良好的程式碼、獲得正確的許可級別等。
這就涉及到另一個方面 – 您的傳送分數。這類似於信用評分，最終是對您聲譽的衡量。這裡有幾個不同的組成部分構成整體：
- 網站跳出率。
- 您的網站收到的與您傳送的電子郵件有關的投訴數量。
- 你的 IP 地址的聲譽。
- 您的域名簽名。
後者與域名金鑰識別郵件（DKIM）和發件人策略框架（SPF）有關。此外，您還可以通過 SenderScore 或 IPQualityScore 等服務檢查您 IP 的信譽。
如果一開始就選擇了正確的簡單郵件傳輸協議（SMTP）提供商，就能一舉解決上述問題。就像您選擇電子郵件營銷解決方案一樣，這項服務將瞭解您需要什麼來保持較高的送達率，並獲得權力機構的認可。
Mailgun 是我們前面提到的一種解決方案，這可能是最理想的選擇。不過，還有其他一些服務，如 Mailjet、Sendinblue，甚至 Gmail 自己的服務。
小結
電子郵件還沒有走到盡頭。因此，利用電子郵件來滿足自己的需求（如推廣和營銷），是接觸潛在訂戶、使用者和客戶的一種極具成本效益的好方法。
雖然您可以購買專用的 HTML 模板，但建立自己的 HTML 電子郵件並不難。如果你有一個特定的願景，這可能是你成功的途徑。不過，您需要拿出以前使用過的 HTML 技巧，如條件和巢狀表格。HTML 電子郵件設計還沒有達到現代網頁設計的水平，但你仍然可以以小博大。
你需要建立 HTML 電子郵件嗎？如果需要，你有什麼問題？請在下面的評論區告訴我們！
評論留言