移動互聯網的崛起，催生(shēng)了響應式設計(jì)的誕生(shēng)與興起。幾乎所有(yǒu)的營銷渠道(dào)都與”移動化”這一詞彙捆綁，電(diàn)子郵件營銷也不例外。大(dà)部分電(diàn)子郵件通(tōng)過移動設備打開(kāi)閱讀，這一比例将在後續幾年內(nèi)繼續增長。同時(shí),至少(shǎo)50%的移動用戶會(huì)選擇關閉或删除并非個(gè)性化的電(diàn)子郵件。未來(lái)電(diàn)子郵件營銷的進化深度反映着其是否具備适應互聯網時(shí)代瞬息萬變的能力。

響應式設計(jì)指集中創建頁面的圖片排版大(dà)小(xiǎo)，智能地根據用戶行(xíng)為(wèi)以及使用的設備環境(系統平台、屏幕尺寸、屏幕定向等)進行(xíng)相對應的布局，在郵件呈現上(shàng)，通(tōng)過頁面隐藏、折疊、擴展，為(wèi)用戶帶來(lái)舒适的移動閱讀體(tǐ)驗。Webpower将為(wèi)大(dà)家(jiā)推薦制(zhì)作(zuò)響應式郵件過程中的十個(gè)關鍵要點。

1.郵件布局

始終都要牢記“響應式”這一詞彙，特别是在設計(jì)階段。從移動設計(jì)的理(lǐ)念着手，創建移動化的視(shì)覺版本，盡量使其保持簡潔有(yǒu)序。越是繁多(duō)的圖像或複雜的設計(jì)，往往越難送達，移動用戶可(kě)能無法收到此類郵件。

2.堅持單行(xíng)索引

建議選擇單行(xíng)索引的設計(jì)版式，以促使郵件優化過程盡量簡單化。這并不是說多(duō)行(xíng)索引設計(jì)無法在移動設備上(shàng)正常顯示或運行(xíng)，隻是如果需要同時(shí)滿足PC端和(hé)移動自适應，相關技(jì)術(shù)難度可(kě)能會(huì)提升不少(shǎo)。

3.文本左對齊

有(yǒu)相關視(shì)覺跟蹤研究表明(míng)，西方用戶的大(dà)部分注意力集中在電(diàn)子郵件內(nèi)容的左邊部分。當然有(yǒu)些(xiē)操作(zuò)系統，尤其是安卓系統，無法衡量內(nèi)容實際寬度以适應屏幕，因此隻能顯示郵件的左半部分。從人(rén)體(tǐ)工程學的角度，大(dà)多(duō)數(shù)用戶更容易浏覽到屏幕左下角及中間(jiān)位置的郵件內(nèi)容。

4.頂層內(nèi)容

簡化屏幕在一定程度上(shàng)确實改變了郵件設計(jì)規則。在制(zhì)作(zuò)郵件時(shí)，具有(yǒu)象征性的CTA購買按鍵應盡可(kě)能靠近頂部位置，如果無法被用戶立即看到，它們有(yǒu)可(kě)能永遠不會(huì)被看到。

5.Media Queries特性

Media Queries是響應式設計(jì)中最重的一部分，它不僅被運用于網站(zhàn)響應，而且還(hái)能用于電(diàn)子郵件的布局，使郵件改變成适應移動設備顯示的版本。不同類型的移動設備具有(yǒu)不同的Media Queries特性，這意味着将根據屏幕分辨率鎖定熱門(mén)設備進行(xíng)個(gè)性化投遞。

6.尺寸大(dà)小(xiǎo)

根據蘋果公司的指導建議，鏈接和(hé)按鈕的尺寸應當控制(zhì)在44*44像素以上(shàng)。在移動設備顯示上(shàng)，不起眼的鏈接和(hé)按鈕是最無用的設計(jì)。另外，字體(tǐ)大(dà)小(xiǎo)可(kě)保持在17-21像素範圍內(nèi)，最佳字體(tǐ)大(dà)小(xiǎo)則為(wèi)19像素。

7.精簡內(nèi)容

并不是所有(yǒu)的郵件內(nèi)容都是重要的。不妨在創建響應式設計(jì)時(shí)，選擇郵件中最重要的信息點顯示，避免過分擁擠的移動信息。營銷人(rén)員需要注意保持郵件內(nèi)容簡潔明(míng)了，小(xiǎo)屏幕意味着營銷人(rén)員将比以往任何時(shí)候都重視(shì)與用戶的有(yǒu)效互動。而屏幕的運用變得(de)尤為(wèi)珍貴，設計(jì)人(rén)員應在郵件中隐藏次要內(nèi)容，保證重要信息能夠被用戶關注，突出顯示優先級的內(nèi)容。

8.考慮完整性

當你(nǐ)在為(wèi)移動用戶縮減設計(jì)時(shí)，不要僅僅隻關注頁面布局還(hái)需要考慮郵件完整性。營銷人(rén)員應考慮郵件中的每一個(gè)部分是否适合在移動端顯露，這将給予設計(jì)人(rén)員更大(dà)的空(kōng)間(jiān)進行(xíng)郵件設計(jì)。

9.響應式圖片

移動設備在加載項目時(shí)通(tōng)常比PC設備慢，郵件中各類元素需要同時(shí)升級移動閱讀體(tǐ)驗，除了文字、版式設計(jì)等，圖像也是不容忽視(shì)的一環，所有(yǒu)在移動端顯示的內(nèi)容都應具備響應式的設計(jì)前提。

10.測試

市面上(shàng)現在有(yǒu)許多(duō)免費的在線工具以測試移動設計(jì)，提供在不同尺寸大(dà)小(xiǎo)的移動設備上(shàng)的設計(jì)預覽。不妨利用這些(xiē)在線工具在正式發送郵件前細心調整，避免錯誤，提升移動用戶的閱讀體(tǐ)驗。