響應式郵件設計

時間 2019-11-17

標籤響應郵件設計简体版

原文原文鏈接

自從Ethan Marcotte在2010年5月25日發佈的《A List Apart》文章開始，響應式網頁設計(RWD)討論的熱度並無減小，但在相同的時間內咱們構建電子郵件的方式並無太多的改變。值得慶幸的是，在過去的一年，人們開始使用RWD和運用相似的方法來設計電子郵件。 css

在咱們開始以前，我想向你們介紹Anna Yeaman在最近一次演講中介紹的一些數據，咱們知道咱們正在處理： html

2012年上半年，近41%的電子郵件在手機上閱讀
僅有2%的人會在另外一個設備上打開電子郵件
電子郵件不能在小屏幕上優化，其轉化率要低28%
若是不能在小屏幕上閱讀您的電子郵件，將近有三分之一的用戶會退訂您的信息

既然您已經看到電子郵件是多麼的重要，那麼多如今開始，讓咱們把他們作到最好。 css3

最基本的

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

在開始以前，我決定找一些能夠幫助咱們建立第一個響應式電子郵件的幫助文檔。在Campaign Monitor文檔中列出了咱們構建電子郵件所須要的一些幫助文檔。瀏覽器

然而隨着Campaign Monitor在網站指出的的內容，以及我列出的技術並不廣泛支持全部移動端上的電子郵件客戶端。網絡

電子郵件顯示如何從根本上改變了收件箱收郵件，但值得慶幸的是，Campaign Monitor給咱們提供了電子郵件客戶端對CSS的不一樣支持的列表和媒體查詢如何支持當前的狀態。 ide

開始

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

文檔類型

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

<!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的值重置爲０。而後在一些移動電子郵件客戶端使用-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圖像

另外一塊就是蘋果設備上的視網膜顯示屏，iPad3+、iPhone4+和視網膜筆記本。視網膜圖像的關鍵是建立兩倍大小的相同圖像，小尺寸的圖像和視網膜的圖像。

若是個人電子郵件上想要顯示一個圖像，它的尺寸是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: url(scaleImage-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%，４G網絡鏈接才12%。因此不要讓用戶等待下載圖片過久，這樣作是不必的。

若是你從未接觸過視網膜相關的知識，建議您點擊這裏，花點時間瞭解一下視網膜相的應用。——大漠

複製

在移動設備上空間是有限的，因此你的工做須要確保你提供的信息很清楚，簡明扼要。儘管在桌面上滾動屏幕並非太大的問題，但在移動設備上就讓人有點乏味，由於使用手指比使用鼠標更費力。若是想給客戶一個更好的體驗，更好的消化你的信息，你必須提供的信息在移動設備上無需滾動就能查閱。

若是你以爲在移動上的電子郵件有必要隱藏桌面上的一些內容，你能夠在媒體查詢中使用display:none。但你須要問問本身，若是你願意隱藏的東西是否值得。

測試

若是構建和測試普通電子郵件時間不夠，會增長額外的複雜性，將會致使電子郵件有更多的問題。幸虧有各類整套的測試設備和電子郵件客戶端服務。Litmus和Email On Acid是數一數二的，當你想預瀏你的代碼和相似的功能，你還能夠經過Campaign Monitor和MailChimp實現。

固然，實際上沒有什麼比實際設備上測試更好，哪果你足夠幸運有這麼一個測試套件，那麼你使用你本身的測試方式進行測試。

總結

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

媒體查詢在一些些設備和應用程序中得不到支持，尤爲是Blackberrys和Gmail應用程序，以及一些客戶端會將頭部信息所有刪除，這樣一來，媒體查詢就沒有任何意義了。但對於我來講很好，由於不支持媒體查詢查看電子郵件很少，大部分人認爲媒體查詢的電子郵件就像是復活節中的一份意外的禮物。

值得慶幸的是移動設備和應用不斷更新，這些都讓咱們的生活變得無比的精彩。這也意味着咱們須要不斷的提升咱們的技術，不能一直停在原地不動。由咱們設計人員和開發人員推進製造商向前發展，以確保它們不斷的向前迭代開發，確保咱們正在使用的和五年前使用的不同。

案例

若是你有興趣看一個簡單的郵件模板的代碼，我這裏有一個演示頁面，你能夠點擊這裏查看。但請注意，你只能夠在支持媒體查詢的移動設備上查看。

擴展閱讀

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載，煩請註明出處：

英文原文：http://jackosborne.com/articles/responsive-email-design/

中文譯文：http://www.w3cplus.com/css/responsive-email-design-2.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。