在不斷變化的電子郵件行銷世界中，了解 Gmail 的來龍去脈至關重要。
我們可能不必告訴您很多人使用 Gmail…但我們會的。根據 Sinch Mailjet 的新報告《2024 年電子郵件參與之路》， 在其全球調查中，71% 的消費者表示他們擁有 Gmail 帳戶。這就是為什麼掌握專門為 Gmail 客製化電子郵件的藝術是不容談判的。
在本文中，我們 Gmail HTML 電子郵件開發 將深入研究為 Gmail 撰寫 HTML 電子郵件時遇到的具體障礙，並闡明克服這些 Gmail 障礙的實用策略。
目
Gmail CSS 支持
儘管 Gmail 很受歡迎，但它給電子郵件開發人員帶來了獨特的挑戰，特別是它對某些 CSS 屬性的支援（或缺乏）。但在我們深入討論之前，重要的是要了解 Gmail 用戶有不同的類型。
了解 ANGA 及其對 Gmail 電子郵件呈現的影響
每當我們討論 Gmail 的 CSS 支援時，區分 ANGA 和非 ANGA 很重要。
ANGA（具有非 Gmail 帳戶的 Gmail Android）代表透過 Gmail 應用程式上的非 Gmail 電子郵件帳戶存取電子郵件的 Gmail 使用者的子集。這種差異很重要，因為 Gmail 應用程式呈現電子郵件的方式與 Gmail Web 介面不同，通常會導致電子郵件顯示和功能的變更。
Gmail 的 CSS 支援：克服限制
必須考慮Gmail 的 CSS 支援及其對電子郵件呈現的影響。以下是一些關鍵 Gmail CSS 支援說明及其帶來的挑戰的細分：
- 嵌入式 CSS – Gmail確實支援嵌入式 CSS，允許電子郵件部分的標籤內設定樣式，但我們上面提到的 ANGA 帳戶不支援它。
- 深色模式限制– 不幸的是，Gmail 不支援媒體查詢，許多開發人員使用媒體查詢來最佳化深色模式。對於喜歡深色模式設定的使用者來說，此限制可能會影響電子郵件的可讀性和視覺吸引
- Gmail 不支援網頁字體– 儘管 Google 擁有最大的網頁字體儲存庫，但不支援在電子郵件中使用自己的 Google 字體。僅支援兩種字體：Robot 和 Google Sans。
為 Gmail 編寫 HTML 電子郵件的 13 個技巧
我們整理了有關為 Gmail 編寫 HTML 電子郵件的重要技巧。如果您遇到問題或您只是想優化 Gmail 電子郵件建立流程，此清單可以滿足您的需求！
1. Gmail 剪輯大於 102kB 的郵件
這是迄今為止電子郵件開發人員最常用的 Gmail 技巧之一。如果您的電子郵件大小超過 102kB，Gmail 將顯示前 102kB 以及一則訊息：
如果接近 102kB，則可以透過刪除任何不必要的空格、換行符或註解來節省一些位元組。您還希望在發送 HTML 電子郵件時避免嵌入圖像和文件。
此外，如果您的電子郵件包含未正確編碼的特殊字符，Gmail 會將其剪掉。確保所有特殊字元均已正確編碼，以防止發生這種情況。以下是一些特殊字元編碼的範例。
- 版權符號©：
© - N破折號：–
如果您正在處理較大的電子郵件，您需要確保盡可能壓縮程式碼。如果您需要更多協助將電子郵件大小控制在 102kb 以下，請查看我們的Gmail 剪切指南。
2. Gmail有多個電子郵件用戶端
通常，當您對電子郵件進行編碼時，您只需擔心桌面用戶端和行動用戶端之間的差異，我們之前討論的 Gmail 的 ANGA 問題增加了額外的複雜性。
儘管 Gmail 多年來簡化了其介面，但仍然有幾種不同的電子郵件用戶端在呈現 HTML 電子郵件時具有不同程度的 CSS 支援和其他奇怪的變化。
3.非Gmail帳戶的Gmail應用程式（GANGA）不支援嵌入樣式
每當使用非 Gmail 帳戶存取 Gmail 應用程式時，將不再呈現嵌入樣式。
幸運的是，Google在 2017 年增加了對背景圖像的支持。雖然我們不能使用許多電子郵件用戶端使用的背景大小 CSS，但我們可以使用簡寫 CSS，如下所示：
如果您對此進行測試並發現您的背景圖像仍然無法在 Gmail 的 Android 或 iOS 應用程式中呈現 ANGA 電子郵件，則可能是因為另一個渲染問題。在這兩個應用程式中，預設會阻止 ANGA 電子郵件的圖像。
通常，您會看到一個顯示被封鎖圖像的鏈接，但如果您的電子郵件僅使用背景圖像且不包含任何其他圖像，則該鏈接將不會顯示。如果您使用的是背景圖像，請確保也包含常規圖像，以便出現「顯示圖像」連結。
4. Gmail僅支援<head>中的<style>
Gmail確實支援嵌入樣式 (。但是，Gmail 樣式標記支援僅限於 HTML 文件的頭部。 Gmail、Android 和 iOS 應用程式根本不支援渲染透過非 Gmail 帳戶 (GANGA) 檢索的電子郵件。
5. 如果遇到錯誤，Gmail 會刪除整個 <style> 區塊
<style>如果 Gmail 遇到任何它認為有錯誤的內容，它會刪除您的所有封鎖。最常見的情況是當您嵌套 @ 聲明（將 @ 置於 @ 內）時，這通常在聲明 Web 字體或聲明 Windows 郵件的視口時使用。
如果您在程式碼中使用這些聲明，請將它們包裝在自己的樣式標籤中，並將 Gmail 安全的樣式放在頂部區塊中。
如果超過 8192 個字符，Gmail 也會消除您的樣式塊。如果您的樣式區塊超出此字元限制，請將其分成兩部分。 Gmail 將刪除超過 8192 個字元閾值的第一個區塊及其後的所有區塊（字元數包括所有樣式區塊）。
6. Gmail 不支援 Roboto 和 Google Sans 以外的網頁字體
這可能看起來很瘋狂，但 Gmail 並不支援自己的 Google 字體。 Gmail 專門支援 Roboto 和 Google Sans 作為網頁字體。雖然這種 新加坡電子郵件列表 限制可能會讓人感到驚訝，但有必要透過利用字體堆疊來聲明電子郵件中的首選字體來適應這一限制。此方法可確保電子郵件用戶端之間的相容性。
閱讀我們有關利用字體堆疊實現跨客戶端字體支援的完整指南。
7. Gmail缺乏對屬性選擇器和偽類的支持
如果您的 Gmail CSS 無法正常運作，請檢查您的程式碼中是否使用了屬性選擇器和偽類。
儘管屬性選擇器（如下所示）在選擇 CSS 中的元素時提供了更大的靈活性，但 Gmail 不支援它們。
在 CSS 中使用負邊距值是一種非常常見的 Web 開發技術來重疊頁面元素。不幸的是，Gmail 根本不支援它。
要在電子郵件中實現這種重疊效果，您需要使用虛假定位技術，儘管 ANGA 本身不支援此技術。在使用這些技術之前，請確保深入研究分析。
10. 在 Gmail 中對電話號碼和電子郵件進行編碼
Gmail 透過自動將電話號碼、電子郵件地址和 URL 轉換為可點擊的連結來簡化使用者體驗，從而增強便利性。但是，對於電子郵件開發人員來說，此功能會新增至 Gmail 中可能無法如預期顯示的元素目錄。例如，轉換為：
更糟的是，連結將預設為藍色並帶有下劃線。大多數情況下，這種自動連結問題只是有點礙眼，但如果您為了創意表達而使用假域名（例如，或者您只是不想要其中的一部分，則可能會導致問題資訊可點擊。
以下是三個可能的修復方法，具體取決於您所追求的結果：
使用 Gmail 無法辨識的 HTML 實體
如果您不希望電子郵件中的某些電話號碼、電子郵件或網址自動包含在連結中，請使用 Gmail 無法識別的 HTML，例如 。這將使 Gmail 無法將文字識別為應自動連結的內容。
對於電話號碼，您可以在每個短劃線之前插入此實體。因此，電話號碼 212-389-3934 將編碼為：
於像這樣的電子郵 公司和內容創作者應遵循的 7 個技巧，以建立良好的社群媒體策略 件地址，您可以在網域類型前面的句點之前新增實體：
為了防止 自動轉換為鏈接，您可以像編寫電子郵件地址一樣對其進行編碼，並將實體添加到網域類型前面和 http:// 之後的句點中。
在文字周圍插入錨標記並設定其樣式
如果您只想讓文字看起來沒有轉換為鏈接，則可以隨時將其包裹在錨標記中，並設定其樣式以匹配周圍的文字。例如：
懸停時它仍然是一個可點擊的鏈接，但它看起來不像鏈接，並且被點擊的可能性要小得多。
11. Gmail使用HTML5 DOCTYPE
如果您在電子郵件中指定 HTML5 以外的 DOCTYPE，您會發現它在 Gmail 中的呈現方式與在瀏覽器或尊重您的 DOCTYPE 的電子郵件用戶端中的呈現方式不同。這是因為 Gmail 使用 HTML5 DOCTYPE 呈現所有電子郵件。
這並不是 Gmail 獨有的問題。許多其他電子郵件用戶端強制使用 HTML5，包括 Yahoo!行動和桌面網頁郵件上的 Mail；收件匣和雅虎！ iOS 上的郵件；以及 Android 上的收件匣。 Apple Mail 和 Outlook 都支援您想要使用的任何 DOCTYPE，但由於大多數其他電子郵件用戶端僅支援 HTML5，因此最好在您的電子郵件中堅持使用 HTML5 DOCTYPE。
如果您有興趣詳細了解 Doctypes 如何影響您的電子郵件代碼，您可以在此處查看我們的指南。
12. Gmail DOCTYPE 導致影像周圍出現多餘空間
Gmail 的 HTML5 DOCTYPE 可以在圖片下建立額外的空間。如果您使用切片影像，這尤其成問題（儘管最好還是避免使用切片影像）。不需要的額外間距也會有損電子郵件的美感，並使閱讀變得更加困難。
為了避免此問題，這裡有一些解決方法（這些方法也適用於 ：
1.為圖片元素添加樣
13. Gmail的深色模式不一致
Gmail 在 Android 和 iOS 平台上的深色模式相容性方面遇到了一些挑戰。
其中，當 Gmail 強制淺文字在 iOS 上轉換為 印度數據 深色文字時，就會出現一個重大問題。例如，如果一封電子郵件由黑底白字組成，iOS 的深色模式會將其反轉為白底黑字，從而破壞了深色模式的本質。
此行為不僅限於白色文本，還擴展到任何淺色文本，從而導致潛在的可訪問性和可讀性複雜化。
Rémi Parmentier 寫了一篇非常詳盡的文章，介紹如何使用 CSS 混合模式解決 Android 和 iOS 版 Gmail 中的暗模式不一致問題。他的範例程式碼如下：詳細了解暗模式電子郵件開發挑戰以及如何解決這些挑戰。
Gmail 和 AMP 電子郵件怎麼樣？
AMP（ Accelerated Mobile Pages的縮寫）是 Google 於 2015 年推出的開源框架。 AMP for Email 於 2019 年針對 Gmail Web 公開發布，允許使用者在電子郵件中包含 AMP 元件。
AMP for Email 透過新穎的標記和基礎設施實現功能，允許將輪播、表單、動態資料和 API 等互動元素插入到電子郵件正文中。
尋求將行銷活動提升到傳統靜態內容之外的電子郵件開發人員可以利用 AMP for Email 的強大功能，為訂閱者提供更具吸引力和個人化的體驗。借助 AMP，開發人員可以建立動態適應使用者互動的電子郵件，根據收件者操作提供客製化的內容和功能。這不僅提高了用戶參與度，還使電子郵件行銷人員能夠即時追蹤和分析收件者交互，從而促進數據驅動的行銷活動優化。
如果您有興趣嘗試使用 AMP 處理電子郵件，您可以在此處閱讀我們的相關文章或查看官方 AMP 文件。
2024 年 Gmail 寄件者指南
2023 年 10 月上旬，Gmail 和雅虎宣布了對希望向使用其服務的用戶遞送郵件的大量寄件者的新要求。雖然最嚴格的標準主要影響那些每天發送數千封電子郵件的人，但即使是那些發送量較低的人也應該考慮更新他們的做法。
新的批量寄件者要求主要涉及以下方面：
- 實施更強大的電子郵件身分驗證實務。
- 提供一種一鍵取消訂閱的簡單方法。
- 監控垃圾郵件投訴率，將其控制在特定閾值以下。
我們深入研究了您需要做什麼才能將內容傳送到 Gmail 和 Yahoo。
如果您正在尋找可協助您到達 Gmail 收件匣的電子郵件送達解決方案，請查看Mailgun Optimize。它是一個完整的交付套件，與 Google Postmaster Tools 集成，可幫助您監控身份驗證協議等等。
在酸性測試中使用 Sinch Email 征服 Gmail
在 ANGA、圖像變更、連結樣式、文件類型等方面，我們介紹了許多 Gmail CSS 支援的複雜性，這些複雜性可能會影響您的電子郵件行銷活動在訂閱者收件匣中的呈現方式。
這就是Sinch Email on Acid 測試發揮作用的地方，對我們在本文中討論的所有內容進行廣泛的測試至關重要。我們的測試工具可讓您快速有效地檢查這些不同版本的 Gmail，並確保您的電子郵件按照您的預期呈現。
我們的電子郵件預覽包括各種 Android 作業系統和裝置上的 Gmail 選項以及深色模式預覽。 Gmail 上的美觀很重要，Acid 上的電子郵件可協助您發揮最佳水準。