HTML電子郵件開發(fā)工作流程：提高效率的實(shí)用指南

每個(gè)網(wǎng)頁開發(fā)者都有自己獨(dú)特的工作方式：偏愛的編輯器、輔助工具、個(gè)人項(xiàng)目流程等等。對於大型或複雜的項(xiàng)目，清晰的開發(fā)路徑至關(guān)重要，它能節(jié)省時(shí)間並最大限度地減少錯(cuò)誤。

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

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

關(guān)鍵要點(diǎn)

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

典型的電子郵件開發(fā)工作流程

經(jīng)典的電子郵件開發(fā)工作流程包含三個(gè)主要步驟：

• 創(chuàng)作（進(jìn)行初步的本地測試）
• CSS內(nèi)聯(lián)
• 測試

最終測試（使用內(nèi)聯(lián)CSS）是最耗時(shí)的步驟，因?yàn)槲覀兛赡苄枰啻沃匮}它。 “CSS內(nèi)聯(lián)”和“測試”任務(wù)需要額外的工作和關(guān)注：首先，您必須注意將原始工作副本與內(nèi)聯(lián)副本區(qū)分開來。此外，最終測試需要您將內(nèi)聯(lián)HTML發(fā)送到各種帳戶，以針對各種電子郵件客戶端檢查您的設(shè)計(jì)。

通過電子郵件發(fā)送代碼有點(diǎn)棘手，因?yàn)榇蠖鄶?shù)客戶端不允許您通過將HTML代碼粘貼到正文中來撰寫電子郵件（我所知道的唯一一個(gè)是Thunderbird）。但是每次測試都需要許多操作來撰寫郵件、內(nèi)聯(lián)CSS、粘貼代碼等。

如果您有測試平臺帳戶（Litmus、Email On Acid、Campaign Monitor或其他），您可以通過將內(nèi)聯(lián)代碼提交到測試平臺來簡化最終測試任務(wù)，但是為了進(jìn)行更準(zhǔn)確的測試，您仍然需要通過郵件發(fā)送代碼。過去，我使用了一個(gè)小的PHP腳本發(fā)送測試電子郵件，這可以節(jié)省一些時(shí)間，但仍然需要重複某些任務(wù)。

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

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

我們現(xiàn)在可以更詳細(xì)地回顧我們的工作流程方案：

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

幸運(yùn)的是，我們?nèi)匀挥幸恍┓椒梢允褂茫侯A(yù)處理器和任務(wù)運(yùn)行器。

添加HTML和CSS預(yù)處理器

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

我主要使用Jade進(jìn)行HTML和Less進(jìn)行CSS，但您可以選擇自己喜歡的技術(shù)。在處理重複且混亂的代碼（如嵌套表格）時(shí)，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>>

產(chǎn)生相同代碼的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

如您所見，不再存在未關(guān)閉標(biāo)籤的問題，代碼易於閱讀。

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

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

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

CodeKit在保存時(shí)編譯我們的Jade和Less文件，並且可以實(shí)時(shí)預(yù)覽您的項(xiàng)目。另一方面，Coda允許您編輯文件並在單獨(dú)的窗口中預(yù)覽自動(dòng)刷新的已編譯文件：

所有這些步驟都是完全自動(dòng)化的，您可以將工作重點(diǎn)放在設(shè)計(jì)上，而不是那些不太有趣、重複性的任務(wù)上。

現(xiàn)在，我們有了用於創(chuàng)作的Jade和Less文件，以及用於預(yù)覽的已編譯HTML和CSS文件。下一步是將所有內(nèi)容整合在一起進(jìn)行最終測試。

使用Gulp進(jìn)行快速測試

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

Email Builder允許您內(nèi)聯(lián)或嵌入CSS文件，使用Litmus API進(jìn)行測試以及發(fā)送額外的測試電子郵件。

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

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

與每個(gè)Gulp任務(wù)一樣，我們必須設(shè)置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>>

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

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

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

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

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

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

如果您使用Gmail作為transport參數(shù)，則需要在您的Google帳戶設(shè)置中激活“允許安全性較低的應(yīng)用”，否則發(fā)送任務(wù)將失?。ㄗ詈貌灰獮榇耸褂媚膫€(gè)人帳戶）：

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

要添加客戶端，您必須使用其測試應(yīng)用程序代碼。您可以從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）測試我們的電子郵件。

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

當(dāng)然，如果您只想執(zhí)行電子郵件測試，可以從email_builder_options中刪除litmus參數(shù)。

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

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

CSS文件呢？

Email Builder真正簡化了這項(xiàng)任務(wù)。您只需向鏈接或樣式標(biāo)籤添加data屬性即可管理它們：

• 沒有data屬性的鏈接或樣式標(biāo)籤將被內(nèi)聯(lián)
• 如果它們具有data-embed屬性，則CSS規(guī)則將被嵌入
• 最後，data-embed-ignore允許您設(shè)置一些僅用於開發(fā)目的的CSS規(guī)則（它們在處理時(shí)將被忽略）。

同樣，Coda可以簡化Gulp處理，允許您使用其內(nèi)部終端應(yīng)用程序：

結(jié)論

現(xiàn)在我們可以最終重新安排我們的工作流程：

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

如果您有自己的HTML電子郵件工作流程，以及它與本教程中介紹的工作流程有何不同，請?jiān)谠u論中告訴我。

關(guān)於HTML電子郵件開發(fā)的常見問題

HTML電子郵件開發(fā)的最佳實(shí)踐是什麼？

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

我如何學(xué)習(xí)HTML電子郵件開發(fā)？

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

我需要哪些HTML電子郵件開發(fā)工具？

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

如何使我的HTML電子郵件具有響應(yīng)性？

使您的HTML電子郵件具有響應(yīng)性包括使用媒體查詢根據(jù)查看電子郵件的設(shè)備的屏幕尺寸調(diào)整您的佈局。這可能包括更改圖像的大小、調(diào)整表格的佈局等等。網(wǎng)上有很多資源可以指導(dǎo)您完成這個(gè)過程。

HTML電子郵件開發(fā)中的一些常見挑戰(zhàn)是什麼？

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

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

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

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

表格是HTML電子郵件開發(fā)中的一個(gè)關(guān)鍵工具，因?yàn)樗峁┝艘环N創(chuàng)建與所有電子郵件客戶端兼容的佈局的方法。這包括使用HTML表格標(biāo)籤為您的電子郵件創(chuàng)建一個(gè)網(wǎng)格狀結(jié)構(gòu)，然後將您的內(nèi)容放在此結(jié)構(gòu)中。

如何在HTML電子郵件開發(fā)中使用內(nèi)聯(lián)CSS？

內(nèi)聯(lián)CSS包括將您的CSS樣式直接放在HTML標(biāo)籤中，而不是放在單獨(dú)的樣式表中。這在HTML電子郵件開發(fā)中很重要，因?yàn)槟承╇娮余]件客戶端不支持外部樣式表。要使用內(nèi)聯(lián)CSS，只需在HTML標(biāo)籤的“style”屬性中包含您的樣式即可。

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

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

如何創(chuàng)建HTML電子郵件的純文本版本？

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

以上是我當(dāng)前的HTML電子郵件開發(fā)工作流程的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！