我當前的HTML電子郵件開發工作流程-css教學-PHP中文網

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

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

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

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

My Current HTML Email Development Workflow

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

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

My Current HTML Email Development Workflow

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

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

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

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

My Current HTML Email Development Workflow

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

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

添加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允許您編輯文件並在單獨的窗口中預覽自動刷新的已編譯文件：

My Current HTML Email Development Workflow

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

現在，我們有了用於創作的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帳戶設置中激活“允許安全性較低的應用”，否則發送任務將失敗（最好不要為此使用您的個人帳戶）：

My Current HTML Email Development Workflow

第三個參數允許您在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上查看，就像手工製作的一樣：

My Current HTML Email Development Workflow

當然，如果您只想執行電子郵件測試，可以從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處理，允許您使用其內部終端應用程序：

My Current HTML Email Development Workflow

結論

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

My Current HTML Email Development Workflow

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

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

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

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

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