標籤：des android style blog http color io os ar
在過去的幾年中，移動端使用的飆升，使我們向網路使用者提供內容的方法引起了一場進化或者革命。最終目標是流體的，適應移動端和device-agnostic Web以及一個已成為受人青睞的學派：響應式設計。然而，雖然響應式設計思想高漲，而電子郵件設計和開發一直在努力跟上。
在某種程度上，HTML電子郵件對開發人員而言是一個異常複雜的介質，這是一個鐵的事實。古老的電子郵件客戶技術無法呈現現多的許多的規則，致使一些代碼無效。但電子郵件仍然是一個關鍵的營銷渠道，這非常的重要，不能讓人忽視的是2012年上半年Litmus公布了一個在行動裝置上開啟電子郵件的報告，報告顯示使用行動裝置查閱電子郵件增加了80%。同年Campaign Monitor顯示，第一次他們的移動電子郵件開啟率實際上已經超過了案頭和Web郵箱。
顯然在移動端開發之前進行適當的分析是重要的。但製作一個響應式電子郵件可以確保使用案頭和行動裝置的使用者能得到一個優秀的使用者體驗，以及４G網路的到來，移動端的趨勢更是勢不可擋，所以說為什麼響應式設計不會過時。
格格不入如果你曾經不幸的在行動裝置上開啟過一個固定寬度的電子郵件，你就會明白需要響應式電子郵件設計。突然開啟螢幕，多欄布局可以放大，以便縮小字型大小而變得不清不楚。使用者可能放大，但令人氣憤的是，使用者要不斷的從左至右，水平滾動，以便閱讀內容。連結小，而且擠在一起，完全沒有考慮手指觸屏。在小視窗上對比，往往讓人難已閱讀。顯然，移動端的最佳化很重要，但最好的方法是什麼呢？
移動端的最佳實務
在編寫代碼之前，考慮設計特性可以大大改善移動端使用者的體驗。無論螢幕大小，可以說這都是明智的。
這些技巧可以提高移動端使用者體驗，但是你可以，而且應該進一步最佳化。由於移動電子郵件用戶端不斷增長對CSS3的支援，響應式電子郵件設計現在是可能的。
開始如前所述，HTML電子郵件製作嚴重缺乏一個標準，對於外行來說，接下來將帶你回到一個早期的Web開發時代。由於HTML電子郵件用戶端渲染引擎所制，布局必須使用表格和CSS樣式必須使用行內樣式。幾個電子郵件客戶將完全無視<head>內的<style>樣式。
有一些電子郵件模板可以使用，我建議使用Sean Powell的HTML Email Boilerplate作為起點，但為了示範，我們從頭開始。
有關於HTML Email Boilerplate的中文介紹，可以點擊HTML Email Boilerplate源碼閱讀和HTML Email Boilerplate——大漠
如果你喜歡跟隨著代碼學習，你可以多這裡下載本文的模板。
demodownload
文件類型(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
如何設計響應式郵件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
