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