在電子郵件設計中使用片段的終極指南
已發表: 2015-11-20在數十個電子郵件客戶端、看似無數的渲染怪癖以及對 HTML 和 CSS 不斷變化的支持之間，編碼電子郵件活動是複雜的。 不幸的是，對於電子郵件設計師來說，這種複雜性意味著電子郵件設計變得越來越耗時，因此我們創建了在電子郵件設計中使用片段的終極指南。
在電子郵件設計大會上，Code School 的 Dan Denney 完美地描述了這個問題：
創建電子郵件的最大挑戰不是 Gmail……是時候了。
在電子郵件設計方面，時間至關重要，將開發工作流程落實到位至關重要。 為了跟上電子郵件設計快速變化的需求，使您的工作流程盡可能高效變得越來越重要。
那麼，您可以做些什麼來優化您的工作流程？ 一個字：片段。
借助片段，您可以比以往更輕鬆、更快速地創建電子郵件。 花更少的時間來構建和排除電子郵件故障，而將更多時間花在為訂閱者創造更好的電子郵件體驗上。
什麼是片段？
片段是可重用代碼的電子郵件模塊，您可以在電子郵件模板或更廣泛的電子郵件設計系統中使用。 它們非常適合電子郵件設計中常用的元素，例如文檔類型、防彈按鈕和鏈接。 每次使用這些元素之一時不必重新編寫代碼，您可以使用代碼片段。 使用代碼片段可以自動化您的編碼並大大加快開發時間。
如何使用片段
無論您使用哪種電子郵件編輯器來構建電子郵件，都可以使用片段來優化您的工作流程。 下面我們來看看如何在最常見的編輯器中使用它們。
織夢者
在 Dreamweaver 中，您可以通過訪問：Windows → Snippets → New/Edit 添加或編輯片段。 您甚至可以將片段保存在組中（即與表格相關的片段、與圖像相關的片段等），以便於搜索。
在編寫電子郵件時，通過雙擊片段標題、單擊插入或使用鍵盤快捷鍵來使用片段。
石蕊建造者
在 Builder 項目中，單擊編輯器右上角的 Snippets 圖標。
您可以在該界面中創建和編輯新代碼段，並通過鍵盤快捷鍵觸發代碼中的代碼段。 您還可以使用{braces}在代碼段內添加編輯點。 觸發片段後，您可以自動跳轉到片段中的預定義編輯點，以便快速輕鬆地進行自定義。
崇高的文字
要在 Sublime Text 中查看現有片段或添加新片段，請訪問：工具 → 片段/新片段。 每個片段都保存在自己的 .sublime-snippet 文件中。
通過鍵盤快捷鍵觸發器將代碼段添加到您的代碼中。 例如，在下面的代碼中，當在代碼中鍵入“hello”時會觸發該代碼段。 您還可以使用美元符號按順序（ $1 、 $2等）在代碼段內添加編輯點。
<snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 
原子
通過訪問：Atom → 打開您的代碼段，在 Atom 中查看、編輯或添加代碼段。 每個片段都保存為自己的snippets.cson 文件。
與 Sublime Text 類似，Atom 中的片段通過鍵盤快捷鍵觸發器工作。 您還可以使用美元符號按順序（ $1 、 $2等）在代碼段內添加編輯點。
'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 
結尾
Coda 中的片段被稱為“剪輯”。 要添加或編輯剪輯，請訪問：側邊欄 → 剪輯。 剪輯可以成組保存，它們在鍵盤快捷鍵觸發器上工作。 您還可以通過在 UI 中定義自定義佔位符點來在代碼段內添加編輯點。
片段庫
在每個編輯器中，您可以創建一個片段庫。 庫中的所有內容都應該是最新的並經過預先測試。 隨著電子郵件的世界不斷變化，請務必經常測試您的片段並在必要時添加新片段。
雖然還有更多，但我們已經匯總了一些我們最喜歡的開箱即用片段的完整列表，用於電子郵件開發。 隨意將它們添加到您的代碼片段庫中！
文檔類型
文檔類型告訴電子郵件客戶端以標准或怪癖模式呈現電子郵件。 有兩種推薦的文檔類型形式可用於電子郵件。 第一個是 HTML5 文檔類型：
HTML5
<!doctype html>XHTML
第二個是 XHTML 文檔類型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Campaign Monitor 分解了哪些 HTML 文檔類型適合使用，並且在 Litmus 社區上也有很多關於它的討論。 如果您沒有為電子郵件指定文檔類型，電子郵件客戶端將以“怪癖模式”呈現電子郵件，這可能會導致呈現問題。
元標籤
如果您將電子郵件編碼為響應式，則應該包含幾個關鍵的元標記。
UTF-8
第一個推薦的元標記將字符編碼設置為 utf-8，這是電子郵件的典型編碼。 如有必要，可以更改此設置。
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />視口
第二個推薦的元標記設置電子郵件的響應能力。
<meta name="viewport" content="width=device-width, initial-scale=1" />視窗電話
第三個推薦的元標記專門用於使電子郵件在 Windows Phone 上具有響應性。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />表
HTML 電子郵件使用表格來構建內容。 手工編寫表格可能非常乏味，因此我們開發了用於簡單表格佈局的基本片段。
表1×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>表2×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表 3×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表2×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表2×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表 3×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>表 3×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>防彈按鈕
由於 Outlook 呈現怪癖，在電子郵件中創建按鈕非常麻煩。 有四種推薦類型的防彈按鈕，無論是否有圖像都會顯示。
VML 按鈕
第一個防彈按鈕方法是由 Campaign Monitor 的 Stig Morten Myre 開發的，是一種基於 VML 的按鈕方法：
<div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>Campaign Monitor 還創建了buttons.cm，這是一個生成上述VML 按鈕代碼的簡單工具。
基於填充的按鈕
第二種方法是使用基於填充的按鈕的實時文本方法：
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>此按鈕的主要缺點是它不是 100% 可點擊的。
基於邊框的按鈕
第三種防彈按鈕方法涉及在鏈接周圍創建邊框以形成大的可點擊區域：
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>這種方法的主要缺點是 Outlook 2007-2013 不考慮鏈接標籤的邊框寬度，因此它確實會減少按鈕的人工填充。
填充+基於邊框的按鈕
最後一種方法涉及填充和邊框按鈕的組合：
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>此 hack 用於避免 Outlook 中的填充呈現問題。
圖片
在電子郵件中使用圖像時需要考慮許多關鍵因素。 例如，您必須在 HTML 屬性中定義高度和寬度，以便在 Outlook 中正確呈現圖像。 而且，使用 ALT 文本不僅對於可訪問性目的非常重要，而且因為 43% 的用戶查看電子郵件時關閉了圖像。 最後，為了防止圖像周圍出現額外的填充和間隙，您應該將它們設置為 display:block;。
<img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>鏈接
基本鏈接
在電子郵件中使用鏈接時，您需要在其上設置內聯樣式，例如字體大小、字體系列和文本裝飾。 這是一個簡單的片段，其中已經有了這些內聯樣式：
<a href="#">{style}</a>刪除 iOS 上的藍色鏈接
在 iOS 上有多種刪除藍色鏈接的策略，但這裡有一個簡單的片段，它使用單個 CSS 聲明來執行此操作：
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }隱藏的預標題/預覽文本
Preheader 或預覽文本是從電子郵件正文中提取的副本，通常顯示在訂閱者收件箱中的發件人姓名和主題行下方。 使用隱藏的預標題文本是一種定義所用副本的方法，並防止它影響電子郵件的實際設計。
這是片段：
<div> {preheader text} </div>媒體查詢
媒體查詢是級聯樣式表 (CSS) 的一個組成部分，CSS 是用於設計網站和電子郵件活動的語言。 借助媒體查詢，您可以微調電子郵件設計，使其更適用於移動設備、桌面設備和網絡郵件收件箱。
以下是您在設計電子郵件時需要的所有重要媒體查詢的列表：
基礎媒體查詢
@media screen and ({declaration}) { {content} }最大寬度媒體查詢
@media screen and (max-width: {width}) { {content} }最小寬度媒體查詢
@media screen and (min-width: {width}) { {content} }iPad 1 & 2 + iPad 迷你媒體查詢
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }iPad 3 & 4 媒體查詢
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }iPhone 2G/3G/3GS 媒體查詢
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }iPhone 4/4S/5/iPhone 6（縮放視圖）媒體查詢
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }HTC ONE + SAMSUNG GALAXY S4/S5 媒體查詢
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }iPhone 6（標準視圖）+ iPhone 6 Plus（縮放視圖）媒體查詢
@media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }iPhone 6 Plus（標準視圖）媒體查詢
@media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }展望有條件的評論
由於必須支持 Outlook 會帶來大量呈現問題，因此有時將 Outlook 定位為具有特定樣式的對象會很有用。 可以針對 HTML 或 CSS 內容使用條件 mso 註釋來定位 Outlook。
微軟 Word 渲染
<!--[if mso]> {content} <![endif]-->展望 2000-2013
<!--[if (gte mso 9)|(IE)]> {content} <![endif]-->更多 Outlook 條件註釋：
- 展望 2000
- 2000-2002年展望
- 展望 2000-2003
- 展望 2000-2007
- 展望 2000-2010
- 展望 2002
- 展望 2002-2013
- 展望 2003
- 展望 2003-2013
- 展望 2007-2013
- 展望 2010
- 2010-2013 年展望
- 展望 2013
網頁套件
逐步增強電子郵件的最佳方法之一是針對 WebKit 渲染引擎。 大約 47% 的電子郵件打開發生在由 WebKit 提供支持的收件箱中。
@media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }Gmail
Gmail 不支持電子郵件的 <head> 中的類或 ID，這就是 CSS 必須內聯在電子郵件中的原因。 然而，FreshInbox 的 Justin Khoo 發現了一種新的技巧，Gmail 可以在其中讀取電子郵件中的 CSS。
如果您使用 lang 或 title 屬性作為屬性選擇器，其值位於以空格分隔的值列表中，其中一個是完全匹配的，Gmail 將讀取該 CSS。 這是一口，所以這裡有一個片段來幫助你：
* [lang~="{name}"] { {style} }雅虎
雅虎郵件最近推出了自己獨特的媒體查詢，使我們能夠輕鬆地針對網絡郵件的某些樣式進行定位。
@media yahoo { {style} }安卓
James White 最近在 Litmus 社區上發布了一個在 Android 4.4 上集中電子郵件的技巧。
body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }社區中的片段
想要更多片段嗎？ 你有一些最喜歡的東西想要分享嗎？ 在各地電子郵件極客的幫助下，我們已經在 Litmus 社區中提供了數十個有用的片段，例如在 iOS 設備上刪除藍色鏈接的代碼。
按創建片段的電子郵件客戶端或片段類型（即黑客、圖像、鏈接等）對現有片段進行排序。 您可以添加自己的，並創建您最喜歡的片段庫。 而且，您可以通過將 Community 中的片段直接導入 Builder 來節省更多時間。 結合 Builder 的即時預覽，使用片段編碼可能是製作精彩電子郵件活動的最快方式。
查看社區中的片段 →