最近工作上第一次製作eDM，沒想到這看似簡單的東西其實有很多需要注意的細節，否則錯誤瑕疵連連真的會修到令人抓狂。eDM電子報的設計算是結合平面設計與網頁設計，許多eDM的製作過程還是會先在PS設計好全部畫面之後再切版，但必須注意的是接受訊息的對象是來自四面八方、各式各樣的mail client，包括Mac OS X、Outlook、Hotmail、Gmail...等，不同瀏覽器甚至也會有不同效果，為了確保大部分的收件者都可以瀏覽正確顯示的內容，繁瑣的注意事項看起來很保守甚至很瘋狂，但的確是不得不遵守的解決之道。網路上關於eDM電子報製作教學的相關文章很多，以下是個人經驗相關筆記：
1. 使用table排版，不要使用div。除了<table>一定要cellpadding、cellspacing、border=0之外，所有的<td>都需給定width，並避免在<td></td>之間留下不必要的空白間隙，以免有些mail client會加上不必要的padding。
2. CSS不要使用<style>...</style>內嵌或<link>外連，改寫inline樣式（線上工具CSS Inliner Tool），並且避免簡寫（包括十六進位色碼）。
3. 基本上只有<body>支援background語法，其他table標籤只支援bgcolor，所以避免使用background-image相關語法。（例如Outlook就無法顯示背景圖片）
4. 不支援js、Flash及Plugins。
5. 不支援list-style替代圖示。
6. 不支援動態GIF，有些PNG格式圖片甚至會無法正常顯示，所以還是以JPG和靜態GIF為主。理論上單張圖片最好不超過15K，以免讓user下載太久、失去閱讀耐心。（但書請見第七點）
7. 圖片src採用絕對路徑而非相對路徑，給定絕對的寬高數值，加上alt屬性是為了讓user在圖片無法正常顯式的情況下也能看到替代文字，display:block; margin:0; border:0; padding:0; 則是因為有些client會自動把img加上留白空隙。誠如第六點所言，圖片體積越小當然是越好，不過把圖片切得很瑣碎再拼成一張大圖也不會是更好的方式，因為很多client端會把img加上莫名其妙的空隙，因此權衡之下我還是會使用單張大圖，起碼現在各地網路環境應該都進步許多了，不是撥接時代了應該下載速度不會慢到哪裡去。
8. 大致上Outllook不支援以下屬性：
#background-attachment
#background-image
#background-position
#background-repeat
#clear
#display
#float
#list-style-image
#list-style-position
另外這篇文章是微軟對Outllok2007的HTML相關支援說明（英文），而2007 Office System Tool: Outlook HTML and CSS Validator可以幫助確認驗證你的HTML格式信件是否可以正常顯示。
9. 開頭加上「若內容無法正常顯示，請點擊此連結」，文末則加上「取消訂閱此電子報」的連結。
10. anchor最好的寫法是<a><span></span></a>，a和span都給定顏色才能複寫原本預設的anchor樣式。
其他還有無數的細節族繁不及備載，但如果注意以上細節大概就可以保證七、八成的user可以正確正常瀏覽內容了，因為mail client是很古老傳統的技術，所以在這種情況下就不好擺顯什麼新技術啦，在重重限制之下如何展現創意美感就是設計的功夫了！
全站熱搜
留言列表
