JunChen Wu / Web标准, Web Standards, about (X)HTML, CSS, JS...

web设计与开发常见错误

写于 2005年12月23日 10:55 评论(5)

原文:http://www.456bereastreet.com/lab/web_development_mistakes/
翻译:JunChen

本文是一份web设计与开发常见错误的汇总,总结了我的web设计与开发错误web设计与开发错误,续两篇文章。

本文包含了常见的设计开发错误以及我的一些解释,我也尝试着提供一些避免错误的方法,在某些问题上我也会给出错误信息的链接。

混淆文档类型(DOCTYPE)
完全不写、写的不正确、或放错地方。我曾见过HTML 4.0 Transitional被用在XHTML网页和框架页中,还看到过在开头的<html>标签后写DOCTYPE声明和一些不完整的声明。
为什么?有两个原因。首先,文档声明是必须的,在W3C HTML 4.01 specW3C 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,以及在idclass和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属性
使用不推荐的属性或者只能在特定浏览器里生效的属性,诸如marginwidthleftmarginlanguage,给<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名
如何给classid命名,取决于它是干嘛的而不是它看起来像什么、在哪里。
为什么?为了避免你重新设计时候容易产生的混淆。比如一个名为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

Warm Regards,
J.

原文地址:http://www.junchenwu.com/2005/12/web_development_mistakes.html

评论(5)

dzin - 2007年03月31日 08:59

学习了,

5457 - 2007年12月20日 16:15

学习中....

Ystar灬龙子 - 2008年05月31日 15:00

写的很好,翻译的也很好!!
学习了!

纪小年 - 2009年01月30日 10:47

好多 慢慢看

illinna - 2009年11月23日 14:13

看到id和class的时候突然想到的:
id与class到底各有什么意义?它们有什么区别?
如果撇开js不谈,只针对与xhtml和css来说,他们是不是就没有区别了呢?

引起我这么想的原因是,大家说到ID的时候都会说到js,所以我就在想,id是不是只为了js而存在的

发表评论