最常見的電子郵件編碼錯誤以及如何避免它們

儘管您的電子郵件充滿了花里胡哨，但編碼錯誤可能會徹底毀掉它。 只有一個錯誤縮短的鏈接或錯誤的顏色格式——你的電子郵件看起來會很糟糕，特別是如果用戶決定通過智能手機而不是網絡電子郵件客戶端查看它，或者切換到具有不同屏幕分辨率的小工具。

在這篇文章中，我們將討論常見的 HTML 電子郵件編碼錯誤，並分享一些避免這些錯誤的建議。

電子郵件顯示問題從何而來？

簡而言之，用戶以您計劃的方式之外的方式查看您的電子郵件有兩個可能的原因。 第一個與用戶設備的技術特性有關。 第二個是電子郵件客戶端，更準確地說——它的渲染引擎。

用戶設備的技術特性

您應該考慮任何設備的至少兩個技術特性：

1. 屏幕分辨率—屏幕的大小，以像素為單位。 例如，iPhone X 的屏幕分辨率為 1125×2436 像素。 如果您的電子郵件包含兩列文本，每列 600 像素，則無法正確顯示。
2. PPI，或每英寸像素數— 一英寸屏幕的像素數。 iPhone X 的 PPI 是 458。想像一下：您需要在電子郵件中添加一個操作按鈕。 如果按鍵小於44點，對於iPhone X來說就是132×132像素，佔用不到三分之一平方英寸的屏幕空間，用戶幾乎無法點擊。

要記住的另一件事：用戶經常旋轉他們的移動設備，因此您的電子郵件應該看起來整潔並且在縱向和橫向視圖中都具有完整的功能。

為了防止與用戶設備的技術特性相關的問題，您應該使用響應式電子郵件設計。

首先，您應該在電子郵件的head中添加媒體查詢。 例如，@ @media screen and (max-width: 600px)查詢意味著如果屏幕寬度小於 600 像素，將優化電子郵件設計。 如果屏幕寬度超過 600 像素，用戶將看到此電子郵件的固定寬度版本。

其次，您應該以表格的形式創建一封電子郵件，其中包含單元格：

 <表>
<tr>
    <td>...</td>
</tr>
</table>

然後，為每個單元格添加樣式，例如：

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

但是，即使採取了這些措施，您在顯示電子郵件時仍然會遇到問題。 問題的根源是電子郵件客戶端的渲染引擎。

一個電子郵件客戶端

可能出現顯示問題的第二個來源是您的收件人用來打開您的營銷活動的電子郵件客戶端。 電子郵件客戶端的核心部分是渲染引擎。 它以長代碼腳本的形式接收電子郵件，對其進行處理，並以我們習慣接收電子郵件的方式輸出：帶有圖像、鏈接和其他媒體的可理解、結構化和格式化的文本。

看看下面的例子。 這是一封促銷電子郵件中的一段代碼——正如 Gmail 的渲染引擎所看到的那樣。 如果這封電子郵件是這樣顯示給潛在客戶的，他們幾乎不會通過代碼並了解有一個 40% 折扣的促銷代碼。

每個電子郵件客戶端都有自己的渲染引擎，這意味著通過不同的電子郵件客戶端打開的同一封電子郵件可以有完全不同的外觀。

以下是全球最受歡迎的電子郵件客戶端列表。 顯然，您的收件人會使用其中一個或什至一堆來打開您發送的電子郵件。

所有這些電子郵件客戶端都有一些特性，您在編寫 HTML 電子郵件時應該考慮這些特性。

例如，iOS 版 Apple Mail 不支持：

• inline-size CSS 屬性；
• @media (orientation)媒體查詢；
• 錨鏈接；
• HDR、PPM 和 SVG 圖像格式等。

Gmail 支持各種 CSS 屬性和媒體查詢，除了：

• box-shadow, text-shadow,和其他一些 CSS 屬性；
• @media (prefers-color-scheme)媒體查詢等。

常見的電子郵件編碼錯誤以及如何避免它們

避免電子郵件編碼錯誤的最佳一般建議是將您的庫存限制為大多數電子郵件客戶端支持的代碼，無論它們的版本有多舊。 簡單來說，像 1999 年一樣退後一步編寫代碼。例如，廣泛推薦使用：

• CSS2 代替 CSS3，
• HTML4 而不是 HTML5，
• 顏色而不是背景圖像，
• table-layout而不是<div> ，
• 內聯 CSS 而不是樣式集或<style>塊。

這種方法被認為可以防止大多數顯示電子郵件的問題。 但是讓我們仔細看看一些特定的編碼錯誤，它們可能會毀了您的電子郵件，並嘗試找到解決方案。

沒有純文本版本

潛在問題。 如果電子郵件沒有純文本版本，某些電子郵件客戶端（例如 Outlook 和 Gmail）可以將您的電子郵件定義為垃圾郵件。 此外，有時電子郵件客戶端在呈現 HTML 代碼時會出現問題。 因此，HTML 電子郵件可能會顯示不正確，而純文本電子郵件總是看起來一樣。

預防。 在您的電子郵件中添加純文本版本。 幸運的是，大多數電子郵件服務提供商會自動添加它。

您可以在電子郵件營銷策略中實施純文本電子郵件。 首先，此類電子郵件看起來更個性化，因此可以提升您與訂閱者的溝通水平。 此外，有些人更喜歡直截了當的電子郵件，而豐富多彩的佈局會讓他們望而卻步。

使用 JavaScript、ActiveX、Flash 等

潛在問題。 大多數電子郵件客戶端不支持這些語言、框架和插件，因此您的電子郵件的一部分不會被呈現，您的訂閱者只會看到一個空白區域。 此外，該電子郵件可能會被防病毒軟件禁止。

預防。 將您用於將電子郵件編碼為 HTML 和 CSS 的語言。 如果您需要添加一些視頻或音頻，請將其上傳到網站，並提供鏈接。

仔細了解 NiftyImages 如何展示新產品功能：該公司選擇了一系列圖像，儘管它可能是一個解釋性視頻。

重定向過多

潛在問題。 重定向雖然需要分析，但對您的電子郵件可能弊大於利。 例如，它們使網頁的加載時間顯著延長。 然後，用戶的瀏覽器可能會阻止重定向——因此，URL 將無法訪問。

預防。 盡量避免重定向。 但是，如果您仍然需要使用它們，請查看加載目標 URL 需要多長時間 - 在啟動整個活動之前測試您的電子郵件。 考慮訂閱者的體驗：他們是否願意等待 URL 加載。

縮短的鏈接

潛在問題。 縮短的鏈接會使您的電子郵件面臨進入垃圾郵件文件夾的風險。 問題是在縮短的鏈接中，目標 URL 不清楚。 簡單來說，它可以引領任何地方。 黑客和垃圾郵件發送者自然會利用這一點。

預防。 不要使用縮短的鏈接。 如果您的目標是讓您的電子郵件看起來整潔，沒有長 URL，則最好使用以下 HTML 標記： <a href="URL">...</a> 。 您可以在此處插入任何 URL，無論它有多長。

如果您仍然渴望縮短鏈接，請縮短您自己的 URL，而不是使用第三方工具。 至少提前掃描鏈接縮短者的黑名單。

大型電子郵件正文文件大小

潛在問題。 電子郵件客戶端和電子郵件服務提供商都有電子郵件正文大小限制，因為它們旨在傳輸相對少量的信息。 如果您不符合這些限制，您的電子郵件可能會被剪掉——它的結尾將被隱藏。

看一看音樂廠牌的時事通訊。 通過 Gmail 打開時，它被剪裁了。

要查看其完整版本，訂閱者需要點擊鏈接。

較大的電子郵件正文文件大小也會導致可傳遞性問題。 此外，由於郵件體積較大，用戶的殺毒軟件可能會將其視為安全威脅。

預防。 查看您的電子郵件服務提供商和您的訂閱者使用的電子郵件客戶端的電子郵件正文大小限制。 例如，Google 聲稱電子郵件正文大小限制為 200 KB。 但廣泛建議將您的電子郵件限制為 100 KB，以滿足大多數電子郵件客戶端的要求。 實際上，上面示例中的電子郵件大小為 136 KB。

字體和顏色太多

潛在問題。 由於電子郵件客戶端之間的差異，並非所有字體和顏色都能正確顯示。 此外，並不是所有的字體和顏色都能很好地相互結合——所以你可能會創建一個弱的電子郵件設計。

您還應該記住，訂閱者的設備具有不同的屏幕設置，例如亮度。 當您試圖讓您的電子郵件更加生動時，用戶可能會遭受這種色彩的混亂。

這是電子郵件設計的一個有問題的例子：每個塊都有自己的顏色； 這足以分散用戶對最重要信息的注意力。

預防。 選擇適合電子郵件的字體，例如 Arial、Comic Sans MS、Courier New、Times New Roman 或 Verdana：大多數流行的電子郵件客戶端都支持這些字體。 您的文字字體大小應不小於 12-13 像素； 否則，用戶將不得不放大您的電子郵件或使他們的眼睛疲勞。

至於顏色，您不應使用超過兩種顏色：一種用於一般文本塊，另一種用於突出重要內容以及鏈接和按鈕。 確保您選擇的顏色與背景相匹配，並且在用戶切換到暗模式時看起來不錯。

從文本編輯器或網站複製電子郵件模板 HTML 代碼

潛在問題。 如果您使用 Microsoft Word 或類似的東西為您的電子郵件創建文本，然後只是複制它，您可能會遇到一些不必要的格式，這可能會破壞您的電子郵件佈局。 如果您從網站複製圖像或部分文本，JavaScript 或 Flash 元素可能會添加到您的電子郵件中。

預防。 要對電子郵件進行編碼，請使用不添加自己的格式的文本編輯器，例如 Windows 的記事本或 Mac 的 TextEdit。 還有一些在線工具可以清理您的格式，例如 TextCleanr。 您還可以使用 HTML Cleaner 工具，該工具允許您在用戶友好的編輯器中創建電子郵件並同時檢查代碼。

使用三位十六進制顏色代碼

潛在問題。 儘管三位數和六位數顏色格式應該是等效的，但有時電子郵件客戶端會以略有不同的方式呈現三位數格式。 例如，使用 Gmail 時，您可能會遇到紫色而不是您計劃的黑色： color: #000變成color: #500050 。

預防。 根據經驗，堅持使用六位數顏色格式，並確保在整封電子郵件中都使用它。

附件

潛在問題。 通常，垃圾郵件發送者和黑客會在他們的電子郵件中附加一些文件。 如果您添加附件，它可能會被視為安全威脅。

預防。 提供文件加載頁面的鏈接，而不是將文件直接添加到電子郵件中。

下面是一個示例，說明如何授予用戶訪問您承諾的文件的權限。 注意鏈接的指定方式：它應該是一段可點擊的可理解文本，以便用戶在點擊鏈接時知道會發生什麼。

缺少替代文字

潛在的問題。 一些用戶禁止在他們的瀏覽器中下載圖像。 如果他們收到一封電子郵件，包括沒有替代文本的圖像，他們只會看到空格而不是圖像，並且不會理解電子郵件的重點。

當某人的互聯網連接太低而無法足夠快地下載圖像時，它的工作原理相同。 替代文本在某種程度上有助於解決這個問題：當圖像下載出錯時，用戶可以看到文本。

預防。 為您使用的所有圖像添加alt屬性。 確保你做對了——通過將它添加到img標籤： <img alt="text"> 。 將替換文字限制為 125 個字符，包括空格。 通常只需添加幾個準確描述圖像的詞就足夠了。 如果您還有一些空間，您可以在此描述中添加一些上下文。

看看來自絲芙蘭的一封電子郵件的摘錄。

如果您查看此電子郵件的代碼，您可以找到 CTA 作為圖像的替代文本。 即使用戶沒有看到圖片，他們仍然會理解品牌提供的產品。

僅圖像佈局

潛在問題。 如果您的電子郵件僅包含圖像而沒有任何文本，則您可能會遇到可傳遞性、顯示等方面的問題。 例如，如果用戶阻止圖像下載，他們將在您的電子郵件中幾乎看不到任何內容。 其次，大量圖像使電子郵件正文變大，電子郵件客戶端可能會對其進行剪輯。 第三，用戶將無法通過字詞搜索在文件夾中找到您的電子郵件。

預防。 創建電子郵件時，將文本和圖像結合起來。 不要忘記添加純文本版本的電子郵件和圖片的替代文本； 考慮我們上面給出的其他建議。

看看來自 Ecwid 的這封電子郵件。 它具有響應式設計，包括表格佈局和媒體查詢，例如max-width: 570px 。 電子郵件結合了不同類型的內容：色彩豐富、引人入勝的圖像和文本。 使用六位顏色格式，例如color:#979797或color:#4A4A4A 。 郵件中的圖片不多，所以它的主體尺寸不是太大。 更重要的是，在電子郵件中既找不到縮短的鏈接也找不到重定向。 總的來說，這封電子郵件符合上面給出的大部分建議。

因此，我們已經了解了最常見的 HTML 電子郵件編碼錯誤。 採納我們的建議，在發送之前不要忘記測試您的電子郵件：使用至少三個流行的電子郵件客戶端打開您的電子郵件； 如果可能，也可以通過不同的設備進行檢查。 模擬器也將派上用場。

避免電子郵件編碼錯誤的另一種方法

有一個事實：如果你不編碼，你就不會犯 HTML 編碼錯誤。 幸運的是，無代碼電子郵件設計正在等待您使用 SendPulse。

借助我們直觀的拖放編輯器，我們已經防止您犯電子郵件編碼錯誤。 只需將圖像、文本或視頻添加到您的電子郵件，設置字體和顏色以匹配您的品牌風格，並添加指向您的社交媒體頁面的鏈接。

為了讓整個過程更加簡單，您可以從我們的免費電子郵件模板中進行選擇。 使用 SendPulse 創建的所有電子郵件都是響應式的，因此無論用戶選擇哪種設備打開它們，它們看起來都不錯。

避免常見 HTML 電子郵件編碼錯誤的清單

您將在下面找到有關如何避免常見 HTML 電子郵件編碼錯誤的主要規則。 遵循這些規則，您可以避免在可傳遞性和顯示電子郵件方面出現問題。

• 在您的電子郵件中添加純文本版本。
• 請勿使用 JavaScript、ActiveX、Flash 或更多此類內容。 如果您需要添加一些視頻或音頻，請將其上傳到網站，並提供鏈接。
• 盡量避免重定向，以免增加網頁的加載時間。
• 不要使用縮短的鏈接 - 使用 HTML 將一段文本或圖像轉換為鏈接。
• 嘗試將您的電子郵件正文大小限制為 100 KB — 或者至少檢查您的發送提供商和訂閱者最常使用的電子郵件客戶端的限制。
• 選擇適合電子郵件的字體，例如 Arial、Comic Sans MS、Courier New、Times New Roman 或 Verdana。
• 盡量不要在一封電子郵件中組合兩種以上的顏色——否則，它看起來會讓人分心。
• 不要從文本編輯器（如 MS Word 或網站）複製電子郵件的文本和圖像：存在捕獲一些不必要格式的風險。
• 使用六位顏色格式。
• 不要附加文件 - 而是提供指向文件加載頁面的鏈接。
• 不要忘記為圖像添加替代文本。
• 不要只製作圖像的電子郵件 - 始終添加一些文本。
• 在開始活動之前不要忘記測試電子郵件。 使用至少三個電子郵件客戶端和不同的設備。

並且不必考慮所有這些 - 開始免費使用 SendPulse！