Designing for the Web

via

一篇很好的文章，翻譯並整理自 Digital Web Magazine 的 Designing for the Web，提醒了網頁設計者應該注意的事項。

以下是我依照上面珍體中文版整理的正體中文版本筆記。

來自 Digital Web Magazine 的 Designing for the Web，總結了一些針對 WEB 設計需要注意的問題。

第一，解析度。顯示器解析度使用情況如下：

Screen Resolution	2005	2004
Larger	11%	10%
1024 × 768	56%	50%
800 × 600	28%	35%
Smaller/Unknown	5%	5%

我們不去追究數據的權威性，但至少可以反映個大概。依據中國國情，使用 800×600 的使用者難說不會比上述數據大，所以，現在絕對不要拋棄我們的 800×600 的使用者。

至於圖片的解析度，這篇文章說得太多了，我覺得 Web 設計中，時刻記著 72dpi 就夠了。

RobinW：

這個依照國情有所不同，可以依照想要的目標讀者群來設計。

第二，瀏覽器使用情況。

Browser	2005 (July)	2004 (December)
IE 6	67.90%	65.50%
IE 5	5.90%	9.90%
Firefox	19.80%	n/a
Opera	1.20%	1.80%
Mozilla	2.60%	17%
Netscape	0.50%	1.60%

如果不是特殊需求，我覺得 Designing for IE 6+ & Gecko based (etc. Firefox) 就夠了。

RobinW：

其實我覺得最好能夠符合 W3C 標準，不過要花些時間設計就是了。

而瀏覽器實際能夠處理的解析度如下：

Screen size	IE 6	Firefox	Opera	Mozilla	Netscape
800 × 600	779 × 400	781 × 434	777 × 427	779 × 420	781 × 389
1024 × 768	1003 × 568	1005 × 602	1001 × 595	1003 × 588	1005 × 557

不知道為甚麼在寬度上 Mozilla 會比 Firefox 少 2px？總之以最小值來衡量就 ok 了。文章還提到基於百分比設計（可伸縮、可擴展），但這確實是一個難題，得看實際情況，該文也沒有給出甚麼能令人滿意的答案。

第三、用色。

唯一能夠跨平台的就是 web216 安全色。

第四、圖片壓縮

比較 gif、jpg、png。我的感覺是，png 未來比較有前途。我敢打賭，等 IE 支援 alpha 的 png 後（應該不遠了），滿世界都是 png。

RobinW：

PNG，Portable Network Graphics（攜帶型網路圖片），我自己使用的經驗，好處是 1) 無損壓縮 2) 可以有半透明或透明的效果。不過壓縮比率通常沒有 jpg 高（相對來說 jpg 就有失真壓縮的缺點）。IE 7.0 開始支援 png 透明背景。

第五、文本（字體）

這個字體常用列表比較有用：

• Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

其他相關

還需要注意易用性，可用性還有受眾（Audience：讀者群）的問題。

RobinW：

在原文裡面，常常用到 indented audience 這個詞，表示這些讀者還不是真正的讀者，可能路過一下就閃了 :P（學英文 XD）

最後

最重要的一句話：

As Web designers, everything we do is for the user.