EDM 模板如何兼容移動端？

01-13

現在郵件用移動端打開的越來越多了如何確保郵件在移動端上的體驗手上有個響應式模板用的外鏈樣式目前只能支持一半的PC端郵箱
如有製作經驗歡迎討論分享

設計圖稿時，要考慮布局可以同時適應桌面端和移動端，最好可以設計時畫兩個稿圖；
懂點@media，顯示寬度取決於屏幕 Emailology: Screen Resolution and Responsive Design
編寫代碼時，考慮下布局的響應了，適應不同大小的屏幕；

而Html 編碼有三種常見技術：

使用@media 媒體查詢語句
基於百分比布局
設計元素，可以響應自然，在更小的移動設備上可以切換

國外有很多關於edm響應布局的編碼經驗分享，可以搜搜看：

Emailology: Free Responsive Email Template

可以下載下來研究下，還是不難的~~~~

總之，要想兼容所有客戶端一模一樣，代碼就越複雜，所以設計美觀同時也要充分考慮下實現~

所以，最好的建議，還是布局不要太複雜，建議1-2列式布局，易控制，易兼容，易閱讀~

近期開發EDM模板編輯器製作經驗總結，希望可以幫到您，
1、html採用表格布局，模板通常是1－3列式布局，推薦1-2列式；
2、響應式設計可使用@media 媒體查詢語句或百分比布局；
3、移動設備郵件模板寬度建議480px；
4、單張圖片尺寸不要超過1728px,否則outlook顯示不全；
5、郵件內容圖文比例4:6，否則容易進入垃圾箱;
6、文字行高line-height、元素間距要定義在塊狀元素上（p、td、h、li等）才能起作用
7、盡量寫行內樣式
8、不要使用背景圖片或gif動態圖
9、盡量不要用float、position來寫郵件效果，outlook下不支持
10、郵件中的按鈕盡量不要用圖片，可寫個一行一列的表格，裡面放個a標籤。因為按鈕在郵件中比較重要，用圖片的話，可能發到客戶郵箱未被允許載入圖片
11、在一些低版本客戶郵件端會遇到元素之間莫名其妙的幾像素間距，怎麼調都調不好，這時候可以試一下把html源碼壓縮一下
12、郵件中的按鈕盡量不要用圖片，可寫個一行一列的表格，裡面放個a標籤。因為按鈕在郵件中比較重要，用圖片的話，可能發到客戶郵箱未被允許載入圖片。
13、img標籤要給alt屬性，再圖片未載入的情況，這個提示的文字就會顯示比較重要。
14、一定要給p標籤和h系列標籤指定一個margin和padding（我一般默認全部設置margin:0;padding:0;），不然不同的郵箱收到的郵件，間距不一致。font-size、font-weight也要指定，不然顯示也不一致。
15、英文、數字不折行顯示的話，給包裹的td加上word-break:break-all。
16、Outlook會自動為table cell 添加1px border，請在郵件頂部的內聯樣式中加上 table td { border-collapse: collapse; }
17、table標籤上如果不需要邊框和間距請加上 border="0" cellpadding="0" cellspacing="0"

樓上講的已經夠多了，再補充一點吧，如果要做responsive，測試很關鍵。

不同客戶端，不同isp呈現的方式不一樣，騰訊有qq郵箱，騰訊企業郵箱，網易郵箱，sina，aliyun，還有gmail，hotmail，yahoo...

客戶端你還要兼容到IOS，安卓，原生郵件app，以及非原生郵件app，另外還有桌面版的outlook（版本多的你會想殺人，outlook是最難搞定的客戶端），foxmail...所以郵件做好後的測試十分重要，你總不可能所有郵箱所有客戶端都測一遍吧？

所幸，目前國外已經有提供類似的inbox預覽服務，目前用下來感覺還不錯，就是有點小貴。也十分期待國內會有類似的產品。

我曾試過單獨針對移動端設計郵件內容，採用方式是最簡單，最直接的。設置寬為400像素，內容顯示全是一行一個，圖片也是如何。樣式是直接寫參數，不使用CSS，測試發送效果顯示正常。

另外製作郵件內容的樣式必須寫在標籤裡面，使用外鏈你的郵件會變形、錯位。

可以直接使用： The Responsive Email Framework (mjml)工具

號稱：The only framework that makes responsive email easy.

或者使用基於mjml 的這個： nicejade/responsive-email-template 。

廢話不多說，mjml

應用響應式的技術，讓您的代碼可以識別用戶打開的客戶端，然後根據不同的客戶端來響應不同的代碼。

廣大郵件營銷用戶一直都在尋找高質量響應式電子郵件+操作簡捷的發送平台。U-MAIL郵件營銷平台新一代多功能可視化編輯器，傻瓜式操作，一鍵拖拽模板，龐大的專業模板素材庫，無需專業人員，五分鐘就能輕鬆搞定郵件模板的設計與發送。

有著強大的自適應模式，無論讀者在手機、PC、平板都可以完整的查看，讓你的郵件以最美的形式呈現！

下面詳細介紹一下U-Mail郵件營銷平台視化郵件模板編輯功能使用過程：

U-MAIL郵件模板管理 —— 可視化編輯（常見稱呼：拖拽式模板編輯），可按自己的需求來選擇版塊，上傳圖片、調整文字，背景顏色後會組合成一封完整的HTML頁面郵件。與源碼編輯同樣，一個模板支持添加多個主題後，在發送時主題可輪流發送。

1、郵件正文的組成版塊選擇：

左菜單欄中有圖片，圖片+文字，文字，標題，分割線等項目可供選擇，區塊也可自由修改排列的順序。

2、文字、按鈕的樣式修改：

文字大小，顏色，超鏈接，變數，按鈕顏色，邊框角度，均可自行設置調整。

3、全局樣式與定製區塊的設置

全局樣式：可設置整個內容的郵件背景色，頁面背景色定製區塊：可選擇某一個版塊後，修改此版塊的郵件背景色，頁面背景色

http://cd.webportal.cc/v/285inZ3o/?chl=3e (二維碼自動識別)

4、表格的插入與屬性修改

支持和word同類操作的快捷方式插入表格；表格（單元格）的高寬度，表格行列的刪除，增加，修改；

5、圖片上傳及圖片庫的管理：

圖片上傳及替換：點擊圖片按鈕，選擇本機上的圖片直接上傳，或直接進入圖片庫中選擇之前已上傳發送過的圖片進行插入替換。

圖片庫管理：平台會自動把圖片存入圖片庫中，一頁顯示16張，超過16張則翻頁查詢，目前保存時間為永久保存。

**註：可視化編輯時，暫時不支持上傳附件！**

http://cd.webportal.cc/v/285inZ3o/?chl=3e (二維碼自動識別)

6、指定區塊設置

並列圖文：主題，按鈕，圖片可設置不顯示；圖片高度也支持自行調整。左右圖片：圖片的鏈接，超鏈接，備用文字可均為可視化編輯。

先佔坑，後續補上。

EDM 一般都是將製作好的頁面通過郵件發送用戶，發送的不是外鏈，二是源碼，第三方郵箱客戶端會解析源碼為頁面。

然而郵箱客戶端為了防止攻擊及複雜的布局效果，屏蔽了很多高級 HTML 標籤及 CSS 效果；曾經做過多個移動端郵箱客戶端的自適應測試，並不理想。

如果需要做到適配，可以在 EDM 頂部添加一個外鏈說明，方便用戶點擊跳轉，此時打開的是一個純粹的 H5 頁面（沒錯，就是要做兩份）。

吳娜娜說得蠻靠譜的，不過我覺得不單單是郵件要適應手機顯示，對應的網頁，也要考慮對應顯示。

別不使用CSS，其他的不太懂

目前手機端郵件提醒很多，如：手機qq、微信、易信（網易郵箱）各個ISP郵件客戶端，第三方郵件客戶端、自帶郵件客戶端、網頁版等，這些很難採用同一種代碼就完全適配。我做了自適應代碼，但測試大部分不能自適應。我增加了一個提醒，大家可以試試

之前看過一篇博客是關於移動端EDM設計的~主要就是下面幾點：

1、醒目的標題、字體和留白空間，總之不要堆太多的文字；

2、布局簡單、內容清晰瞭然；

3、使用大的call to action。這一點主要是受手機屏幕的約束；

4、去掉不必要的裝飾，跟第二點有些雷同，主要還是得突出重點，簡潔為主；

5、注意字體粗細和色塊的運用，使用一些大膽的顏色無論是美觀還是吸引力上都會大加分。

簡而言之還是注意內容顯示和內容精鍊上的問題~