2009年8月25日 星期二

電子報網頁版型設計建議

由於 Outlook 2007 的一個嚴重缺失,又讓電子報設計的創意再更少一些了,由於能用的CSS屬性實在不多,光是「背景圖」就很惱人了,設計師只能用簡單的背景色彩鋪陳網頁的版面,至於許多創意的背景圖設計就只能用單張圖片顯示了。

以下是依我個人經驗對設計的建議:

因為現在許多人都使用像 Gmail, Hotmail 等 WebMail 的方式收信,所以郵件中若是有使用太多會影響 WebMail 原有版面的部分應該全部都會被刪除,導致版型亂七八糟的。

盡量不要用 CSS 來排版,用傳統的 TABLE 排版方式是比較安全的作法!
注意:DIV標籤在 Outlook 2007 中「竟然不支援 CSS 中的 width 這個屬性」,所以你用 DIV 包網頁是沒用的!

版型最外層最好用一個 TABLE 包裹住整個網頁,並設定固定的寬度,建議寬度為 700px 以內。

如果網頁的頁首部分會用到漂亮而複雜的底圖,建議將整塊頁首都做成一張圖片,缺點是這裡就無法再貼上什麼動態的文字了。

不要在電子報的網頁中放入「表單」,因為 Outlook 2007 不支援,且在 Outlook 2003 中使用表單也無法用快速鍵(如用 TAB 切換欄位),實在不方便又不實用。有很多人會在電子報中嵌入「問卷」實在不夠明智,都不知道填寫的人很痛苦,不小心按下空白鍵,Outlook會自動跳到下一封信去了,再回來的時候所有輸入的東西都消失了。=.=''

文字與圖片的地方盡量切乾淨,版面設計的時候就不要設計「疊在一起的樣子」。

如果要將電子報的版型加上圖片的外框,就用TABLE設計九宮格把圖放在四邊的 TD 裡,但如果電子報的長度不固定的話,建議不用做這樣的設計。

盡量少用 GIF 動畫,因為在 Outlook 2007 中看不到這些動畫。

不要用 PNG 圖檔做透明背景。

重點就是
不支援背景圖像(HTML 或CSS)
糟糕的背景色支援:個別div或table的背景顏色可正常顯示,巢狀結構的div或table則會消失。
不支援Flash及Plugins
不支援CSS、浮游物件
不支援列表清單替代圖示
不支援CSS 定位
不支援動態GIF

另外,以下是一些「非常強烈建議不要用」的設計方式:
1.不要使用任何 JavaScript 或任何像 onclick, onkeypress, onmouseover 等等的事件(event)!
2.不要在電子報網頁中嵌入 Flash 動畫。
3.不要用 IFRAME 嵌入其他網頁。
4.若要製作圖框,建議切圖將文字包起來,不要使用背景圖的方式
5.另一種做法是用背景色來取代背景圖框架的做法

參考http://blog.miniasp.com/post/2007/11/Recommandation-on-e-Newsletter-Template-design.aspx

沒有留言:

張貼留言