我當前的HTML電子郵件開發工作流程

HTML電子郵件開發工作流程：提高效率的實用指南

每個網頁開發者都有自己獨特的工作方式：偏愛的編輯器、輔助工具、個人項目流程等等。對於大型或複雜的項目，清晰的開發路徑至關重要，它能節省時間並最大限度地減少錯誤。

在我的經驗中，這在HTML電子郵件項目中尤其重要。電子郵件需要許多重複性任務，這些任務本身並不特別複雜（至少並非總是如此），但由於需要檢查的大量元素和任務，可能會變得棘手。

在這裡，我將嘗試解釋我個人的HTML電子郵件開發工作流程。我希望您可以從中挑選出您喜歡的部分。

關鍵要點

• 作者強調在HTML電子郵件項目中清晰的開發路徑的重要性，以節省時間並最大限度地減少因大量重複性任務而造成的錯誤。
• 使用預處理器，例如Jade用於HTML和Less用於CSS，可以通過減少冗長代碼的需求來簡化開發過程，尤其是在嵌套表格方面。建議使用CodeKit和Coda等工具來編譯文件並實時預覽工作。
• 建議使用Gulp Email Builder包來自動執行工作流程的最後幾個步驟，包括內聯或嵌入CSS文件、使用Litmus API進行測試以及發送額外的測試電子郵件。
• 良好的HTML電子郵件開發工作流程可以顯著提高生產力。作者的工作流程包括本地測試創作、CSS內聯和使用Gulp Email Builder進行自動化測試。鼓勵根據個人喜好和需求定制這些步驟。

典型的電子郵件開發工作流程

經典的電子郵件開發工作流程包含三個主要步驟：

• 創作（進行初步的本地測試）
• CSS內聯
• 測試

最終測試（使用內聯CSS）是最耗時的步驟，因為我們可能需要多次重複它。 “CSS內聯”和“測試”任務需要額外的工作和關注：首先，您必須注意將原始工作副本與內聯副本區分開來。此外，最終測試需要您將內聯HTML發送到各種帳戶，以針對各種電子郵件客戶端檢查您的設計。

通過電子郵件發送代碼有點棘手，因為大多數客戶端不允許您通過將HTML代碼粘貼到正文中來撰寫電子郵件（我所知道的唯一一個是Thunderbird）。但是每次測試都需要許多操作來撰寫郵件、內聯CSS、粘貼代碼等。

如果您有測試平台帳戶（Litmus、Email On Acid、Campaign Monitor或其他），您可以通過將內聯代碼提交到測試平台來簡化最終測試任務，但是為了進行更準確的測試，您仍然需要通過郵件發送代碼。過去，我使用了一個小的PHP腳本發送測試電子郵件，這可以節省一些時間，但仍然需要重複某些任務。

回到CSS，您可能需要處理兩個文件：一個用於內聯，一個用於嵌入（對於支持媒體查詢的客戶端）。

您必須將CSS直接編輯到HTML文件中，然後啟動內聯工具（例如Mailchimp內聯工具），最後將第二個CSS嵌入到內聯文件中（光是寫出來就覺得很煩人！）

我們現在可以更詳細地回顧我們的工作流程方案：

為了獲得真正高效的工作流程，許多問題仍未解決，重複性步驟明顯多於創造性步驟，這很少能帶來好的結果。

幸運的是，我們仍然有一些方法可以使用：預處理器和任務運行器。

添加HTML和CSS預處理器

當我開始使用預處理器時，我立即意識到它們對電子郵件開發有多麼有用。對於HTML和CSS，預處理器都可以輕鬆簡化對冗長代碼的需求（尤其對於HTML）。

我主要使用Jade進行HTML和Less進行CSS，但您可以選擇自己喜歡的技術。在處理重複且混亂的代碼（如嵌套表格）時，Jade非常有用。請查看以下三層嵌套表格示例。

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

產生相同代碼的Jade代碼如下：

table(width="100%" )
  tbody
    tr
      td(width="100%")
        table( align="center")
          tbody
            tr
              td(width="100%")
                table(width="100%")
                  tbody
                    tr
                      td cell 1
                      td cell 2
                      td cell 3

如您所見，不再存在未關閉標籤的問題，代碼易於閱讀。

使用Jade，您可以創建複雜的模板並構建自己的代碼片段庫，在更多項目中重用代碼。對於Less或Sass，您也可以這樣做。

您可以使用Gulp或Grunt編譯文件，但是為了快速預覽您的工作，我發現Coda和CodeKit提供了最佳解決方案。

我們工作流程中的“本地測試”任務為我們提供了對工作的初步反饋，並且至關重要的是，它不需要執行其他操作。

CodeKit在保存時編譯我們的Jade和Less文件，並且可以實時預覽您的項目。另一方面，Coda允許您編輯文件並在單獨的窗口中預覽自動刷新的已編譯文件：

所有這些步驟都是完全自動化的，您可以將工作重點放在設計上，而不是那些不太有趣、重複性的任務上。

現在，我們有了用於創作的Jade和Less文件，以及用於預覽的已編譯HTML和CSS文件。下一步是將所有內容整合在一起進行最終測試。

使用Gulp進行快速測試

我研究了很多Gulp或Grunt腳本來自動化工作流程的最後幾個步驟。 npm提供了許多解決方案，但最終我選擇了Gulp Email Builder包。此包是更大項目的Gulp版本，如果您願意，它也有Grunt版本。

Email Builder允許您內聯或嵌入CSS文件，使用Litmus API進行測試以及發送額外的測試電子郵件。

要使用Email Builder，您當然需要安裝Gulp。我已經在我的文章“使用Gulp自定義Bootstrap圖標”中對此進行了介紹，因此您可以查看該文章以獲取幫助。此外，您可以閱讀Etienne Margraff關於Gulp和Grunt工作流程的文章。

除了Email Builder之外，我們還將使用Gulp-Replace包，因此您也需要安裝它。

與每個Gulp任務一樣，我們必須設置gulpfile.js：

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

首先，我們包含所有需要的包並設置四個變量：

• current_date 是一個表示當前日期的字符串；我們將使用它來區分測試電子郵件主題行，以便更容易區分不同版本。
• email_subject
• remote_imgs_basepath 是包含我們圖像的遠程文件夾的URL。我使用它通過為圖像設置相對路徑來執行本地測試（這樣我可以輕鬆進行所有必要的更改），但是最終測試（和發送任務）要求圖像上傳到遠程文件夾，因此我使用Gulp Replace將所有src屬性更改為remote_imgs_basepath
• email_builder_options 是一個用於配置Email Builder的對象

在這個例子中，email_builder_options對像有三個元素，您可以查看email-builder-core頁面以了解所有可用選項的完整列表。

第一個元素encodeSpecialChars確保所有特殊字符都編碼為其HTML數字形式。

emailTest元素用於設置電子郵件測試。它需要一些參數：

• email：用逗號分隔的電子郵件地址，我們將測試電子郵件發送到這些地址。我為每個需要測試的電子郵件服務（Gmail、Outlook、Yahoo等）都有一個帳戶，以便快速在他們的網頁郵件頁面和移動應用程序中檢查它們。
• subject：郵件的主題（請注意，我已經添加了current_date變量來快速識別我正在處理哪個版本）。
• transport：發送者需要執行此任務的參數

如果您使用Gmail作為transport參數，則需要在您的Google帳戶設置中激活“允許安全性較低的應用”，否則發送任務將失敗（最好不要為此使用您的個人帳戶）：

第三個參數允許您在Litmus平台上設置測試（當然，您需要一個Litmus帳戶）。您必須指示您的帳戶參數、可選主題（如果您多次執行測試，它將用於分組測試）以及要測試的電子郵件客戶端列表。

要添加客戶端，您必須使用其測試應用程序代碼。您可以從https://litmus.com/emails/clients.xml文件的application_code字段獲取此代碼（請注意，您必須登錄才能訪問此文件）。

在上面的示例中，該行

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

告訴Litums使用Gmail App（Android）、Gmail（Explorer）和iPhone 5s（iOS7）測試我們的電子郵件。

結果可以在Litmus上查看，就像手工製作的一樣：

當然，如果您只想執行電子郵件測試，可以從email_builder_options中刪除litmus參數。

gulpfile的最後幾行完成了所有工作：

• 我們首先告訴Gulp使用explore_and_taste.html文件來完成我們的工作（這是CodeKit從我們的Jade文件生成的HTML，我們剛剛將其用於第一次預覽）
• 使用replace模塊，所有本地路徑都將替換為我們之前設置的遠程路徑（replace(/src="imgs//g, 'src="' remote_imgs_basepath)）
• 最後，執行EmailBuilder任務，測試發送到Litmus和電子郵件地址，並註冊ready-to-send文件。

CSS文件呢？

Email Builder真正簡化了這項任務。您只需向鏈接或樣式標籤添加data屬性即可管理它們：

• 沒有data屬性的鏈接或樣式標籤將被內聯
• 如果它們具有data-embed屬性，則CSS規則將被嵌入
• 最後，data-embed-ignore允許您設置一些僅用於開發目的的CSS規則（它們在處理時將被忽略）。

同樣，Coda可以簡化Gulp處理，允許您使用其內部終端應用程序：

結論

現在我們可以最終重新安排我們的工作流程：

您可以根據自己的需要自定義每個步驟，使用其他編輯器而不是CodeKit，使用Grunt而不是Gulp，使用Sass而不是Less等等。無論您選擇什麼技術，這樣的工作流程都能真正提高您的生產力。

如果您有自己的HTML電子郵件工作流程，以及它與本教程中介紹的工作流程有何不同，請在評論中告訴我。

關於HTML電子郵件開發的常見問題

HTML電子郵件開發的最佳實踐是什麼？

HTML電子郵件開發是一個複雜的過程，需要深入了解編碼和設計原則。一些最佳實踐包括使用內聯CSS以確保您的樣式正確應用，使用表格進行佈局以確保與所有電子郵件客戶端兼容，以及在多個平台和設備上測試您的電子郵件以確保它們在任何地方看起來都很好。此外，重要的是保持代碼簡潔有序，為圖像使用alt標籤，並為無法或不想查看HTML電子郵件的用戶包含電子郵件的純文本版本。

我如何學習HTML電子郵件開發？

有很多資源可用於學習HTML電子郵件開發。 Udemy和Skillshare提供的在線課程可以提供對該主題的全面介紹。此外，SitePoint和Email on Acid上的博客和文章可以提供有價值的提示和見解。實踐也很關鍵——嘗試從頭開始構建您自己的電子郵件以了解該過程。

我需要哪些HTML電子郵件開發工具？

HTML電子郵件開發需要一個用於編寫代碼的文本編輯器、一個用於測試電子郵件的電子郵件客戶端以及可能一個用於創建電子郵件佈局的設計工具。對於這些工具，有很多免費和付費選項可用，因此您可以選擇最適合您的需求和預算的工具。

如何使我的HTML電子郵件具有響應性？

使您的HTML電子郵件具有響應性包括使用媒體查詢根據查看電子郵件的設備的屏幕尺寸調整您的佈局。這可能包括更改圖像的大小、調整表格的佈局等等。網上有很多資源可以指導您完成這個過程。

HTML電子郵件開發中的一些常見挑戰是什麼？

HTML電子郵件開發中的一些常見挑戰包括處理不同電子郵件客戶端之間的不一致性、確保您的電子郵件在各種設備上看起來都很好以及保持代碼簡潔有序。此外，在具有吸引力的設計需求與電子郵件編碼的限制之間取得平衡也可能具有挑戰性。

如何測試我的HTML電子郵件？

測試您的HTML電子郵件是開發過程中的一個重要部分。這可以通過將電子郵件發送給自己並在不同的設備和電子郵件客戶端上查看它來完成。還有一些在線工具可以為您模擬不同的設備和電子郵件客戶端。

如何在HTML電子郵件開發中使用表格？

表格是HTML電子郵件開發中的一個關鍵工具，因為它提供了一種創建與所有電子郵件客戶端兼容的佈局的方法。這包括使用HTML表格標籤為您的電子郵件創建一個網格狀結構，然後將您的內容放在此結構中。

如何在HTML電子郵件開發中使用內聯CSS？

內聯CSS包括將您的CSS樣式直接放在HTML標籤中，而不是放在單獨的樣式表中。這在HTML電子郵件開發中很重要，因為某些電子郵件客戶端不支持外部樣式表。要使用內聯CSS，只需在HTML標籤的“style”屬性中包含您的樣式即可。

如何在我的HTML電子郵件中包含圖像？

可以通過使用“img”標籤以及“src”屬性來指定圖像的URL來在HTML電子郵件中包含圖像。同樣重要的是包含一個“alt”屬性，以便為無法或不想查看圖像的用戶提供圖像的文本描述。

如何創建HTML電子郵件的純文本版本？

創建HTML電子郵件的純文本版本包括去除所有HTML標籤並只留下文本內容。這可以手動完成，或者有一些在線工具可以為您做到這一點。包含電子郵件的純文本版本對於可訪問性和更喜歡不查看HTML電子郵件的用戶來說非常重要。

以上是我當前的HTML電子郵件開發工作流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！