Zeroplex 生活隨筆

Score of Google Chrome

網址：The HTML5 test
http://html5test.com/

翻譯自：
Top 34 Web Design Mistakes
http://www.bootstrike.com/Articles/DesignMistakes/

1. 不當的使用 Javascript：請見說明。
2. 拼字或文法錯誤。
3. Flash、Shockwave、Java：無法被搜尋引擎建立所以，下載時間較長。
4. 建立縮圖：使用 HTML 語法縮小圖片寬度、高度並不能減少流量，必須手動或是使用程式將圖片縮小。
5. 使用 GIF、Flash 動畫：動畫容易使人分心，也容易惹惱使用者。
6. 背景音樂、自動播放：想想看當你正在聽卡農時網頁卻播放重金屬音樂，尤其是每次點選子網頁都從頭自動播放。
7. 分頁、幻燈片模式：把內容放在同一個網頁，不要讓使用者點選「下一頁」以節省時間。
8. 將 F&Q 的解答分開放在不同網頁上：不要將每個問題獨立放在不同的網頁上，這樣使用者必須一直切換頁面。放在相同的網頁上就好。
9. 使用高對比文字顏色：請勿使用「黑底黑字」或是「白底白字」。
10. 螢幕寬度：應考慮 800×600 為最小螢幕寬度，盡可能不要讓瀏覽器出現水平捲軸。
11. 字型：不要使用其他人沒有的字型，設定方式請見說明。
12. 讓字體能任意放大、縮小：在 CSS 中使用 em 或 %，請見說明。
13. 使用標準、一致的版面設計。
14. 圖片最佳化：最好能將圖片縮小到四百萬象素以下，螢幕看得清楚也能節省下載時間，原作強力推薦 GIMP 製作縮圖。
15. 別忘記 title、meta、keyword 標籤：讓使用者方便做紀錄，也讓搜尋引擎建立索引。
16. 在表單中加入 label 標籤：讓使用者填選更輕鬆，請看說明。
17. 使用 Fieldset 組織表單：讓表單看的更清楚。
18. 為圖片、超連結加上說明：在圖片加上 alt 屬性、超連結加上 title 屬性，可在滑鼠游標旁顯示註解。
19. 進站畫面：好能在 Flash 動畫旁加上「進入本站」或是「略過」的超連結，不要強迫使用者看完影片，搜尋引擎也能建立索引。
20. 回饋連結及頁面：在網頁上放置 email 聯絡方式，並在伺服器上處理郵件，避免使用者畫面跳出 Outlook 等視窗。
21. 檔案命名方式：盡量以英文小寫命名，特殊字元會造成使用者存檔時的不便，如空白會變成「%20」
22. 文字區塊：文章段落中間最好留幾行空白，文字與邊框應保留間隔距離。
23. 禁止右鍵選單：不要在網頁上使用 Javascript 禁止使用者按滑鼠右鍵，要讓網頁、圖片不被其他人取用：請不要放到網路上！
24. 使用頁框：頁框中的內容並不會儲存到書籤，造成使用者的困擾。
25. 文字底線：不要在沒有超連結的文字上加底線，改用其他方式強調，請看說明。
26. 不同檔案類型的特性：壓縮率、串流等特性。
27. 彈跳視窗：不要讓超連結跳出新視窗，也不要在新視窗放廣告，這樣只會讓使用者厭惡。
28. AJAX：在 IE6 上面執行 AJAX 仍需要使用到 ActiveX，直到 IE7 才將 XMLHTTP object 獨立出來。
29. 背景顏色：不要假設所有使用者預設的背景都是白色，請自行加上背景顏色設定。
30. 網頁測試：針對各種瀏覽器以及各種情況做測試，請見說明。
31. 友善的介面但無法調整：讓所有的設定值都可以被調整，以免發生字體變大但是行距不變的情況。
32. 偵測到不支援 Javascript 時強制重新導向：使用 noscript 標籤來告知使用者，不要重新導向到其他頁面或是跳到瀏覽器更新頁面。
33. 不支援列印格式或列印預覽：可在 CSS 設定列印專用樣式，隱藏目錄及導覽列可以在列印時節省紙張。
34. 不支援基本搜尋功能：在網站上放置搜尋欄位，讓使用者可以搜尋整個網站。