检查浏览器兼容性的给力工具

Check-Cross-browser-Compatibility
  现今有越来越多的浏览器,不管是被人熟知的IE、Firefox、Chrome、Opera、Safari,还是其他各种第三方的马甲浏览器,以及Linux、Mac OS中的浏览器。而浏览器的兼容性,是在设计制作网站或者网络应用时不得不考虑的问题,甚至是举足轻重。不像国内的好多政府网站都是IE6 Only,用其它浏览器则变得龙飞凤舞。
  

确定你的观众

  对于个人站长来说,分析网站的数据是十分必要的。如果你的网站潜入了诸如站长工具、Google Analytics等这类的追踪分析工具的代码,分析你的观众是轻而易举的事情。通过这些工具,你可以知道来访者使用的系统以及浏览器类型,甚至是分辨率。Google Analytics甚至可以追踪到移动终端的数据。根据这些数据,再针对观众进行页面的优化设计。尼龙扣的来访者中还有很多人使用IE6,但是在IE6下却是一团糟,还需要针对IE6进行设计优化。
  

截屏工具

  Adobe Browserlab是Adobe公司出品的测试兼容性的工具,包含了全部的主流浏览器的各个版本。测试速度还算可以。截图如下:
Adobe-Browserlab
  Browser Shots也是一款在线的测试工具,通过分布式计算机上不同浏览器打开所需检查的URL,最后将截图返回。不足的是当你添加请求后会进入等待队列,等待时间的长短与使用人数的多少相关。该网站还将测试过的站点整理成册,以供来访者进行浏览。
  

桌面测试

  作为设计者与开发者来说,桌面测试是必不可少的,需要安装各种不同的浏览器。最让人头疼的非“主流”浏览器IE莫属,而IETester就是这样一款测试IE兼容性的工具,非常好用,可以分别建立从IE5.5至IE10 Preview各个不同版本的IE,来方便进行测试。
IETester
  总之,网页设计以及前端开发人员与浏览器兼容性的斗争将是一个长期的过程,利用这些工具能够减少时间,为大家提供便利。

网页设计师不要对现代浏览器过于兴奋

  还记得不久前Mozilla和Microsoft有一场现代浏览器之争,微软说我家的浏览器可以成为是现代浏览器,而Mozilla说Firefox起码比IE9领先两年,IE9还称不上现代浏览器。
  这段时间,IE、Firefox、Opera、Chrome、Safari都推出了各自的最新版本,Web Designer围绕这些浏览器进行了很多讨论,表现出各种兴奋。因为它们支持HTML5与CSS3,可以提供更好的图形动画以及脚本语言。同时我们看到有些用户已经放弃了IE6浏览器,这是一件好事。
  虽然IE浏览器仍然占有很大的市场份额,但是火狐和谷歌浏览器已经开始占有自己的一席之地。对于网页设计人员来说,他们可以利用这些新兴浏览器的特性为自己服务。
  这些新发展对于网页设计师来说是好事,但是仍然有疑问存在:这些新发展到底意义大不大?
  这些新变化对于普通网民来说重要吗?网民对用CSS3(而不是javascript或者flash)中的转换(CSS3 transitions)属性制成的悬浮按钮和下拉菜单更感兴趣吗?网民知道用flash做出来的东西和用javascrip、CSS3与HTML5做出来的区别吗?
  在网民和网站站长的眼里,一个网页的真正价值实际上是相同的——因为他们关心的都只是内容。网民访问网页以获得信息、与别人进行社交,或者完成特定的任务。只要他们能达到自己的目标,他们就会很欢乐。这才是网民真正关心的事。
  

关注对用户有意义的事情

  现在大家普遍接受的一点是,同样的网页在不同的浏览器里呈现效果是不同的,但是一个网站如果需要用最新最NB的浏览器才能正常显示会让用户十分沮丧与失望。而我们经常能在网站上发现这样的话,使用某某浏览器会得到最佳的浏览体验。
  网页上呈现的信息或者任务需要在尽可能多的平台或者运行界面上打开——这是网页设计师分内的事。所以绝对不要让浏览器成为打开网页或者用户体验的绊脚石。
  基于同样的原理,网页的互动部分需要在所有的平台和界面上都可以使用。任何时候,网页的实用性都不能丢。一个很糟糕的用户界面设计跟一个在IE5.5里支离破碎显示的网页是一样的。

IE6倒计时
  

现代浏览器

  现代浏览广泛支持 HTML5, JavaScript, 和 CSS3,这是它们值得称赞的地方,因为这些特性可以让网页设计师在用户界面上实现更加天马行空的创意。
  如果网页设计师只用为一个网络浏览器设计界面,网页设计师就该轻松多了,但在现实中这几乎是不可能的事。
  因为网页设计师总是不得不为那些兼容性比较差的浏览器设计。为了在不同的浏览器中都能正常显示内容与实现功能,不得不写大量的hack、脚本、覆盖等等。
  看起来好像使用旧的系统以及落后的浏览器的用户在拖后腿且妨碍网络的进化。但是这些不可避免的情形不会妨碍设计师使用现代浏览器所提供的一些特性。
  

不能因为用户的无知而伤害他们

  虽然我们不应当谴责网民使用旧版的过时的浏览器,但是我们可以奖励那些使用兼容性好的浏览器的网民。网页设计师怎样才能用最新的技术设计出互动性强而且好看的网页,且不忽视那些使用过时浏览器的网民呢?
  比如说CSS3中的border-radius属性,在最新的浏览器中都可以正常渲染,而使用过时的浏览器却只能看到方形的边框。比如尼龙扣的导航栏,在IE9一下的浏览器中看到的只是一个方形的长条。但是用户却不会体会到这一点。所以说,浏览器的新特性不会成为那些选择过时的浏览器用户的障碍。

尼龙扣在不同浏览器下的显示效果
  

现实

  残酷的现实是,设计师不得不将兼容性最差的浏览器纳入考虑的范围。不幸的是,IE6还是最坚挺的浏览器。然而最新的浏览器随着时间的推移在一点一点蚕食IE6的领地,还记得微软为IE6所做的倒计时网站么?
  不论何时,设计师都得将最弱的浏览器纳入考虑的范围,直到几乎没有人使用它们为止。
  

好消息

  因为我们有能力加速浏览器的发展,并且研发出更加好用的浏览器,所以网页设计师会处在一个特别专业化的位置。
  网页浏览器的改进是令人振奋的,但是它并不会为网页设计师的成功打包票。网页设计师肩负的重任仍会让他不断提高自己信息呈现方式的能力,而且为用户提供更加舒适的体验。
  电视可以用大小、质量、解析度和特性来分类,网页浏览器也是这样,虽然它们之间有一些的不同之处。但是真正值得我们探索的东西总是不变——我们关心的不是呈现信息和内容的“匣子”(电脑屏幕或者电视屏幕),而是在各个频道上或者网页上呈现的内容。
  你有没有在所有的网页浏览器上测试过你自己设计的网页?你利用了CSS3和HTML5来做一些新东西了吗?
  欢迎大家讨论