由於我們公司有提供電子報發送平台的服務，目前也有不少客戶利用我們的平台發送與管理電子報，有些客戶僅僅發送 E-DM 都是提供整張圖片發送出去，所以比較沒有版型壞掉的問題，但有些客戶發的是有許多內容的電子報，這樣的電子報若是經過網頁設計師精心設計過的話，恐怕是會失望大過於成就感的。
收信、看信的介面越來越多元，但大多數人還是使用桌面的收信軟體或網頁式的收信介面，而桌面的收信軟體一堆，網頁式的收信介面也更多，像是 Gmail, Hotmail, AOL, Yahoo, ... 而且還有分新版、舊版、Web 2.0 版、... 一大堆的，重點是每一個收信的介面對於網頁的顯示能力都有些許差異，導致電子報的版型極難設計！
今天就有位客戶打電話來抱怨，說他們設計的電子報為什麼用我們的平台發信到 Gmail 後所有的 CSS 設定的樣式(Style)都消失了！？我將我去年寫的文章給他看，並解釋為何會出現這個問題，且這個問題真的跟我們的發報平台無關。
因為我去年我就寫過一偏關於電子報網頁版型設計建議的文章，但由於網路環境經常在變化，今年又推出了 A Guide to CSS Support in Email: 2008 Edition 建議設計師們可以上去查看看。
以我們客戶為例，因為他將電子報的 styles 全部都定義在 <head> 中，並以 <style> 標籤設定 Page-level Stylesheet，這在之前應該是一般設計師在設計電子報網頁時的慣例，因為使用 Dreamwaver 很容易就可以將電子報設計完成，不過如下圖所示，這種 <style> in <head> 的用法在 Gmail 是完全不支援的！
接著，他反問我如果把這些 style 寫在元素(element)中是不是就可以了？我回答：「不一定，而且你電子報網頁的 CSS 也設定了許多背景圖(background-image)樣式，所以你應該還是會失望，因為在 Gmail 中一樣不支援。」
總之，客戶還是很失望，因為這問題實在難解，所以除了要看我之前寫的電子報網頁版型設計建議之外，比較簡單的原則還是不要設計太精緻的 HTML + CSS 在電子報網頁中，應該比較不會有太多的失落感！
另外我也介紹大家另一個不錯的網站：Email Standards Project，裡面有許多有用的資訊可以協助網頁設計師瞭解在設計與 E-mail 有關的網頁時應注意的事項，與他們的研究成果跟建議。
相關連結