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

由於我們公司有提供[電子報發送平台](http://www.miniasp.com/est_introduction.php)的服務，目前也有不少客戶利用我們的平台發送與管理電子報，有些客戶僅僅發送 E-DM 都是提供整張圖片發送出去，所以比較沒有版型壞掉的問題，但有些客戶發的是有許多內容的電子報，這樣的電子報若是經過網頁設計師精心設計過的話，恐怕是會**失望**大過於**成就感**的。

收信、看信的介面越來越多元，但大多數人還是使用**桌面的收信軟體**或**網頁式的收信介面**，而桌面的收信軟體一堆，網頁式的收信介面也更多，像是 [Gmail](http://mail.google.com/), [Hotmail](http://www.hotmail.com), [AOL](http://www.aol.com/), [Yahoo](http://mail.yahoo.com/), ... 而且還有分新版、舊版、Web 2.0 版、... 一大堆的，重點是每一個收信的介面對於網頁的顯示能力都有些許差異，導致電子報的版型**極難設計**！

今天就有位客戶打電話來抱怨，說他們設計的電子報為什麼用我們的平台發信到 Gmail 後所有的 CSS 設定的樣式(Style)都消失了！？我將我[去年寫的文章](/post/2007/11/15/Recommandation-on-e-Newsletter-Template-design)給他看，並解釋為何會出現這個問題，且這個問題真的跟我們的[發報平台](http://www.miniasp.com/est_introduction.php)無關。

因為我去年我就寫過一偏關於[電子報網頁版型設計建議](/post/2007/11/15/Recommandation-on-e-Newsletter-Template-design)的文章，但由於網路環境經常在變化，今年又推出了 [A Guide to CSS Support in Email: 2008 Edition](http://www.campaignmonitor.com/css/) 建議設計師們可以上去查看看。

以我們客戶為例，因為他將電子報的 styles 全部都定義在 <head> 中，並以 <style> 標籤設定 Page-level Stylesheet，這在之前應該是一般設計師在設計電子報網頁時的慣例，因為使用 Dreamwaver 很容易就可以將電子報設計完成，不過如下圖所示，這種 <style> in <head> 的用法在 Gmail 是完全不支援的！

[![A Guide to CSS Support in Email: 2008 Edition  - Web Clients Screenshot](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f79050b40b1f26ba1912-Screenshot-081114-151702_thumb_1.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b858288a074d232aa6b0-Screenshot-081114-151702_4.png)

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

總之，客戶還是很失望，因為這問題實在難解，所以除了要看我之前寫的[電子報網頁版型設計建議](/post/2007/11/15/Recommandation-on-e-Newsletter-Template-design)之外，比較簡單的原則還是**不要設計太精緻的 HTML + CSS 在電子報網頁中**，應該比較不會有太多的失落感！

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

**相關連結**

-   [A Guide to CSS Support in Email: 2008 Edition](http://www.campaignmonitor.com/css/)
-   [A Guide to CSS Support in Email: 2007 Edition](https://www.campaignmonitor.com/css/)
-   [A Guide to CSS Support in Email: 2006 Edition](https://www.campaignmonitor.com/css/)
-   Email Standards Project
-   [EDM設計請注意，Outlook 2007無法支援部分語法](https://web.archive.org/web/20120819162739/http://lotuszxl.blog.163.com:80/blog/static/981883362010111011252287/)