打造为每个人服务的网站 Mozilla Hacks – web开发者博客

294 阅读12分钟

译者:sodacat

原文链接

数以百万计的网站在一个或多个主要浏览器上都存在兼容性问题,这就导致了很糟糕的用户体验。开发者社区网络可以解决这个问题。

在过去的20年中,网络发生了极大的变化。在1996年大概有一百万个网站;而现在超过了10亿个。那时候有大约五千万的互联网用户;在今天数量超过了30亿。现在所拥有的内容,比我们当年所能想象的还要多。人们在81亿台互联设备上浏览它,其中包括24000多种不同的移动设备

Statistics illustrating explosive growth in the number of sites, users, and devices.

在内容、设备和用户方面的爆炸性成长使得跨浏览器兼容性变得比在1996年更为重要,在Stack Overflow上有差不多55,000个问题包含“跨浏览器”字样,有成百上千的问题是关于作品是否可以在[某浏览器]上很好的工作。任何关于特定浏览器如何处理特定网站的问题都是一个可能的浏览器兼容性问题。

Statistics showing the number of questions on Stack Overflow that relate to cross-browser compatibility.

所以,跨浏览器兼容性仍然是个问题,一个在Mozilla我们关心的问题,并且我们认为你也应该关心它。为什么?好吧,这样来说,[有可能你的用户和你使用的浏览器是不同的]((#other_browser)。他们有超乎你想象的能力和需求。他们不会因为你的网站不能正常工作就更换浏览器。很好的为他们服务是证明你精通这门技术的一个方法。而且先进的工具使之比以前更容易实现。

是什么造成了跨浏览器的不兼容?说起来很复杂。这里是一些目前排名前列的罪魁祸首:

  • 开发人员使用特定浏览器功能(如开发商特殊的前缀)来实现一定的效果,而没有为其他浏览器提供解决方案或polyfills

  • 在被标准化之前,浏览器开发商急于实现开发人员所想出的功能。

  • 浏览器开发商对于为浏览器制定标准和修复漏洞的速度很慢。

  • 使用用户代理嗅探器的网站对于不同的浏览器来说服务的内容不同。

  • 开发者过度依赖单一的工具(有时仅仅可靠地支持一种的浏览器)并且可能会忽略跨浏览器兼容性漏洞。

  • 行业的成长——强烈的需求鼓舞了很多新开发者加入这一领域,这就意味着开发人员的总体经验比几年前的平均水平要低一些

Statistics suggesting that browser implementations, developer experience, and developer browser choice may affect cross-browser compatibility.

在网络早期这些挑战就伴随着我们。但是从那以后,网络发展取得了很大的进步。最好的实践体验和现代化的工具可以帮助我们在每一个浏览器上建立充满活力的体验.

所以,开发者们,这里有几个事情来鼓舞你做出下一个为每一个人服务的网站

比你想象中还要多的人使用其他浏览器

许多开发人员认为他们所使用的浏览器是其他任何人所使用的唯一的浏览器,因此他们只为它开发。通过一些措施,70%的网页开发人员在电脑上使用谷歌。但是仅仅只有45%的普通人在所有设备上使用谷歌。57%的在电脑上使用谷歌。只在谷歌搭建和测试网站会忽略差不多一半的全球用户

浏览器的使用在地理上有很大差异。在许多地区,谷歌,火狐和IE/Edge是位于前列的浏览器,但是在各方面用户的比例不同。德国用户青睐火狐甚于谷歌。在日本IE使用最广泛。相当多的澳大利亚人选择Safari。超过五分之一的越南用户使用Chromium的一个分支叫Cốc Cốc的浏览器。如果只在一个浏览器上搭建和测试网站将会忽略这些市场差异。

最后,在你浏览器上出现的功能在别的浏览器上可能不会出现。浏览器开发商在不同的时期更新不同的功能,所以为了你最爱的浏览器上一个很酷的新API,你可能会错过许多用户。

这些因素以意想不到的方式结合起来:选择一个不是被所有浏览器支持的API,只在一个浏览器上测试你的网站,在一个此浏览器不是主导的市场运营意味着失去了基本上一半以上的潜在用户。把顾客晾在一边和把钱丢在桌子上是一样的。这种无用功需要避免。

兼容性与可访问性

构建跨浏览器兼容的网站意味着为未知的客户端环境进行设计和编码,为了使内容适应最广泛的潜在用户。毋庸置疑的,这些用户包括残疾人士-数量可能超出你的想象。如果你的网站在每一个浏览器中正常工作,但在屏幕阅读器中崩溃,你就错过了一个很好的机会。

残疾人士代表了一个很重要的市场份额。举个例子,仅仅在美国,视觉障碍的互联网用户数量比加拿大互联网用户的总量都多。网站功能是为了满足用户的需求,你只需要实施他们。(just do it!)

可访问性不仅造福残疾用户-举个例子:

  • 页面不仅更容易被屏幕阅读器用户访问,还更容易被搜索引擎算法访问。简单的可访问技术如:在图片上加上文字标签说明,在链接中使用描述性文本,用CSS只是为了样式(没有其他意义),使用HTML5的语义标签提高一个页面整体优化。

  • 视频内容翻译不仅对听力障碍人士有好处-对在带宽比较低的地区使用移动设备导致不能下载视频的人,在嘈杂的环境中不能听清视频声音的人都是有好处的。更多的文本内容意味着更多相关的关键字,所以在再一次利于页面优化。

用户不会更换浏览器,他们会更换网站

你也许会认为用户会更换浏览器来使用你的网站。但是更多的是不会或不能。

用户对于不能正常工作的东西都是没有耐心的,相反,他们会使用竞争对手的网站。在一个关键点上失误可能导致一个潜在用户永远消失,根据 Akamai显示,

  • 在你的网站上遇到过问题的用户中的32%不太可能会和你的公司进行网上交易。

  • 35%的用户会对你的公司有消极的看法。

  • 45%的用户一般不会再次访问你的网站

  • 超过五分之一(22%)的用户会永远的离开

更重要的是,许多用户不知道如何安装一款新的浏览器,甚至不知道什么是浏览器(许多用户不知道浏览器,搜索引擎和网站的区别)。

并且,即使用户指知道如何安装一个新的浏览器,并且想安装,他们也可能不能安装。许多公司要求他们的员工使用特定的浏览器,许多人在类似于图书馆的地方使用公共电脑。

举个例子,微软将2016年1月12日作为用户升级到更新版本的浏览器的最后期限,但是在三月的时候,超过三分之一的IE用户仍然保留着旧版本,不再接受安全更新服务。IE用户中的2.07%还在使用微软公司不再提供破解补丁的IE8浏览器;实际上,在上个月同样的情况也存在于1.59%使用IE9用户中的3/4和I10.59%使用IE10用户的全部。

糟糕的网页体验使用户远离。如果你一半的用户使用一个不同的浏览器,并且你想留住他们,那么在那个浏览器上测试是很重要的。

Statistics showing that browser use varies by locale, and that broken web sites drive away users.

兼容性 === (恒等于)工艺

创建网络是一个需要技能的学科,不只是一个小任务——我们都想为我们所做的感到自豪,磨练我们的工艺,并证明我们对它的掌握。这包括:

  • 与最新的技术,框架和技术保持一致的步伐
  • 认真测试并且实施跨浏览器/平台应用程序包括回退功能较弱的浏览器。这些经验是可行的吗?
  • 确保你的网页内容对于残疾人来说是可访问的。
  • 确保整体外观和你创造的用户体验是令人愉悦的,并且符合顾客的品牌需求

所以,作为一个网站开发人员,推出的网站就是你的简历。一个高质量的体验对于你的用户,你的同事和你现在和未来的雇主来说是很重要的。

但是往往,时间和业务约束限制这样的事情。你有一个很难达到的最后期限。你的老板只关心网站如何在他们的ipad上工作而他们没有听说过可访问性。在这次冲刺中,你没有时间来修复IE的这个漏洞。大部分时间我们只是做我们能做的,而不是做我们喜欢做的事情。

当最后期限接近时,对于跨浏览器测试,一些偷工减料是可以尝试的,希望你选择的框架测试可以覆盖这方面。但是你的网站不仅仅只是框架代码,还有你所负责的一切。测试以确保你的代码跨浏览器也可以工作的很好是不能偷工减料的一步。

日复一日的写代码;提供信息给任何需要的人;创造可以在所有平台工作的丰富的功能:这些是一个伟大的网站开发人员的崇高目标。

先进的工具是有帮助的

现在你知道了有很多的理由使你将网站做的更加兼容。但是你如何做呢?

传递网站的承诺

该网站的承诺是,任何人都可以在任何设备上的任何浏览器来访问内容。融入这一承诺是部分人类最大的愿望——自主、自由、教育和发现。设计跨浏览器兼容性使你的工作拥有最可观的用户和市场,提高你所掌握的技艺,本身是一个高尚的目标。

虽然现代的设备和浏览器前景呈现许多挑战,但是先进的工具提供看许多解决方案。超过30亿的人在寻找你的网站-你准备好了吗?

相关信息

Justin Crawford

Justin Crawford是火狐的产品工程师,致力于开发和提升市场。他喜欢思考未来,建筑和骑自行车

更多Justin Crawford写的文章…

相关信息

Chris Mills

Chris Mills是火狐的一个高级技术作家,在这里他负责关于开发web应用程序文档和演示程序, Firefox OS和相关的工程。他喜欢摆弄HTML,CSS,JavaScript等网页技术,并偶尔在会议和大学进行技术讲座。过去他在Opera和W3C工作,喜欢玩重金属鼓,喝好啤酒。他,他的夫人和三个漂亮的孩子住在英国,曼侧斯特附近。

更多Chris Mills写的文章…

相关信息

Ali Spivak

@alispivak。Ali在Mozilla负责开发市场,并且有着比她公开场合承认的更长时间在从事开发和管理网站。她热衷于保持网络的开放,从事着开发人员喜欢的事情(像MDN)。也喜欢旅行,做饭,做事。

更多Ali Spivak写的文章…

新人小白第一次做这种翻译,有一些专业术语不太明白,经过查资料了解了一些,可是不知道该如何说明白。像 progressive enhancementspolyfills 就不是很明白怎么说明。 希望大神们可以多多指教,有什么翻译有误的地方可以帮忙指出,提出宝贵的意见 ^ _ ^

谢谢!