響應式電子郵件設計指南

響應式電子郵件設計指南

本文根據 Jack Osborne 的《Responsive Email Design》所譯

自從 Ethan Marcotte 在 2010 年 5 月 25 日發佈的《A List Apart》文章開始，響應式網頁設計(RWD)討論的熱度並沒有減少，但在相同的時間內我們構建電子郵件的方式並沒有太多的改變。值得慶幸的是，在過去的一年，人們開始使用 RWD 和運用類似的方法來設計電子郵件。 在我們開始之前，我想向大家介紹 Anna Yeaman 在最近一次演講中介紹的一些資料，我們知道：

  • 2012年上半年，近 41% 的電子郵件在手機上閱讀
  • 僅有 2% 的人會在另一個設備上打開電子郵件
  • 電子郵件不能在小螢幕上優化，其轉化率要低 28%
  • 如果不能在小螢幕上閱讀您的電子郵件，將近有三分之一的使用者會退訂您的資訊

最基本的

在我們的職業生涯中，如果我們親手做過幾個響應式的 HTML 電子郵件，以及分享出來，這樣其他人解決一個相同的任務會有一個更好的起點。我不喜歡說這是所有的答案，我並不想說你要讀懂什麼是最好的方法，但希望這些方法可以幫助你解決問題或者說是一些最基礎的東西。


開始

記住,編寫電子郵件不像編寫一個網頁，,除非是像編寫一個 1994 年的 Web 頁面。你可能會碰到一些問題，但只要你有足夠的時間，保持引用不同的方法，你就會實現你需要的效果。


文檔類型

在已知的電子郵件客戶端 Gmail 和 Hotmail，會自動刪除你自己定義的文檔類型，他們會自動插入XHTML 1.0 Strict的文檔類型，這樣並不是一個壞主意，這樣一來你可以避免任何可能發生的衝突。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


視窗的 Meta 標籤

就像創建一個響應式的 Web 頁面一樣，第一步你就應該在你的文檔的<head>標籤內添加一個特定的<meta>標籤。沒有這個 meta 標記，移動端瀏覽器將假定你在桌面環境中查看內容，並設置視窗為一個更大的寬度，因此在小螢幕的設備上會擠壓頁面的一切。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

為了解決這個問題,蘋果公司推出視窗的 meta 標籤，允許你設置五種不同狀態。在上面的代碼片段中，我們只關心device-width和initial-scale。device-width設置了在你的頁面載入保持初始頁面的大小時，,視窗的寬度設置為設備的寬度，此時你的頁面配置將按 1:1 的規模不做任何放大效果呈現。


重置 body

如果你不想在 iOS 電郵中呈現的內容有間距，接下來我們要做的就是將body標籤的margin和padding值重置為 0。然後在一些移動電子郵件用戶端使用-webkit-text-size-adjust和-ms-text-size-adjus禁用自動文本大小調整，其作用就是阻止設備減少/增加預設的文本大小。

<body bgcolor="#EAE8E4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="height: auto; padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust: 100%;">

最後，我們設置一個背景顏色。


構建

佈局

響應式設計首先繪製草圖是移動端設計的最好開始，因為這可以讓你更好地把握你的內容，主要的、重要的內容怎麼放置。如果你需要修改的時候再回來重新設計，這樣會讓你變得更加笨拙。

行內樣式

不幸的是，即使有很多響應式設計的介紹，但我仍然離不開在元素的行內樣式。

<div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: block; font-size: 15px; color: #4D4D4D; font-weight: lighter; line-height: 120%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

媒體查詢和 CSS

我們規定不是行內的 CSS 樣式，都放在<head>標籤內。CSS 樣式放在媒體查詢裡面，同時使用屬性選擇器來避免 Yahoo! 電子郵件用戶端的一個不同尋常的故障。不同類名的屬性選器也將被使用，因為一些更明顯的名字在電郵用戶端可能導航一些衝突和佈局的混亂。最後一點是需要注意，所有聲明的樣式必須使用!important，確保這些樣式優先於內聯的樣式。

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        table[class=tableContent] {
            width:320px !important;
        }
        img[class="headerImage"] {
            width:320px !important;
        }
        p[class="theDate"] {
            display: none !important;
        }
    }
</style>       

第一行使用媒體查詢，將其設置為max-device-width:480px的中斷點值，這意味著,當視窗的寬度小於或等於這個尺寸時,執行裡面所有的代碼。雖然我們只列出了一個特定的例子，但媒體查詢可以很具體，你可以通過他們傳遞任意數量的值。

HTML 結構

外容器設置一個固定寬度是為數不多的地方，這只是為了讓桌面使用者用一個更好的體驗，我們需要設置一個固定的寬度。您還會注意到在我們的媒體查詢中添加了一個類tableContent，當媒體查詢生效時，將指定一個較小的螢幕。

<table cellspacing="0" cellpadding="0" border="0" align="center" width="700" class="tableContent">
     <tbody>
          <tr>
           <td bgcolor="#FFFFFF">
             <在这里插入一列或两列布局的代码>
           </td>
          </tr>
     </tbody>
</table>

上面的代碼片段中是我們電郵的基礎部分，你可以選擇將一列或兩列佈局的代碼嵌套到<td>中。

正如我們前面提到的，當我們編寫 HTML 電子郵件，最重要的是堅持我們多年來一直堅持的原則。通常在設計一個網站時，我們使用浮動來對齊內容，但我們應該放棄通常使用的<div align="left">來替代<div style="float:left;">，讓內容左對齊。我們這麼做是因為align="left"和cellpadding="10"比float:left和padding:10px;等同的效果更可靠。

單列佈局

<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td bgcolor="#FFFFFF">
                <内容放在这里>
            </td>
        </tr>
    </tbody>
</table>   

兩列佈局

<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td bgcolor="#FFFFFF">
 
                <table bgcolor="#FFFFFF" width="320" border="0" cellspacing="0" cellpadding="0" align="left">
                    <tbody>
                        <tr>
                            <td bgcolor="#FFFFFF" valign="top">
                                <左列内容放在这里>
                            </td>
                        </tr>
                    </tbody>
                </table>
 
                <table bgcolor="#FFFFFF" width="320" border="0" cellspacing="0" cellpadding="0" align="right">
                    <tbody>
                        <tr>
                            <td bgcolor="#FFFFFF" valign="top">
                                <右列的内容放在这>
                            </td>
                        </tr>
                    </tbody>
                </table>
 
            </td>
        </tr>
    </tbody>
</table>   

在上面的例子中我們顯式設置了三個寬度，在主要的容器上設置了一個 100% 寬度和裡面的左表格和右表格分別設置了一 個 320px 的寬度。選擇 320px 的原因是因為 iPhone 的視窗大小是 320px，這似乎已成為設計響應式網頁一個中斷點的行業標準。

當你在行動裝置上查看兩列佈局的時候，兩個表將會垂直排列，第二個表會顯示在第一個表的下面。這是由於媒體查詢，tableContent表格會從 700px 的寬度減少到 320px 寬度。只要表容器的寬度大於或等於兩列的寬度之和，佈局都將會顯示的很好。

如果兩列之前有一個表格單元你想隱藏，您可以使用display:none。

排版和動作觸發

蘋果設備文本渲染的最小尺寸是 13px，因此我們在創建電子郵件時，你需要將你的最小字體設置為 13px，這樣才符合這些準則。為此，我給我的電子郵件的body設置了一個 15px 的值和給清單專案設置文本大小為 13px。特別聲明，如果你將你的字體大小設置為一個小於 13px 的值，那麼在這些設備上運行時會增加風險，文本將會損壞你的佈局。如界你沒有使用text-size-adjust屬性，更不用說,你可能會導致各種易讀性問題。

測試我的電子郵件時，我注意到使用我的電子郵件的<p>標籤存在很多問題，所以決定不使用標籤或從瀏覽器或用戶端繼承過來的任何基本樣式。最後我決定使用<div>，因為當我使用一個<span>我會遇到一些間距的問題，即例我們設置他為一個塊元素。

我遇到了另一個問題，當我在同一個表格的行中使用兩個 div，而且他們設置不同樣式(如字體大小)，一些移動用戶端只會給一優先順序和取消另一個。如果你的設計，這兩個視覺上不同的文字效果在項目中都是至關重要的，那麼你將不得不把它們放在單獨的行中。

動作觸發

動作觸發(CTAs)，它往往被視為電子郵件中最重要的部分，同樣我們需要遵守蘋果的設計指南，使用這些按鈕的最佳尺寸為 44 x 44 像素。

有一件事我們需要注意，在電子郵件中<a href="">使用padding填充點擊區域，在一些用戶端上如你所料的，只有文本區域才有效。為了解決這個問題，我決定把背景顏色和內距設置在按鈕的父元素上。雖然這不能給足夠大的點擊面積，但可以給使用者一個錯覺。在電子郵件查看中，我注意到，大多數人試圖點擊按鈕的文本來解決這個問題。

<div style="background: #69BF13; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: inline-block; font-size: 15px; margin: 0 auto; padding: 20px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;">
       <a href="#" style="background: #69BF13; color: #FFFFFF; text-decoration: none;">Centered Button</a>
</div>

另外就是如果在移動頁面上，通過連結觸發動作，有一個很好的方式就是忽略他。在沒有一個成熟的標準之前，我們沒有必要為每個使用者去做這些事情。

圖像

你應該經常檢查你的電子郵件的圖片的開啟/關閉，因為圖片將會被所有使用者假設是關閉的。

回應圖片大小，電子郵件和Web頁面中實現的代碼是相同的。在下面的代碼中，我們告訴圖像包含在一個容器中，並且使用圖像的寬度一直是圖片容器寬度的100%。你可能還注意到圖像還設置了height:auto;，這主要是為了確保圖像保持長寬比例。

td[class=scaleImage] img {
    height:auto !important;
    width:100% !important;

Retina 圖像

 

如果我的電子郵件上想要顯示一個圖像，它的尺寸是 320 x 320，那麼對於我們的視網膜顯示屏，我就應該創建相同的圖像，只是尺寸為 640 x 640。我們創建更大尺寸圖的像，然後我們縮放到小尺寸，這樣我們大圖變小尺寸圖能給我們提供一個高品質的圖像。有兩種方法你可以叫視網膜圖像的電子郵件:

第一種

在這種方法中，我們在電子郵件中放置小圖像，然後通過媒體查詢執行的時候，在視網膜顯屏設備中換出視網膜圖像:

@media only screen and (max-device-width: 480px) {
    img[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
    }
}

第二種

在這種方法中，我們實際隱藏了實際的圖像，然後在圖像的容器中顯示視網膜圖像，當然這種方法也是使用媒體查詢來實現:

@media only screen and (max-device-width: 480px) {
    td[class="scaleImage"] {
        background-image: urlscaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
        }
    td[class="scaleImage"] img {
        display: none;
        }
}

僅僅是Retina

還有一種解決方案，但它需要第二個媒體查詢：

@media all and (min-device-pixel-ratio : 1.5) {
    img[class="scaleImage"] {
        background-image: url(scaleImage-640@2x.png) !important;
        background-size: 320px 320px;
        width: 320px !important;
        height: 320px !important;
    }
}

在這個媒體查詢中沒有設置規定的中斷點，只要設備具有視網膜功能。如果符合這個條件媒體查詢中的代碼將執行。這樣處理的好處是，你可以通過媒體查詢，適合的設備才載入所有的圖像。

總結

儘管每個人都很喜歡好看的圖像，但要記住優化是非常重要的。但在最近的一項調查中，3G 網路目前比桌面連接低於40%，4G 網路連接才 12%。所以不要讓使用者等待下載圖片太久，這樣做是沒必要的。

複製

在行動裝置上空間是有限的，所以你的工作需要確保你提供的資訊很清楚，簡明扼要。儘管在桌面上滾動螢幕並不是太大的問題，但在行動裝置上就讓人有點乏味，因為使用手指比使用滑鼠更費力。如果想給客戶一個更好的體驗，更好的消化你的資訊，你必須提供的資訊在行動裝置上無需滾動就能查閱。

如果你覺得在移動上的電子郵件有必要隱藏桌面上的一些內容，你可以在媒體查詢中使用display:none。但你需要問問自己，如果你願意隱藏的東西是否值得。


測試

如果構建和測試普通電子郵件時間不夠，會增加額外的複雜性，將會導致電子郵件有更多的問題。幸好有各種整套的測試設備和電子郵件用戶端服務。 當然，實際上沒有什麼比實際設備上測試更好，如果你足夠幸運有這麼一個測試套件，那麼你使用你自己的測試方式進行測試。


總結

在工作中，我一直鼓勵放棄支援舊版本的瀏覽器，雖然如此，它仍然是備受關注的，所以響應式電子郵件設計，你還是需要權衡輕重。

媒體查詢在一些設備和應用程式中得不到支援，尤其是 Blackberrys 和 Gmail 應用程式，以及一些用戶端會將頭部資訊全部刪除，這樣一來，媒體查詢就沒有任何意義了。但對於我來說很好，因為不支援媒體查詢查看電子郵件不多，大部分人認為媒體查詢的電子郵件就像是復活節中的一份意外的禮物。

值得慶倖的是行動裝置和應用不斷更新，這些都讓我們的生活變得無比的精彩。這也意味著我們需要不斷的提高我們的技術，不能一直停在原地不動。由我們設計人員和開發人員推動製造商向前發展，以確保它們不斷的向前反覆開發，確保我們正在使用的和五年前使用的不一樣。


案例

如果你有興趣看一個簡單的電郵範本的代碼，我這裡有一個演示頁面，你可以點擊這裡查看。但請注意，你只可以在支援媒體查詢的行動裝置上查看。

思齊為微軟合作夥伴，提供微軟白名單服務。
思齊Spread + 白名單服務提升27% 收件箱送達率= 提升27%的銷售。

免費試用