The Will Will Web

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

電子報網頁版型設計建議

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

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

  1. 因為現在許多人都使用像 Gmail, Hotmail 等 WebMail 的方式收信,所以郵件中若是有使用太多會影響 WebMail 原有版面的部分應該全部都會被刪除,導致版型亂七八糟的。
    這篇文章有完整且詳細的對照表:A Guide to CSS Support in Email: 2007 Edition
    或你可以下到這裡下載 PDF 檔回去列印。
  2. 盡量不要用 CSS 來排版,用傳統的 TABLE 排版方式是比較安全的作法!
    注意:DIV標籤在 Outlook 2007 中「竟然不支援 CSS 中的 width 這個屬性」,所以你用 DIV 包網頁是沒用的!
  3. 版型最外層最好用一個 TABLE 包裹住整個網頁,並設定固定的寬度,建議寬度為 700px 以內。
  4. 如果網頁的頁首部分會用到漂亮而複雜的底圖,建議將整塊頁首都做成一張圖片,缺點是這裡就無法再貼上什麼動態的文字了。
  5. 不要在電子報的網頁中放入「表單」,因為 Outlook 2007 不支援,且在 Outlook 2003 中使用表單也無法用快速鍵(如用 TAB 切換欄位),實在不方便又不實用。有很多人會在電子報中嵌入「問卷」實在不夠明智,都不知道填寫的人很痛苦,不小心按下空白鍵,Outlook會自動跳到下一封信去了,再回來的時候所有輸入的東西都消失了。=.=''
  6. 文字與圖片的地方盡量切乾淨,版面設計的時候就不要設計「疊在一起的樣子」。
  7. 如果要將電子報的版型加上圖片的外框,就用TABLE設計九宮格把圖放在四邊的 TD 裡,但如果電子報的長度不固定的話,建議不用做這樣的設計。
  8. 盡量少用 GIF 動畫,因為在 Outlook 2007 中看不到這些動畫。
  9. 不要用 PNG 圖檔做透明背景。

另外,以下是一些「非常強烈建議不要用」的設計方式:

  1. 不要使用任何 JavaScript 或任何像 onclick, onkeypress, onmouseover 等等的事件(event)!
  2. 不要在電子報網頁中嵌入 Flash 動畫。
  3. 不要用 IFRAME 嵌入其他網頁。

相關連結