如何設計響應式郵件

時間 2019-11-17

標籤如何設計響應郵件简体版

原文原文鏈接

在過去的幾年中，移動端使用的飆升，使咱們向網絡用戶提供內容的方法引發了一場進化或者革命。最終目標是流體的，適應移動端和device-agnostic　Web以及一個已成爲受人青睞的學派：響應式設計。然而，雖然響應式設計思想高漲，而電子郵件設計和開發一直在努力跟上。 css

在某種程度上，HTML電子郵件對開發者而言是一個異常複雜的介質，這是一個鐵的事實。古老的電子郵件客戶技術沒法呈現現多的許多的規則，導致一些代碼無效。但電子郵件仍然是一個關鍵的營銷渠道，這很是的重要，不能讓人忽視的是2012年上半年Litmus公佈了一個在移動設備上打開電子郵件的報告，報告顯示使用移動設備查閱電子郵件增長了80%。同年Campaign Monitor顯示，第一次他們的移動電子郵件打開率實際上已經超過了桌面和Web郵箱。 html

顯然在移動端開發以前進行適當的分析是重要的。但製做一個響應式電子郵件能夠確保使用桌面和移動設備的用戶能獲得一個優秀的用戶體驗，以及４G網絡的到來，移動端的趨勢更是勢不可擋，因此說爲何響應式設計不會過期。 web

格格不入

若是你曾經不幸的在移動設備上打開過一個固定寬度的電子郵件，你就會明白鬚要響應式電子郵件設計。忽然打開屏幕，多欄佈局能夠放大，以便縮小字體大小而變得不清不楚。用戶可能放大，但使人氣憤的是，用戶要不斷的從左到右，水平滾動，以便閱讀內容。連接小，並且擠在一塊兒，徹底沒有考慮手指觸屏。在小視窗上對比，每每讓人難已閱讀。顯然，移動端的優化很重要，但最好的方法是什麼呢？瀏覽器

移動端的最佳實踐

在編寫代碼以前，考慮設計特性能夠大大改善移動端用戶的體驗。不管屏幕大小，能夠說這都是明智的。網絡

清晰、簡潔的內容：小屏幕意味着它如今比以往任什麼時候候更重要的是讓用戶更有效的獲取重要信息。
單列布局：簡單是關鍵，佈局沒有比640px寬度更好用。單列布局能夠確保你視窗放大時沒有內容丟失。
一個吸引人的標題：這是一個電子郵件營銷在一個擁擠的收件箱中最有效的武器。保持標題簡短精悍。
大的動做觸發面積(CTA)：不要懲罰胖手指！蘋果的iOS人機交互界面設計指南建議點擊目標區域的面積爲44 x 44。
慷慨的字體大小：確保你的信息能夠很容易地閱讀。
Pre-header：另外一個關鍵領域就是在收件箱中的能見度。儘可能避免「瀏覽器顯示」這樣的文本字樣。
左對齊文本：有許多緣由調整重要元素在左邊內容區。（根眼動跟蹤研究代表，西方用戶大部分注意力集中在左邊的電子郵件內容。這並不足覺得奇，由於咱們從左到右讀取文本。某些操做系統，尤爲是Android，內容沒法縮放適應屏幕，所以只顯示電子郵件的左半部分。從人體工程學的角度來看，大多數用戶會發現它容易與屏幕左下角/手持中間元素操做。）
結構垂直排列：減小屏幕的地方每每任什麼時候候採用的是摺疊的想法。重要的商品交易的可點擊區域應該儘量的靠近頂部；若是不能當即看到，也許他們將失去使用的功能。
謹慎使用圖像：不要覺得會看到圖片。iPhone的本地電子郵件應用程序將顯示默認圖片，但不少客戶端不會顯示圖像。

這些技巧能夠提升移動端用戶體驗，可是你能夠，並且應該進一步優化。因爲移動電子郵件客戶端不斷增加對CSS3的支持，響應式電子郵件設計如今是可能的。 ide

開始

如前所述，HTML電子郵件製做嚴重缺少一個標準，對於外行來講，接下來將帶你回到一個早期的Web開發時代。因爲HTML電子郵件客戶端渲染引擎所制，佈局必須使用表格和CSS樣式必須使用行內樣式。幾個電子郵件客戶將徹底無視<head>內的<style>樣式。工具

有一些電子郵件模板可使用，我建議使用Sean Powell的HTML Email Boilerplate做爲起點，但爲了演示，咱們從頭開始。佈局

有關於HTML Email Boilerplate的中文介紹，能夠點擊HTML Email Boilerplate源碼閱讀和HTML Email Boilerplate——大漠 post

若是你喜歡跟隨着代碼學習，你能夠多這裏下載本文的模板。學習

demo download

文檔類型(Doctype)

Hotmail和Gmail會自動插入XHTML 1.0 Strict 文檔類型。雖然不是一個壞主意，但重要的是用它能夠完全地測試您的電子郵件和沒有文檔類型的電子郵件客戶端能夠自動生成。

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

Email Acid對電子郵件的文檔類型進行了普遍的研究，感興趣能夠點擊這裏。

媒體查詢(Media queries)

咱們如今能夠插入一個視窗的meta標籤，以確保咱們的電子郵件在移動設備上能夠正確的顯示。指定內容類型和一個標題標籤也是一個好主意。若是你打算在電子郵件中提供一個「瀏覽器查看」的一個連接，這是一個好主意，但忽略了一點，在不少電子郵件客戶端會忽略這一點。

由於在電子郵件中有可能會忽略「content-type」，明智的作法是在你的電子郵件中全部特殊字符都最好使用HTML實體符進行編碼。

還有幾個確保咱們電子郵件能跨平臺，咱們還需設置幾個他管理費樣式。

<head> <meta name="viewport" content="width=device-width, initial scale=1.0"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Email subject or title</title> <style type="text/css"> .ExternalClass {width:100%;} img {display: block;} </style> </head>

注意：視窗meta標記對黑莓有負面影響。

如今，咱們能夠插入媒體查詢，有多少取決於你但願每一個設備特性所須要。在這個示例中，咱們將使用的媒體查詢只有一個——大多數設備屏幕大小不大於600px是現代手機和觸摸屏作出有利於移動設備優化樣式。此外，咱們我假設遵循通用移動最佳實踐技術，早前也說過，手機用戶瀏覽更大的佈局會運到重大的可用性問題。

咱們以機樣的方式使用媒體查詢構建一個網站時，若是視窗大小符合媒體查詢條件時，將應用媒體查詢裏的樣式。

@media only screen and (max-width: 600px) { table[class="hide"], img[class="hide"], td[class="hide"] { display:none!important; } }

在上面的例子中，屏幕小於600px時，經過給帶有類名hidden的元素設置display:none來隱藏元素。!important能夠確保覆蓋任何內聯樣式。這是響應式電子郵件設計的基本原理：在<head>頭部樣式中經過!important來覆蓋HTML文檔中的內聯樣式，而且根據媒體查詢特定的屏幕尺寸來覆蓋這些樣式。有一個明顯的例個是Gmail應用程序將會忽略<head>內部的任何樣式。然而，內容的居左會確保Gmail用戶有一個更好的用戶體驗。顯然這並非一個理想的解決文案，目前，響應式電子郵件設計儘量多的想法是對前沿技術的妥協。

值得注意的是，咱們針對HTML元素的CSS屬性選擇器來克服Yahoo郵件的渲染問題。

因此咱們能夠看到，媒體查詢選擇性的顯示內容是一個有用的工具，但咱們也可使用它們來讓我空調其餘功能的佈局。或許最重要的是，咱們能夠約束咱們電子郵件的列寬——移動體驗最大的關鍵。

@media only screen and (max-width: 600px) { table[class="content_block"] { width: 92%!important; } }

咱們已經在咱們的媒體查詢中設置了，當屏幕寬度小於600px，全部類名content_block元素寬度調整爲92%。如今咱們要作的就是把內聯屬性指定寬度(600px)和定義類content_block任何表格，咱們有一個固定寬度的容器，而後在移動設備下指定一寬度的比例。

給這個容器的子元素的寬度屬性都指定爲百分比，這是一個基本響應式電子郵件模板。

做爲一個經驗法則，爲了照顧Webkit自動調整<body>標籤文本大小，儘可能保持字體大小最低在12px以上。

按鈕

調用操做(CAT)一般是營銷郵件最重要的部分。他們應該是引人注目的，良好的，最重要的是使用。一個強大的CAT標準是根據不一樣的動做有不一樣的光標或手指。響應式電子郵件強大功能是在小觸屏設備上提供一個手指可操做的按鈕，讓手指操做不受圖像阻礙。

不幸的是，這種按鈕不能廣泛顯示，由於他們依賴於padding屬性，但在一些桌面電子郵件客戶端並不支持。

@media only screen and (max-width:600) { a[class="button"]{ display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important; background: #f46f62; text-align: center; text-decoration: none!important; } }

上面的樣式聲明將改變帶有類名button的標籤，只要屏幕寬度不大於600px，按鈕變大，好看，彩色的，並且跨越內容區域的寬度。CSS3支持不該該是一個問題，咱們能夠撰寫咱們的目標是合理的現代的移動技術。

<a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

內聯樣式知足鼠標的用戶能夠點擊和更大精度但覆蓋這些樣式連接，可讓觸屏用戶減小交互的錯誤。重要的是，這種方法不依賴於圖像，所以避免了圖像加載阻滯存在的可用性問題。

結論

響應電子郵件設計仍然是一個妥協方案。使人困惑的是一系列不一樣的設備，電子郵件客戶端的渲染引擎給設計人員和開發人員帶來一個艱鉅的任務。但隨着科技的進步變得更容易爲用戶提供適當的佈局，他們能夠絕不費力提供有效的交互。越來載多的電子郵件客戶端支持媒體查詢改變了移動電子郵件的外觀和優化，而且爲咱們提供了一個平臺，大大提升更多的用戶體驗。如今對咱們來講，設計人員和開發人員，嘗試有創意的方法來讓更多的移動用戶有更好的體驗。

你設計過電子郵件嗎？你使用響應式方法嗎？請在評論中讓咱們知道。

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

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

英文原文：http://www.webdesignerdepot.com/2013/06/responsive-html-email-design/

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