网站友好性的几个建议

网站友好性的几个建议

1、网站的设计布局合理

在网站每页的设计布局上应该遵循常识惯例，使每一页都做到设计合理，布局协调一致。这就是说，同一页面上使用统一的颜色、标识、协调的导航条、标题和页脚，链接特征一致（如统一使用下划线）。这样有助于亲和浏览者，也不至于使他们对网站产生迷惑从而失去继续浏览的兴趣。

2、建立合理的导航结构

设计网站导航菜单时，使用合理的标题和链接描述。就像在某些站点及搜索门户的顶部显示一样，告诉浏览者已经浏览过的类目或网页（如, Hom>Travel>UK>Bristol>Bed&Breakfasts）从而引导浏览者了解整个网站的路径。你可以使用Call-to-Action链接模式引导浏览者查看下一个网页或者采取下一步行动，如，点击这里预定（Click Here to Order），将此页加入标签（Bookmark This Page）或查看目录（View Our Catalogue Now）等。

3、使用表达submit事件，不要用click事件；请用表单标签form!

当使用回车键提交一个表单时(或手机上用箭头/输入键)，却什么都没发生。只好又用鼠标点击提交按钮，表单终于有了反应，这是一个网页可用性上的问题。用鼠标点击提交按钮，或在手机上关闭键盘然后滚动到页面底部找到提交按钮，这都是讨厌的多余的动作，完全不需要这样做。你只需要使用submit事件，网页就会变得友好很多。

4、在设置text-overflow: ellipsis的时候，请在你的网页元素上添加title属性

有些新的CSS属性或属性值是非常的有用，例如text-overflow: ellipsis。程序员以前经常会使用什么方法来实现这种效果。我赞同使用text-overflow: ellipsis，但是，当我用鼠标悬停在这个元素上时，你最好用title属性显示出完整的信息，如果你不想把相同的内容输出两次，你可以使用Js动态的设置title。不管怎么实现，请为用户着想。

5、不要忘了:focus 和 :active！

很多人在给页面元素设计样式时忽略了它们的状态，只考虑了用户使用鼠标操作，忘记了用户也许是用键盘操作。请用:focus 和 :active 标明它们的状态，下次当你开发一个网站，请用tab键遍历页面上所有的元素；如果你按动tab不键后，页面没有任何聚焦点变化，请检查你的样式表，看看是否忘了给它们添加一些状态样式！

6、请使用search/email文本框类型

当在手机或平板等移动设备上填充表单信息时，我遇到了超级麻烦的问题，因为我必须切换键盘模式才能找到“@”字符。我希望Web开发人员都能成熟点，学会使用正确的文本框类型：

例如：

<input type="search" value="" />
<input type="email" value="" />