電子郵件營(yíng)銷的未來(lái)在于適應(yīng)周圍環(huán)境的能力。全球超過一半的電子郵件在移動(dòng)設(shè)備上被打開，中國(guó)地區(qū)電子郵件移動(dòng)設(shè)備打開率也增速迅猛，達(dá)到30%以上，而這一比例預(yù)計(jì)在未來(lái)幾年將繼續(xù)增長(zhǎng)。同時(shí)，不容忽視的是，至少50%的移動(dòng)用戶將關(guān)閉或者刪除沒有優(yōu)化閱讀的電子郵件。

對(duì)于郵件發(fā)送者來(lái)說(shuō)，解決移動(dòng)小屏幕的郵件用戶體驗(yàn)的一個(gè)最方便的解決方案就是響應(yīng)設(shè)計(jì)，通過包括媒體查詢、流體布局、圖片和定制化的文案一整套技術(shù)和原理，電子郵件可以在桌面和移動(dòng)設(shè)備得到最佳展示。響應(yīng)技術(shù)允許郵件設(shè)計(jì)師隱藏、堆疊、展開、折疊或修改內(nèi)容，以優(yōu)化電子郵件內(nèi)容在小屏幕上的顯示效果。

下面分享7個(gè)關(guān)鍵技巧和最佳實(shí)踐，幫助你通過響應(yīng)式設(shè)計(jì)以移動(dòng)客戶期望的方式提供給移動(dòng)客戶想要的信息。

1. 以移動(dòng)設(shè)計(jì)為中心創(chuàng)建桌面版郵件

把需要響應(yīng)的部分銘記在心，特別是在設(shè)計(jì)階段。首先你要先形成一個(gè)移動(dòng)設(shè)計(jì)的概念，并在此基礎(chǔ)上創(chuàng)建桌面版，這正與我們以往的做法恰恰相反。保持移動(dòng)版本盡可能整潔、簡(jiǎn)約，因?yàn)槭褂玫膱D片和特殊設(shè)計(jì)越多，郵件越難以達(dá)到所有移動(dòng)讀者。

2. 單列設(shè)計(jì)可以更好的同時(shí)滿足桌面和移動(dòng)顯示

要想使優(yōu)化電子郵件通訊的過程盡可能簡(jiǎn)單，那么應(yīng)該選擇一欄的設(shè)計(jì)。這樣實(shí)踐的原因在于，并不是因?yàn)槎嗔性O(shè)計(jì)在移動(dòng)設(shè)備上無(wú)法實(shí)現(xiàn)和展示，而是說(shuō)單列設(shè)計(jì)可以更好的滿足郵件在桌面和移動(dòng)上的最佳展示。

3. 學(xué)會(huì)玩捉迷藏：隱藏層級(jí)、精簡(jiǎn)內(nèi)容

設(shè)計(jì)一個(gè)手機(jī)版本郵件的主要目標(biāo)是為了確保郵件在手機(jī)上的易讀性。這通常意味著在你的移動(dòng)郵件中，需要隱藏一些次要的內(nèi)容，以保持用戶專注于最重要的信息。通過對(duì)任何不太重要的圖像、段落和表格等應(yīng)用一個(gè)簡(jiǎn)單的隱藏層級(jí)，以使這些內(nèi)容在移動(dòng)設(shè)備顯示時(shí)被自動(dòng)隱藏。

不是電子郵件中的每個(gè)信息都一樣重要。在創(chuàng)建響應(yīng)設(shè)計(jì)時(shí)，挑選出電子郵件中“最重要”的信息，以避免擁擠、臃腫的移動(dòng)信息，并保持內(nèi)容簡(jiǎn)潔。小屏幕意味著讓用戶盡可能有效地互動(dòng)比以往任何時(shí)候都更重要。

4. 郵件文本左對(duì)齊，聚焦用戶更多注意力

在互聯(lián)網(wǎng)的復(fù)雜環(huán)境中，用戶的注意力隨時(shí)都在變化，由上海交通大學(xué)認(rèn)知實(shí)驗(yàn)室與艾瑞咨詢聯(lián)合發(fā)布的《網(wǎng)絡(luò)視頻眼動(dòng)體驗(yàn)與廣告效果研究報(bào)告》表明，人們?cè)谟^看網(wǎng)絡(luò)視頻的眼動(dòng)行為影響著人們對(duì)視頻廣告的注意力和持續(xù)時(shí)間。此外，用戶對(duì)電子郵件的不同區(qū)域賦予不同的注意程度，用戶的大部分注意力集中在左邊的電子郵件內(nèi)容。某些操作系統(tǒng)，尤其是Android用戶，不太樂意伸縮郵件內(nèi)容，而電子郵件的左半部分也更容易被注意到。另外，從人體工程學(xué)的角度來(lái)看，在使用手?jǐn)y式屏幕設(shè)備時(shí)，大多數(shù)用戶也更容易與左部、中部和底部區(qū)域的元素互動(dòng)。

5. 響應(yīng)式圖像，可以讓用戶體驗(yàn)更好

相同尺寸的圖像，在移動(dòng)設(shè)備上下載的速度通常比在個(gè)人電腦上更慢，這將讓移動(dòng)用戶等待時(shí)間更長(zhǎng)。當(dāng)電子郵件在移動(dòng)設(shè)備上接收時(shí)，用一個(gè)較小版本的圖像替換，可以讓用戶體驗(yàn)更好。

6. 小屏幕改變了哪些郵件設(shè)計(jì)規(guī)則

小屏幕改變了以往的郵件設(shè)計(jì)規(guī)則，太小的按鈕和鏈接在觸摸屏設(shè)備上使用真的非常不方便。根據(jù)蘋果公司的指導(dǎo)，鏈接和按鈕應(yīng)該有一個(gè)最低顯示區(qū)域大小44x44像素。移動(dòng)郵件應(yīng)保持字體大小在17-21像素之間，最佳的字體大小通常是19像素;如果CTAs沒有被用戶立即看到，之后可能用戶再也不會(huì)去留意，所以重要的CTAs應(yīng)該盡可能靠近郵件頂部區(qū)域。

7. 分割思考與融合設(shè)計(jì)

當(dāng)你為移動(dòng)用戶瘦身設(shè)計(jì)時(shí)，停止從整個(gè)“頁(yè)面”角度去思考，而應(yīng)該分割來(lái)考慮。建議把電子郵件的每一部分作為一個(gè)單獨(dú)分割的包，這樣在設(shè)計(jì)電子郵件時(shí)會(huì)發(fā)現(xiàn)存在更大的自由。

創(chuàng)建一個(gè)響應(yīng)式的布局有很多種不同的方法，建議綜合融入各種設(shè)計(jì)想法。如創(chuàng)建響應(yīng)式布局最簡(jiǎn)單的方法是建一個(gè)流體設(shè)計(jì)，使郵件適應(yīng)設(shè)備顯示寬度，但作為一項(xiàng)最佳實(shí)踐，可以綜合使用一個(gè)可伸縮的響應(yīng)布局。

如媒體查詢也是響應(yīng)設(shè)計(jì)中最大的一部分，郵件設(shè)計(jì)師用它來(lái)把電子郵件轉(zhuǎn)變?yōu)橐粋€(gè)適應(yīng)移動(dòng)設(shè)備的更細(xì)長(zhǎng)的版本。但不同類型的移動(dòng)設(shè)備也可以有不同類型的媒體查詢，所以營(yíng)銷者還可以針對(duì)流行設(shè)備的屏幕分辨率進(jìn)行合理響應(yīng)郵件設(shè)計(jì)。