了解 HTML 電子郵件設計的挑戰(和挫折)
如果您開啟內容管理系統來建立網頁,這是一個非常簡單的過程。現代網頁瀏覽器支持 HTML, 的CSS和 JavaScript 符合嚴格的 Web 標準。它們只是設計師需要擔心的少數瀏覽器。當然,也有例外......以及一些簡單的解決方法或特定於這些瀏覽器的功能。
由於整體標準,在內容管理系統中開發頁面建立器非常簡單。瀏覽器符合 HTML5、CSS 和 JavaScript…開發人員可以建立極其強大的解決方案來建立響應設備且跨瀏覽器一致的網頁。二十年前,幾乎每個網頁設計師都使用桌面軟體來開發網頁。現在,網頁設計師開發網頁的情況相當罕見——他們通常會開發模板並使用內容系統中的編輯器來填充內容。網站編輯非常棒。
但是電子郵件編輯器可悲地落後了。 這就是為什麼……
設計 HTML 電子郵件比網站複雜得多
如果您的公司想要設計精美的 HTML 電子郵件,則該過程比建立網頁要複雜得多,原因如下:
- 無標準 – 顯示 HTML 電子郵件的電子郵件用戶端沒有嚴格遵守 Web 標準。事實上,每個電子郵件用戶端和每個電子郵件用戶端的每個版本的行為都不同。有些會尊重 CSS、外在字體和現代 HTML。其他人則尊重一些內聯樣式,僅顯示字體集合,並忽略表驅動結構以外的所有內容。沒有人致力於解決這個問題,這真是可笑。因此,設計能夠在客戶端和設備上一致呈現的模板已成為一項大生意,而且成本可能相當昂貴。
- 電子郵件客戶端安全 – 最近,Apple Mail 更新為預設封鎖 HTML 電子郵件中未嵌入電子郵件中的所有圖片。您要么授予他們一次加載電子郵件的權限,要么必須啟用設定才能停用此設定。除了電子郵件用戶端安全設定之外,還有公司設定。
- IT安全 – 您的 IT 團隊可能會針對可以在電子郵件中實際呈現的對象部署嚴格的規則集。 例如,如果您的圖像來自未在企業防火牆中列入白名單的特定域,則圖像根本不會出現在您的電子郵件中。 有時,我們不得不開發電子郵件並將所有圖像託管在公司的服務器上,以便他們自己的員工可以看到這些圖像。
- 電子郵件服務提供商 – 更糟糕的是,電子郵件服務提供商 (ESPs) 實際上引入問題而不是限制問題。雖然他們宣傳他們的編輯器是所見即所得 (WYSIWYG),但電子郵件設計的情況往往恰恰相反。您將在他們的平台中預覽電子郵件,收件人將看到所有設計問題。公司常常不知不覺地選擇功能豐富的編輯器而不是鎖定的編輯器,認為它具有更多功能。事實恰恰相反……如果您希望電子郵件在所有電子郵件用戶端上呈現一致,那麼越簡單越好,因為出錯的可能性會更少。
- 電子郵件客戶端渲染 – 數百個電子郵件用戶端在桌面、應用程式、行動裝置和網頁郵件用戶端上以不同的方式呈現 HTML。雖然電子郵件服務提供者的漂亮文字編輯器可能有一個設置,可以在電子郵件中添加標題,但每個電子郵件用戶端的填充、邊距、行高和字體大小可能會有所不同。因此,您必須簡化 HTML 並對每個元素進行不同的編碼(請參閱下面的範例),並且經常編寫特定於電子郵件用戶端的異常,以使電子郵件呈現一致。沒有簡單的區塊類型,您必須進行表格驅動的佈局,這相當於三十年前的網路建置。這就是為什麼任何新佈局都需要開發以及跨電子郵件用戶端和裝置測試。您在收件匣中看到的內容可能與我在收件匣中看到的完全不同。這就是為什麼像這樣的渲染工具 關於酸的電子郵件 or 石蕊 必須確保您的新設計適用於所有電子郵件客戶端。 以下是流行的電子郵件客戶端及其渲染引擎的簡短列表:
- Apple Mail、Outlook for Mac、Android Mail 和 iOS Mail 使用 WebKit的.
- Outlook 2000、2002 和 2003 使用 互聯網瀏覽器.
- Outlook 2007、2010 和 2013 使用 微軟Word (是的,Word!)。
- Webmail 客戶端使用其瀏覽器各自的引擎(例如,Safari 使用 WebKit,Chrome 使用 Blink)。
Web Vs 的 HTML 示例。 電子郵件
如果您想要一個示例來說明電子郵件與 Web 設計的複雜性,這是 Mailbakery 文章中的一個完美示例 電子郵件和 Web HTML 之間的 19 大區別:
電子郵件 HTML
我們必須建立一系列表格,其中包含正確放置按鈕所需的所有內聯樣式,並確保它在電子郵件用戶端上看起來不錯。隨附的樣式標籤也將位於此電子郵件的頂部以合併這些類別。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
網頁
我們可以使用帶有類的外部樣式表來定義顯示為按鈕的錨標記的大小寫、對齊方式、顏色和大小。
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>
如何避免電子郵件設計問題
遵循適當的流程可以避免電子郵件設計問題:
- 模板測試 – 在部署任何範本之前,了解訂閱者使用的電子郵件用戶端並確保您的 HTML 電子郵件在行動裝置和桌面上經過全面測試至關重要。我們可以從字面上從 Photoshop 佈局設計電子郵件…但是將其分割成表格驅動的跨電子郵件用戶端對於部署最佳且一致的電子郵件設計至關重要。
- 內部測試 – 設計和測試模板後,應將其發送到組織內部的種子列表以進行審核和批准。 您甚至可能希望從非常有限的個人子集開始,首先確保不存在與內部呈現電子郵件相關的防火牆或安全問題。 如果這是在新的電子郵件服務提供商上構建實例,您甚至可能會發現一些與將電子郵件發送到收件箱相關的過濾或阻止問題。
- 模板版本控制 – 在沒有使用可以設計、正確測試和部署的新模板版本之前,不要更改佈局或設計。 許多企業喜歡為每個活動設計一次性設計……但這需要為每個活動設計、開發和部署每封電子郵件。 這為內部電子郵件營銷流程增加了大量時間。 而且,您可能不了解電子郵件中的哪些元素表現良好,而哪些元素表現不佳。 一致性不僅是簡化流程的一種方式,它對訂閱者的行為也很重要。
- 電子郵件服務提供商例外 – 幾乎每個電子郵件服務提供商都有解決其電子郵件構建器引入的問題的方法。 我們通常可以將原始 CSS 添加到帳戶中——甚至在每封電子郵件中都必須包含一個內容塊——以便公司利用內置的電子郵件編輯器而不讓它破壞你的電子郵件設計。 當然,這可能需要一些培訓和流程控制來部署這些步驟,以確保它們得到遵守。 或者——您可能只是想在一個被證明可以跨客戶端和設備工作的解決方案中開發您的電子郵件設計,然後將其粘貼回您的電子郵件服務提供商。
電子郵件設計平台
由於電子郵件服務平台在構建和維護跨客戶端和跨設備一致呈現的構建器方面做得很差,因此市場上出現了許多出色的平台。 我們廣泛使用的一種是 條紋.
Stripo 不僅僅是一個電子郵件生成器,他們還擁有一個包含 900 多個模板的庫,可以輕鬆導入。 設計電子郵件後,您可以向 60 多個 ESP 和電子郵件客戶發送電子郵件,包括 Intuit Mailchimp, HubSpot的, 活動監視器, AWeber, 電子衛星, Outlook和 Gmail。最重要的是,Stripo 範本附帶了電子郵件渲染測試,因此您可以確保它們經過測試並在 40 多個電子郵件用戶端中一致工作。