如何創建 HTML 電子郵件

已發表: 2022-01-28

創建 HTML 電子郵件並不像聽起來那麼難。您不需要成為開發人員，也不需要知道如何編碼。

如果您曾經使用過 WYSIWYG（所見即所得）電子郵件編輯器，那麼您已經創建了 HTML 電子郵件。您拖放的每個模塊都由 HTML 和內聯 CSS 組成，定義了不同電子郵件元素的外觀和行為方式。

因此，如果大多數電子郵件編輯器允許您使用拖放工具進行設計，為什麼您需要了解任何 HTML 才能創建電子郵件？

好問題。

雖然大多數電子郵件編輯器在模塊中為您提供了相當多的控制權，但您將無法調整電子郵件的每一個細節。您可能需要 HTML 來更改以下內容：

您使用過Twilio SendGrid 的電子郵件編輯器嗎？它使您可以結合拖放模塊和HTML 編輯來創建電子郵件。像這樣的組合強大功能可讓您完全控制電子郵件的外觀和感覺，確保每條消息都具有一致、一流的品牌體驗。

幸運的是，編寫 HTML 電子郵件並不太難。下面，我們將為您提供創建更好的電子郵件所需的提示和電子郵件結構知識。

編寫 HTML 電子郵件的 5 個技巧

編寫 HTML 電子郵件相對簡單，但電子郵件客戶端和收件箱可能很挑剔。遵循這些最佳實踐以確保您的消息看起來很棒，無論您的收件人的客戶端、瀏覽器或設備如何。

收件人在各種操作系統、設備、屏幕尺寸、瀏覽器和電子郵件應用程序中打開電子郵件。這些因素中的每一個都會以不同的方式呈現您的電子郵件，因此您的工作是確保您的電子郵件具有響應性並在大多數收件箱中按預期工作。

您可以找到大量響應式電子郵件模板，但是當您從頭開始編寫 HTML 電子郵件時，這項任務會涉及更多。以下是一些有助於使您的電子郵件更具響應性的事項：

圖片是電子郵件活動的重要補充，但請注意不要過度使用它們。太多的圖像會延長加載時間，並使電子郵件難以呈現。

使用加載速度更快且不會佔用整個屏幕的較小圖像。此外，添加響應式尺寸元素，如“寬度”和“最大寬度”，以確保您的圖像在每台設備和電子郵件客戶端上正確加載。

記住電子郵件的目的。許多電子郵件設計師迷失在藝術和創造力中，忘記了電子郵件的總體目標——不是為了贏得讚譽。

首先，您希望人們打開您的電子郵件。接下來，您希望他們點擊並採取行動。這可能是訪問您的網站、閱讀博客文章、進行購買或註冊活動。

保持簡單。為您的收件人提供價值，用內容吸引他們，然後推動他們採取行動。而已。大多數時候，其他一切都是浮雲。

在您的電子郵件中添加不同的 HTML 元素時，問自己一個問題：“這是否有助於電子郵件實現其目的？” 如果沒有，請從您的電子郵件設計中刪除它。

您可以找到預構建的 HTML 電子郵件模板，其中包含發送出色營銷活動所需的一切。模板已經完成了創建美觀、響應式電子郵件設計的艱鉅工作。

如果您喜歡電子郵件模板但對它不是 100% 滿意，您通常可以下載 HTML 並進行您喜歡的編輯。對於那些剛接觸 HTML 的人來說，這可能是一種極好的電子郵件編輯方法。

未經測試，切勿發送電子郵件。執行此操作的老式方法是將測試電子郵件發送到不同的電子郵件地址（跨電子郵件客戶端）並嘗試在不同的設備上打開它。如果這聽起來像是浪費了很多時間和頭痛，那你是對的。

幸運的是，這些天有更好的方法。

Twilio SendGrid 的電子郵件測試工具與您的設計編輯器集成在一起，可幫助您解決單個應用程序中的問題。它將幫助您了解您的電子郵件在客戶端、瀏覽器和設備中的呈現方式。例如，您可以查看您的電子郵件在使用 Gmail 的移動設備和使用 Outlook 的桌面上的外觀。

電子郵件測試工具還可以幫助您找到損壞的鏈接和按鈕、垃圾郵件內容和格式問題。

HTML 電子郵件有一個簡單的結構：

文檔類型

使用 <!DOCTYPE> 告訴瀏覽器期待什麼——在本例中，它是一封 HTML 電子郵件。

標題

使用標題部分包含樣式、大小和元文本等元素。

身體

將正文用於電子郵件的視覺元素，例如文本、圖像、表格、鏈接等。

這是一個帶有 HTML 代碼的電子郵件模板示例。您可以查看此旅行通訊電子郵件模板如何在桌面、平板電腦和移動設備上呈現。

就像你看到的那樣？單擊“下載模板”，我們會將 HTML 代碼的副本發送到您的收件箱。然後，您可以將代碼複製/粘貼到您的電子郵件設計編輯器中，以導入模板並根據您的品牌和活動進行定制。

想要更多電子郵件模板？幸運的是，我們有一個充滿它們的畫廊。無論您需要時事通訊、密碼重置還是約會提醒模板，我們的免費模板庫都應有盡有。

此外，這些設計響應迅速，確保您的電子郵件在客戶端、瀏覽器和設備上看起來都很棒。哦，我們提到模板是免費的嗎？

立即開始使用預建模板創建更好的 HTML 電子郵件。