電子郵件頁面EDM頁面設計中運用CSS技巧

文章簡介：我們在做郵件頁面的時候，都希望使用者開啟郵箱後看到我們發給對方是一個完整的網頁頁面，但是郵箱對HTML頁面的渲染與在瀏覽器中的渲染不同，渲染能力小了很多，在瀏覽器中正常顯示的效果，在郵件中卻會出錯，或者無法渲染。

電子郵件頁面（EDM），就是能通過郵件形式發給對方的網頁。相比普通郵件，網頁郵件更能奪人眼球，精心設計的網頁郵件，能在很短時間內將你要傳達的資訊灌輸給接收者。

　　我們在做郵件頁面的時候，都希望使用者開啟郵箱後看到我們發給對方是一個完整的網頁頁面，但是郵箱對HTML頁面的渲染與在瀏覽器中的渲染不同，渲染能力小了很多，在瀏覽器中正常顯示的效果，在郵件中卻會出錯，或者無法渲染。

首先我們看下時下郵件用戶端對HTML和CSS的支援(圖)：

由於郵箱用戶端系統對css的支援存在天壤之別，那麼為了盡量減少郵件頁面在使用者端出現錯誤，我們要注意以下幾點：

1、檔案內容編碼要是UTF-8；

2、不包含圖片或者flash的頁面應控制在10k以內，含圖片的大小應控制在30k-120k以內;

3、郵件頁面的寬度一般保持在600px至800px之間，推薦寬度為650px或者600px，郵件的高度沒有具體要求，應以郵件內容多少而定，建議最長不要超過1200px，即 2.5屏，否則必須修改；

4、布局要用表格版面配置，不要用div，css樣式要把樣式寫入html標籤內部，不要引入外部樣式檔案，也不要寫在style間，table如果裡有margin：0 auto；這個樣式不管用，建議寫成具體數字如margin：0px 15px；郵件內容置中時，在table裡設定align=”center”,字型和字型大小最好定義在每個table裡的td裡;

5、不要在郵件中插入任何的Javascript、Flash以及一些特特殊標籤(如:marquee)絕大部分郵件用戶端會屏蔽Flash和Javascript，以及一些特殊標籤和屬性；如果有動畫效果就用gif圖片，最好控制在3個以內；

6、不要使用背景圖片background-image屬性，在多數線上郵件用戶端會被屏蔽，盡量使用純色背景；

7、給每張圖片都指定寬和高以及alt屬性值，而且圖片的src屬性一定要用絕對位址，包著圖片的td也應加高寬限制，以避免部分用戶端的圖片顯示出現異常，重要的內容資訊不要用圖片，考慮到圖片可能無法顯示，重要內容可以選擇文字顯示；

8、郵件頁面當中的所有點擊應使用彈出新視窗　　最後就是郵件頁面的測試相對麻煩一些，多測幾遍，你懂的。