Menu

WEB 設計與開發常見錯誤

http://www.latrobeschool.com/enrichment/computers/web-design.jpg

 

本文是一份web設計與開發常見錯誤的彙總，總結了我的web設計與開發錯誤和web設計與開發錯誤，續兩篇文章。

本文包含了常見的設計開發錯誤以及我的一些解釋，我也嘗試著提供一些避免錯誤的方法，在某些問題上我也會給出錯誤信息的鏈接。

混淆文檔類型(DOCTYPE)
完全不寫、寫的不正確、或放錯地方。我曾見過HTML 4.0 Transitional被用在XHTML網頁和框架頁中，還看到過在開頭的<html>標籤後寫DOCTYPE聲明和一些不完整的聲明。
為什麼？有兩個原因。首先，文檔聲明是必須的，在W3C HTML 4.01 spec和W3C XHTML 1.0 spec裡 都有說明。第二，瀏覽器會根據指定的文檔類型去顯示和渲染網頁。也就是「DOCTYPE切換(DOCTYPE switching)」。為了保持各個瀏覽器顯示網頁的一致性，特別是你用了CSS，你一定會希望瀏覽器使用它們「Standards compliance mode」。關於DOCTYPE切換，可以看看使用正確的DOCTYPE!和正確的文檔類型聲明，正確的佈局方式。
<span>癖
樣式化的一個常見方法就是把一段東西用<span>標籤圍起來，並且帶一個class用來設置樣式。我敢保證你經常可以看到諸如<span class="heading">和<span class="bodytext">的代碼。
為什麼？ 其實在很多情況下這完全沒必要，這樣做只會混亂標籤並且沒有什麼語義。標題就用標題(h1~h6)標籤，段落就用段落(P)標籤，列表就用列表(UL, OL和DL)標籤。然後再用CSS去樣式化，如果需要的話，也可以加class和id屬性。
太多可視化思考
以為web就是WYSIWYG（所見即所得） – 一開始就想著這些東西該怎麼表現的，而不是先去考慮邏輯結構上怎麼樣。
為什麼？ 雖然大部分網民都是視力正常的，但是還是有殘疾人上網的。網民可能使用不同瀏覽器、不同系統、不同尺寸顯示器和分辨率、不同的窗口大小、不同顏色標準和文字大小，所以你不應該把你的網頁做成WYSIWYG。網頁不是印刷品或者電視節目。要讓你的設計彈性化。
缺乏語義
沒有使用具有語義的標籤。想當然的按照圖形瀏覽器渲染的HTML樣式去寫代碼，而不是參照這些標籤的意義。
為什麼？和上文提到的"<span>癖」比較接近，沒有好好的利用現有的HTML標籤來表達它應該表達的語義。沒有語義化的HTML，為那些非可視化用戶代理(UA)造成了理解上的困難。而且語義化的HTML很容易進行CSS樣式化。
編碼不一致
在服務器發送的默認編碼是一種而文檔裡面又使用另外一種，這可能會造成瀏覽器亂碼（不正常顯示）。
為什麼？因為你必須得保證所有你的訪問者都能閱讀你的內容。
不正確的alt屬性
沒寫或者寫了沒意義。在網絡上可以看到非常多沒有alt屬性的<img>標籤。沒意義的alt屬性倒是不如前者常見，比如「spacer GIF used to make the layout look good」，「帶有陰影的藍色原點」, 以及「JPEG圖片，123 KB」。要記住，alt屬性在<img>和<area>裡是必須的。
為什麼？ 這是必須的，沒有alt，任何圖片中的信息就會被屏幕閱讀器、文本瀏覽器、搜索引擎機器人忽略，或者用戶關了圖片顯示就會顯示為X。注意圖片的alt的文字是要相關的，不要給裝飾性的圖片或者用來佈局的圖片加alt屬性值，指定一個空值就可以了，如alt=""。
不合法的id和class屬性

在同一頁面裡使用了多次同一id，以及在id、class和CSS選擇器中使用了非法字符。

對於CSS來說 (CSS 2.1語法和基本數據類型)：

在CSS 2.1里，標示符（包括元素名、class和ID）只能由數字、字母、ISO 10646通用字符集U+00A1及更高、連接線("-")、下劃線("_")組成，並且不能以數字開始。

對於HTML (HTML基本數據類型)：

ID和NAME必須以大寫或小寫字母開始，隨後可以接任意字母、數字、連接線("-")和下劃線("_")、冒號(":")和分號(".")。

為什麼？遵循以上標準的瀏覽器可能不會按照你預期的現實。如果一個頁面中有多個重用的id值，那麼任何使用了該值的JS就可能會失效或者錯誤。
瀏覽器探測
使用服務器端或客戶端的腳本測試訪問者的瀏覽器，然後發送或者執行特定瀏覽器的代碼。這對於最新的瀏覽器、更新過的瀏覽器或者具備欺騙功能的UA（比如Opera默認偽裝成IE）。
為什麼？增加了不必要的麻煩，並且最終會失效。
CSS缺少單位
長度值（水平和垂直的）需要單位，除非當該值為零時。不像在HTML裡面，可以輸入width="10"。在CSS裡, 必須寫成width:10px;（或者其他單位）。
為什麼？在遵循規範的瀏覽器中會被忽略。
瀏覽器特定的CSS
樣式化滾動條、表達示和濾鏡等，都只能在IE下工作。這也不合法。
為什麼？ 只在特定的瀏覽器裡面正常。如果你真的必須使用IE特定的CSS，可以單獨寫一個CSS文件並且使用條件註釋，或者保證只有IE能看到那些不合法的CSS。
JavaScript依賴症
網站整個依靠JavaScript。很多人都願意使用不支持JS或者禁用JS的瀏覽器。當前的情況(W3Schools瀏覽器統計, TheCounter.com)表明至少有8%-10%的用戶瀏覽器不支持JS。搜索引擎機器人對待JS也不是非常友好，雖然有報告說Google正在開發支持JS的機器人。如果你的站點需要開啟JS才能導航，那別指望有一個很高的搜索引擎排名。
為什麼？對搜索引擎不友好，難以提高排名。
Flash依賴症
實際上並不是所有人都裝了Flash Player插件。並且大部分搜索引擎機器人都不支持Flash（Google有報告稱已經在嘗試索引Flash文件，但是他們還是要求你的內容和導航寫 在HTML裡），所以如果你整個網站或者導航部分是Flash的，你的網站一般就不會得到很高的PageRank。
為什麼？搜索引擎不友好，但這並不是說你應該放棄Flash，只是你應該使用的比較有技巧。
JunChen註：為Flash建立搜索索引，可以參考flash 8 swf metadate應用。
文字做成圖
把文字做成圖，又不提供更多提示信息。這不僅僅增長了訪問者下載時間，也不利於訪問者選擇和複製文字，又不利於文字放大。
為什麼？不親切，增加下載時間，對搜索引擎不友好。
不友好的表單
沒有語義、難以使用的表單。要學會使用<label>標籤，<fieldset>和<legend>標籤，不要使用「Reset」按鈕。
為什麼？沒有語義並且難以使用。閱讀設計易用的表單，優秀、易用的表單，和重設和取消按鈕，看如何設計友好和易用的標單。（JunChen註：使用Reset按鈕會增加用戶思考的時間，並且誤按情況屢屢發生）
過時的HTML
多層嵌套的表格，透明的spacer圖片，<font>標籤，表現層的標籤。其實這個大家都已經知道了。
為什麼？增加複雜度，讓整個頁面代碼臃腫冗餘，不易理解，對搜索引擎不友好。
一切向IE看齊
IE優先，做完了再看看其他瀏覽器裡如何，有問題再調整。
為什麼？浪費時間，並且這個習慣不好。IE會默認接受很多錯誤的代碼，所謂「容錯性」。而其實IE也接受良好結構的HTML，並且在其他瀏覽器裡都正常，這也不會浪費很多時間。更多信息看IE真相。
不合法的HTML屬性
使用不推薦的屬性或者只能在特定瀏覽器裡生效的屬性，諸如marginwidth，leftmargin，language，給<table>加height，給<img>加border等等。
為什麼？不合法並且沒必要。你可以使用CSS。對於<script>標籤，使用 type，而不是language，來指明腳本語言（一般是JavaScript）。
沒有編碼的「&」
很多URI帶有變量和沒有編碼的「&」符號。這不正確，並且可能會造成很多問題。 「&」符號必須要寫成&amp;。
為什麼？在「&」符號和驗證一文中可以找到解釋和一個會引起錯誤的例子。
框架
使用框架來分割瀏覽器窗口並且加載數個獨立的文件。
為什麼？首先我要說的是，框架可能比較實用，前提是你正確的使用了，比如說在內聯網和一些web應用程序中。 而對於一個網站來說，框架有很多易用性和可用性方面的問題。比如加入收藏夾的問題、打印問題以及鏈接問題，並且對搜索引擎不友好。因為機器人在多個框架頁 裡面工作比較有問題。
數據表格的誤用
Table本來就是用來放置表格狀的數據，不能像佈局表格一樣去寫，而是可以用很多自帶的標籤和屬性來使表格結構化和語義化。
為什麼？屏幕閱讀器和其他輔助技術在閱讀這些錯誤的數據表格時會有問題。很多文章都介紹了如何寫出結構化的數據表格，如Web Standards Project的A table, s』il vous plaît
Divitis和classitis
相對於<span>癖，Divitis和classitis就是用了太多不必要的Div和class。
為什麼？參看「<span>癖」和「缺乏語義」部分。
過寬的固定寬度
如果你使用的是固定寬度的佈局，請不要設定的過寬。說明：在這裡我並不是說固定佈局和浮動佈局孰優孰劣。
為什麼？如果你指定的寬度寬於瀏覽者的屏幕，就等於強迫出現水平滾動條，那極不友好。
含糊不清的和帶表現含義的class、id名
如何給class或id命名，取決於它是干嘛的而不是它看起來像什麼、在哪裡。
為什麼？為了避免你重新設計時候容易產生的混淆。比如一個名為largeblue的class，你卻用來用來讓字變得「小」和「紅」，一個名為leftcol的id你卻用來顯示在右邊。
沒有背景色
沒有給body指定背景色。
為什麼？很多用戶會把瀏覽器設置成其他的背景色，如果你不寫明的話。
非良好結構（well-formed）的XHTML
使用非良好結構（well-formed）的XHTML。
為什麼？如果XHTML被服務器伺服為application/xhtml+xml，嚴格的瀏覽器，如Mozilla系列，就不會顯示那些非良好結構的XHTML。說明一下，本網站並沒有把所有望也伺服為application/xhtml+xml，理由我在另外一篇文章裡說明：Content negotiation.
text input顏色設定遺漏
只給表單區域指定背景色或者文字顏色，特別是當行或多行文字域（input type="text"和textarea）。

為什麼？ 有些人把他們的瀏覽器或操作系統設置成反色，默認情況下一個text input就會顯示為黑底白字，而不是你想要的白底黑字。

如果你把文字顏色設置成深灰色，又不指明背景色，在反轉了顏色的瀏覽器中，就會顯示為黑色背景的深灰色字，一團糟。反之同理。

總記住設定前景和背景色，或者記得要設定文字輸入域。

這些都是你應該要注意的問題，很長？如果你都避免了這些錯誤，那麼你已經做得很好了。如果你已經犯了其中的一個或多個錯誤，嗯，我真覺得有點內疚。最後希望本文能夠幫助你在以後的工作中少犯錯誤。

 

歡迎評論此Blog原文Web development mistakes, redux

 

原文：http://www.456bereastreet.com/lab/web_development_mistakes/

翻譯：JunChen