最近幾年中，手機等移動端用戶不斷增長，這給人們獲取信息的方式帶來了變革，甚至可以說是一場革命。響應式設計這種思維方式就是在這樣的大環(huán)境中興起的，越來越多的人們開始討論怎樣做好響應式網站。然而，盡管響應式設計已經形成風潮，卻很少有人提起響應式郵件的設計。
對設計師或開發(fā)者來說，html郵件可能是一個相對比較麻煩的媒介。它的客戶端技術已經落后陳舊，內容、格式等又沒有一定的標準規(guī)范，這使得現(xiàn)代的編碼規(guī)則毫無用武之地，一些代碼根本就無法顯示出來。但郵件仍是關鍵的營銷渠道之一，它的作用不容忽視。研究表明在手機等移動端上使用電子郵件的用戶已經大大超過電腦或網頁上的用戶，與此同時，50%以上的移動用戶會選擇關閉或刪除非個性化的郵件。怎樣才能讓郵件也跟上互聯(lián)網時代發(fā)展的潮流呢?響應式的郵件是一個很好的選擇， 在郵件呈現(xiàn)上，通過頁面隱藏、折疊、擴展等，它可以給PC端用戶和移動端提供舒適的體驗。那么響應式的html郵件應該是什么樣的呢?今天小飛就帶大家一起看看為什么我們應該選擇響應式郵件以及響應式郵件應該具備哪些特點。
如果您曾經使用手機打開一個固定寬度的郵箱，您可能更能體會響應式的郵箱設計的必要性。因為一個固定寬度的郵件在移動設備的小屏幕上顯示時，整體布局通常會被縮小，這時它通常會出現(xiàn)以下缺點：
閱讀感受不佳
郵件布局整體縮小，這意味著如果用戶想要閱讀完整的內容就必須放大郵件內容，一旦郵件內容放大了他們就需要不停的橫向移動，從左至右瀏覽信息，但研究表明用戶在瀏覽郵件時習慣由上至下。這破壞了用戶的瀏覽習慣，而且來來*滾動多次才能看完文章，無形之間帶來了不少的麻煩。不少用戶認為這種麻煩會消磨他們的耐心，讓他們無法完成閱讀。
鏈接和按鈕不可見
在移動端上，人們通常習慣使用手勢操作，郵箱的整體布局縮小，這也意味著郵件中的鏈接和"行為引導"按鈕會變小，這樣一來用戶就無法有效的進行點擊，相關信息就得不到用戶的關注。特別是"行為引導"按鈕，如果我們的按鈕不夠明顯，用戶一般不會給予特別關注，這直接的影響了郵件的轉化率，以及它在增加網站流量、銷售額等方面的效用。
圖片顯示不全等問題
郵件中的圖片顯示是一個大問題。在PC端進行瀏覽時，多樣的圖片可能最能體現(xiàn)網站的活潑、豐富，拉近與用戶的距離。但是在移動端使用數(shù)據流量時，用戶很可能不想進行大量圖片的加載。其次，多張圖片在移動端展示時可能因為尺寸等問題顯示不全，難以呈現(xiàn)PC端的那種效果。另外還有一些時候，某些用戶無法看見郵件中的圖片，雖然iphone的本地郵箱默認顯示圖片，但是有很多移動客戶端都限制圖片的載入。
響應式郵件應具備的特點：
就像響應式網站能夠同時適用于電腦、手機等多種設備，響應式郵箱能夠同時適用多種終端，一封郵件能夠根據不同的設備以相應的格式來呈現(xiàn)。那么做好一個響應式郵箱有哪幾個關鍵點要把握呢?
1. 內容清晰簡練
內容是網站永恒的主題，郵箱更是如此。因為移動設備的屏幕相比PC端要小，能夠利用的空間比較少，這時怎樣通過小屏幕完成與用戶的互動顯得尤為重要。盡量保持郵件的內容清晰簡練，不是所有的信息都同樣重要，篩選出比較重要的信息，不要什么信息都放上去讓郵件顯得很擁擠。另外，按信息的重要程度垂直排列，最重要的、最希望用戶看見的內容放在最上方，突出顯示優(yōu)先級的信息。
2. 單列的設計布局
簡潔是郵箱設計的核心。在手機等移動端上瀏覽郵件，我們需要著重考慮用戶使用時的流暢性。雖然多列的設計布局在郵件中也可以顯示出來，但是單列的是最理想的選擇，寬度不超過640px的布局比較適合手機閱覽。這樣就算有些設備只能縮小郵箱的整體布局，我們也不用擔心是否會有內容顯示不出來。
3. 明顯的行為引導按鈕
就像我們在上面提過的，如果行為引導按鈕不夠明顯，用戶可能根本就不會注意到，那我們的郵件究竟還有何意義?因此這些行為引導按鈕應該足夠大，以方便用戶進行點擊，不過按鈕和其他的鏈接也要盡量分散開來，防止用戶不小心點錯了，做到用戶友好再友好。蘋果ios的人機界面推薦最小的按鈕區(qū)域應該是44*44px，因此行為引導按鈕的區(qū)域面積最好大于這個數(shù)值。
4. 文本左對齊
郵件的文本最好左對齊，同時我們可以將重要的元素放到內容區(qū)域的左邊，這可不是小飛隨便說說的，它的背后有很多理論支撐。首先，有相關視覺追蹤的研究表明用戶會將大部分的注意力集中在郵箱內容的左邊，這點可能沒什么好驚訝的，因為我們的閱讀習慣是從左向右的。而且，一些操作系統(tǒng)，特別是安卓的，在無法縮放郵件完美適應小屏幕時，通常只展示郵件的左側內容(也許有些用戶使用安卓手機會出現(xiàn)這種情況呢)。另外，從人體工程學的角度來說，大部分用戶覺得手持屏幕時與左下角或中間位置的內容交互最容易。
5. 響應式圖片
圖片是響應式郵件設計中不可忽視的一環(huán)。就像我們前面提到的一樣，不要使用固定寬度的圖片，將圖片設置成響應式的。這一點可以通過給圖片設置相關單位，或者使用支持響應式的框架(比如Bootstrap)， 用響應式圖片class名控制(例如class="img-responsive")來解決。另外，移動設備在加載圖片時通常會比PC端要慢，所以不要放一些與郵件不相關的圖片，做到簡潔明了。
6. 大號的字體
考慮到很多郵件客戶端不直接顯示圖片，文字往往是用戶看見的第一要素。為了便于用戶閱讀，在設計響應式郵件時，使用的字體盡量大一點。因為如果字體比較小，再加上相近的背景色，用戶在閱讀時可能會有困難。建議至少使用13px以上的字體(13px是iPhone手機上的最小字體)。
除了以上這些要點，在做響應式郵箱時，我們還應該注意以下幾點：郵件主題欄應該簡短有力，引人入勝;減少或隱藏導航菜單;使用多種測試工具等?？傊紤]的越周全，做出的響應式郵箱越會合用戶的口味。
小飛相信以上這些建議應該能給您很多啟發(fā)，讓您對響應式郵件有新的看法和認識。在 起飛頁自助建站平臺（）做網站，您可以免費獲得一個響應式的郵箱?，F(xiàn)在使用移動端郵箱的人這么多，如果您是做網上商城的，那就更加不能錯過了。響應式郵箱可以給您的用戶提供舒暢的瀏覽體驗，能夠幫助樹立公司高大上的品牌形象。
起飛頁上的響應式郵箱在哪?在做好一個網站之后，您只需點擊"后臺"，就會看見如下頁面，再點擊"設置"中的"郵件模板設置"。起飛頁已經為您設計了多種風格不同的郵箱模板，您找到自己滿意的，點擊即可使用。除此以外，您還可以通過修改整體設定、logo、頁眉和標題欄等自定義自己郵箱的風格?？靵砥痫w頁自助平臺做一個屬于自己的網站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
