電子郵件營銷網(wǎng)站程序設(shè)計的現(xiàn)狀：可以使用和不能使用的內(nèi)容

許多人希望創(chuàng)建最佳的電子郵件活動，并且可以通過遵循電子郵件設(shè)計和編碼的最佳做法以及正確實施高級技術(shù)來實現(xiàn)此目標(biāo)。這份針對新手和專業(yè)人士的綜合指南，將深入研究電子郵件營銷的精髓。

這是您將學(xué)到的東西：

• 電子郵件設(shè)計的最佳做法，從創(chuàng)建主題到設(shè)計頁腳；
• 如何在電子郵件中添加圖像并將富媒體（GIF，電影膠片，視頻）合并；
• 如何設(shè)計響應(yīng)式電子郵件以獲得更好的用戶體驗；
• 電子郵件客戶端支持響應(yīng)式移動電子郵件；
• 最后，電子郵件設(shè)計中的高級技術(shù)。

介紹

電子郵件已經(jīng)從基于普通文本的個人交流工具轉(zhuǎn)變?yōu)槊嫦蛭磥淼臓I銷渠道。我們已經(jīng)進入了一個視覺吸引人的HTML電子郵件世界，這些電子郵件在收件箱中具有微型站點的感覺。

因此，如果您想避免破壞用戶體驗而提高用戶參與度，則必須熟悉電子郵件編碼的最佳實踐。此外，隨著數(shù)字世界變得更加移動，創(chuàng)建響應(yīng)式電子郵件已成為一個小時的需求。

在本文中，我們將更深入地研究適用于所有電子郵件客戶端的最佳實踐，以及可用于支持交互式元素的電子郵件客戶端的高級技術(shù)。

讓我們從電子郵件的基本結(jié)構(gòu)開始。

基本電子郵件結(jié)構(gòu)

正如萊昂納多·達·芬奇（Leonardo da Vinci）所說，“簡單是最終的復(fù)雜性?！币虼?，請保持電子郵件的設(shè)計簡單。

查看以下慈善機構(gòu)提供的電子郵件設(shè)計：水。簡單但引人入勝。

開發(fā)人員已經(jīng)使用<table>布局對電子郵件進行編碼已有很長時間了。因此，建議您將電子郵件元素放置在基于網(wǎng)格的布局中，而不是隨意放置。而且，任何可能重疊的元素都需要添加到不同的層。

上面由“慈善機構(gòu)：水”顯示的電子郵件在導(dǎo)出為表格布局時如下所示：

電子郵件設(shè)計由不同的子元素組成。讓我們現(xiàn)在探索它們。

1.電子郵件主題

徽標(biāo)不是反映您品牌個性的唯一元素。電子郵件的整體主題，包括字體，配色方案和圖像，應(yīng)與品牌準(zhǔn)則保持同步。

2.電子郵件模板的寬度和高度

由于您的訂閱者使用各種電子郵件客戶端和設(shè)備，因此您的電子郵件應(yīng)在所有電子郵件客戶端的預(yù)覽窗格中適當(dāng)顯示。請記住，電子郵件將根據(jù)電子郵件服務(wù)提供商或客戶端的顯示窗格顯示。僅某些電子郵件客戶端（例如Thunderbird，Apple Mail和本機移動電子郵件客戶端）將以全角顯示電子郵件。

對于其他電子郵件客戶端，顯示框的大小可變。許多服務(wù)提供商（例如MailChimp）都通過建議使用600至800像素的寬度來遍歷HTML電子郵件的基礎(chǔ)知識，以便顯示完整的電子郵件。請記住，大多數(shù)訂閱者從不使用電子郵件中的水平滾動條。

電子郵件模板的高度通常應(yīng)該足夠長，以在兩個滾動長度內(nèi)容納您的副本。如果您必須傳達大量信息，則當(dāng)然可以有更長的電子郵件模板。但是，如果您的電子郵件模板過長，可能會使訂閱者感到無聊，訂閱者不太可能滾動到最后查看包含的所有優(yōu)惠和促銷信息。

大多數(shù)電子郵件客戶端的預(yù)覽窗格的高度（包含通常稱為“首屏”的內(nèi)容）通常在300到500像素之間。充分利用此空間，以便折疊上方的內(nèi)容誘使訂戶向下滾動。

每個電子郵件開發(fā)人員都知道，如果電子郵件的文件大小超過102 KB，Gmail的應(yīng)用程序?qū)⒉眉綦娮余]件，并且他們將無法跟蹤指標(biāo)。

請查看下面的屏幕截圖，查看裁剪后的電子郵件在Gmail中的外觀：

為了避免Gmail的剪輯，請確保您的電子郵件中沒有不必要的代碼且格式?jīng)]有過多。盡量簡化電子郵件設(shè)計，不要縮短網(wǎng)址。請注意，圖像不會嵌入到電子郵件中，因此不會增加文件的大小。話雖如此，刪除不必要的圖像將有助于減小電子郵件的大小。

對于使用預(yù)先設(shè)計的模板的營銷人員，高度和寬度已經(jīng)得到了照顧。如果要使用自己的設(shè)計，請考慮電子郵件模板的理想寬度和高度。

3.電子郵件正文

電子郵件通常從頂部的英雄圖片開始，然后是主要副本，號召性用語，然后是頁腳。

由于大多數(shù)人在距離大約2到3英尺的屏幕上閱讀，因此h1標(biāo)題的大小應(yīng)為16像素左右；如果標(biāo)題很短，則甚至可能高達20像素。一個好主意是將h1標(biāo)題與有吸引力的英雄圖像一起顯示為文本。

描述性文字不得小于12個像素。在所有電子郵件客戶端和設(shè)備上應(yīng)易于閱讀。此外，段落的對齊和段落大小也起著重要的作用。

4.號召性用語

電子郵件營銷的主要目標(biāo)是說服客戶采取行動。為此，您的號召性用語（CTA）應(yīng)該具有引人入勝且可操作的動詞。請使用令人信服且可行的文字，例如“開始免費試用”，而不要使用單調(diào)的短語，例如“單擊此處”。

ContentVerve進行的一項有趣的研究“ 從真實按鈕測試中獲取的10個號召性用語案例研究 ”顯示，無論產(chǎn)品如何，在CTA中使用第一人稱視角都會使點擊次數(shù)增加90％。例如，“獲取我的免費副本”的轉(zhuǎn)換效果比“獲取我的免費副本”的轉(zhuǎn)換效果更好。

通過添加“現(xiàn)在”一詞，在CTA中產(chǎn)生緊迫感，并獲得更高的點擊率。

Campaign Monitor在其指南之一“ 優(yōu)化號召性用語的十個技巧 ”中強調(diào)，CTA按鈕應(yīng)始終與背景色形成強烈對比，以使其不會融合在一起并引起訂戶的注意。根據(jù)您的目標(biāo)受眾，您的行業(yè)和要傳達的消息（包括定期發(fā)送的CTA）可以提高電子郵件的轉(zhuǎn)化率和所需的訂閱者操作。它的高度至少應(yīng)為30像素，并且應(yīng)該可以用拇指在移動設(shè)備上輕松輕按。

查看來自Asana的以下電子郵件。它從戰(zhàn)略上將CTA放在第一折之上，并且遵循上述CTA最佳做法。

5.圖像和互動元素

如果您要在電子郵件中放置圖像或富媒體，請?zhí)砑酉嚓P(guān)的替代（alt）文本，以便即使電子郵件客戶端阻止了視覺效果，也可以保留電子郵件的用途。這也對可訪問性很有幫助，因為屏幕閱讀器將能夠閱讀替代文本并傳達您的消息。

大多數(shù)電子郵件營銷人員傾向于發(fā)送包含單個圖像的電子郵件，這是MailChimp編譯的許多常見HTML錯誤之一。建議將文字與圖片的比例設(shè)置為80到20，以確保電子郵件不會被垃圾郵件過濾器困住。根據(jù)MailChimp的最新研究，每個圖像200個單詞產(chǎn)生了良好的點擊率。

在電子郵件中使用鏈接的圖像可確保最佳文件大小。使用<img>標(biāo)簽從外部服務(wù)器加載圖像。

該技術(shù)的主要優(yōu)點是，即使在發(fā)送電子郵件之后，您也可以更改圖像。它使電子郵件點亮，并減少了發(fā)送電子郵件所需的時間。缺點是訂戶必須從外部服務(wù)器下載圖像，這將導(dǎo)致按計量連接的用戶需要下載圖像，并且圖像也可能會被某些電子郵件服務(wù)阻止。

如今，諸如GIF，電影和視頻之類的富媒體元素在電子郵件中正變得越來越流行。

您只需將文件上傳到存儲圖像的服務(wù)器，即可在電子郵件中添加GIF或電影膠片。然后，復(fù)制URL并使用以下HTML：

測試電子郵件，以確保GIF正常運行。

嵌入視頻是一種非常適合Web開發(fā)的技術(shù)，但是不幸的是，電子郵件不支持嵌入視頻。因此，選擇HTML5視頻。

要在電子郵件中添加視頻，請使用以下代碼：

<video width="400" height="200" controls poster="http://www.art.com/images/blog_images/Imagefiles/2017/html5_video/valentinesday.jpg"><br/><source src="https://www.videofile.com/htmlfiles/movie-14thfeb.mp4" type="video/mp4"><br/><!-- fallback 1 --><br/><a  ><br/><img height="200" src=" http://www.art.com/pictures/important/Imagefiles/2017/html5_video/valentinesday.jpg " width="400" /><br/></a><br/></video><br/><br/><br/> 

HTML5主要支持MP4，OGG和WebM視頻格式。

專家提示： Apple在其電子郵件客戶端和瀏覽器中支持MP4視頻格式。

需要記住的幾點：

• 確保您使用的服務(wù)器配置可以輸出正確的MIME類型，以便電子郵件客戶端在檢索視頻時標(biāo)識正確的視頻格式。

• 如果您使用的是Apache Web服務(wù)器，請將此條目添加到.htaccess文件：中Add Type video/mp4.mp4 m4v。

6.電子郵件折數(shù)

如前所述，您的電子郵件應(yīng)該只有兩折。第一折應(yīng)該抓住您的品牌，并在h1標(biāo)題中加上相關(guān)的CTA。如果您的電子郵件模板超過兩個滾動條，則第三個滾動條應(yīng)交叉銷售您的產(chǎn)品。這個想法是通過提供有趣的信息來改變內(nèi)容并吸引訂戶。

7.頁腳

頁腳是所有電子郵件中最被忽略的部分。但是，它可能具有訂戶正在尋找的信息，例如公司地址，社交共享按鈕和聯(lián)系方式。為了使您的電子郵件兼容CAN-SPAM，頁腳應(yīng)包含一些其他元素。

“退訂”鏈接應(yīng)允許訂閱者輕松選擇退出您的郵件列表，并減少垃圾郵件的投訴。

您的聯(lián)系方式應(yīng)鏈接回公司網(wǎng)站，并應(yīng)包括您的郵政和電子郵件地址。

此外，您可以使用輔助鏈接，例如“轉(zhuǎn)發(fā)給朋友”和“在瀏覽器中查看”。

如Bee的“ 頁腳設(shè)計最佳實踐 ”所述，電子郵件的精美印刷應(yīng)包含以下部分：

• 收件人為何收到此電子郵件的說明
  您的訂閱者可能已訂閱了許多郵件列表。巧妙地提醒收件人接收電子郵件的原因，以保持您作為電子郵件發(fā)件人的聲譽并最大程度地減少垃圾郵件投訴。
• 版權(quán)
  包括版權(quán)標(biāo)記，以及當(dāng)年和您的公司名稱。
• 隱私權(quán)政策
  鏈接到您的隱私權(quán)政策，因為訂戶應(yīng)該知道該信息的存儲位置。這對于電子商務(wù)零售商至關(guān)重要。
• 使用條款
  如果要發(fā)送強調(diào)折扣優(yōu)惠的促銷電子郵件，請共享管理交易的使用條款。

設(shè)計頁腳

將信息塞入頁腳聽起來很誘人，但您應(yīng)該確定最重要的業(yè)務(wù)信息并將頁腳限制在最小范圍內(nèi)。用太多的信息填充它可能導(dǎo)致讀者完全忽略它，因為他們將無法確定要單擊的鏈接。

在“身體上的棉花”下面查看頁腳。盡管它組織得很好，但對于正在掃描電子郵件的訂戶來說可能是不堪重負(fù)的。

移動響應(yīng)電子郵件

大多數(shù)用戶會在手機上查看電子郵件。由于這種趨勢，您的電子郵件應(yīng)該及時響應(yīng)。響應(yīng)式設(shè)計包括多個元素，例如媒體查詢，流暢的網(wǎng)格和流暢的圖像，因此，無論屏幕大小或設(shè)備如何，用戶都可以按預(yù)期方式查看電子郵件。響應(yīng)式電子郵件設(shè)計的基礎(chǔ)包括table元素，易于堆疊的部分和全角CTA。

如果您的訂戶列表由許多移動用戶組成，請避免布局重疊。隱藏非主要部分，例如導(dǎo)航和電子郵件廣告，以迎合移動用戶。也可以使用特定于移動設(shè)備的電子郵件元素，例如導(dǎo)航菜單和圖像滑塊。

這些電子郵件客戶端支持響應(yīng)式電子郵件設(shè)計：

• iOS Mail應(yīng)用
• Windows Phone 7.5
• Android 4.x電子郵件（OEM）應(yīng)用
• 黑莓Z10
• 黑莓OS7
• iPhone Gmail應(yīng)用程序

以下電子郵件客戶端不支持響應(yīng)電子郵件：

• Android Yahoo Mail應(yīng)用程序
• iPhone Yahoo Mail應(yīng)用程序
• 黑莓OS 5
• Windows Phone 7
• iPhone郵箱應(yīng)用
• Windows Phone 8
• Android Gmail應(yīng)用
• Windows Mobile 6.1

響應(yīng)式設(shè)計使您可以執(zhí)行以下操作：

• 改變等級
• 修改導(dǎo)航，
• 放大字體，
• 更改布局，
• 縮放圖像
• 添加填充，
• 更改或隱藏內(nèi)容。

設(shè)計響應(yīng)式電子郵件

為了使電子郵件具有響應(yīng)性，開發(fā)人員使用媒體查詢，該查詢通常稱為@media。它是一組特殊的CSS樣式，包含在標(biāo)頭中，可以用作條件語句或動態(tài)規(guī)則。

媒體查詢的重點是識別正在使用的設(shè)備的屏幕尺寸，并根據(jù)該屏幕尺寸執(zhí)行各種規(guī)則。面臨的挑戰(zhàn)是，與其他設(shè)計技術(shù)相比，媒體查詢無法在所有電子郵件客戶端中使用，并且可能需要詳細的計劃和測試。

看看下面的媒體查詢：

@media only screen and (min-width:479px) and (max-width:701px) { .em_main_table { width: 100% !important; }  .em_hide { display: none !important; } } 

當(dāng)在屏幕寬度介于479到701像素之間的設(shè)備上訪問此電子郵件時，根據(jù)width: 100% !important;屬性，電子郵件的寬度將為100％。該!important功能會在電子郵件客戶端（例如Gmail）中強制使用此屬性，而該屬性可能會被忽略。

CSS規(guī)則塊中的樣式應(yīng)指定樣式將指示的容器或元素類型。如果您希望它們起作用，請在HTML中分配這些規(guī)則。

這是CSS：

td[class="body-header"]{ font-size: 18px !important; } 

這是HTML：

<td align="left" class="body-header"> 

在CSS和HTML中添加的元素（td）和類（body-header）必須彼此匹配，這一點很重要。

先進技術(shù)

隨著基于Webkit的Apple Mail等高級電子郵件客戶端的出現(xiàn)，電子郵件開發(fā)人員甚至可以玩關(guān)鍵幀動畫，諸如輪播的交互式元素和實時供稿。

針對不同的電子郵件客戶端（例如Outlook以及三星和Apple設(shè)備）的條件編碼也已成為可能。