The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

電子報的版型越來越難設計了

由於我們公司有提供電子報發送平台的服務,目前也有不少客戶利用我們的平台發送與管理電子報,有些客戶僅僅發送 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 是完全不支援的!

A Guide to CSS Support in Email: 2008 Edition  - Web Clients Screenshot

接著,他反問我如果把這些 style 寫在元素(element)中是不是就可以了?我回答:「不一定,而且你電子報網頁的 CSS 也設定了許多背景圖(background-image)樣式,所以你應該還是會失望,因為在 Gmail 中一樣不支援。」

總之,客戶還是很失望,因為這問題實在難解,所以除了要看我之前寫的電子報網頁版型設計建議之外,比較簡單的原則還是不要設計太精緻的 HTML + CSS 在電子報網頁中,應該比較不會有太多的失落感!

另外我也介紹大家另一個不錯的網站:Email Standards Project,裡面有許多有用的資訊可以協助網頁設計師瞭解在設計與 E-mail 有關的網頁時應注意的事項,與他們的研究成果跟建議。

相關連結