作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Vedran Aberle tokiki
验证专家 在工程
18 的经验

拥有超过二十年的全栈开发经验, Vedran是一位热爱解决用户界面问题的JavaScript老手.

分享

最近我遇到了很多 响应性网站很多 性能问题. 在大多数情况下, 这些问题非常明显,除了最新一代的智能手机,它们在任何东西上都几乎毫无用处. 考虑到 响应性 作为一个概念是要达到的 更广泛的 观众们,这似乎适得其反.

这个问题的最大贡献者是仍然流行的桌面优先设计范式. 从移动优先的角度思考似乎可以解决这个问题, 但仅凭这一点并不能保证令人满意的表现. 我们似乎都过于依赖或多或少优雅的堕落. 我们依靠垫片和多边形来实现缺失的功能. 我们依靠库来实现快速开发,并在浏览器兼容性出现问题时支持我们.

手机杀手逍遥法外,伪装成响应式网站.

手机杀手逍遥法外,伪装成响应式网站.

“为什么担心?你可能会问. “我们的大多数访问者都拥有运行最新操作系统版本的高性能智能手机. 他们可以处理我们的网站. 分析告诉我们这一点.”

我很抱歉关于稻草人的争论,但我认为有必要大声说出来,那些 可以 使用你网站的将是你的大多数用户. 如果你没有看到Android 2.在你的分析中,这是否意味着没有用户使用这些设备? 或者这意味着你的网站没有什么可以提供给这些用户? 考虑到那一代的许多设备仍然在货架上, 直到今天还是全新的. 你不应该把它视为一种过时的技术.

因此,我想谈谈web开发的理想案例和实际目标. 以及让我们更接近这些目标的实践和范例.

砖优先设计范式

功能手机仍然占据了年度手机销量的很大一部分. 更大比例的人口并不是每年都买手机, 但是他们拥有一些能够上网的设备. 再加上仍在使用的上一代智能手机的数量, 添加kindle和其他web半支持设备(WAP设备), 电视的, 烤面包机, t恤和砖块). 把它们全部加起来,你可能会得出一个惊人的数字.

你不会在你的分析中看到它们,除非它在那里有效.

你不会在你的分析中看到它们,除非它在那里有效.

考虑这些受众的用例. 他们不会在自己的设备上阅读长篇文章、浏览和研究. 但他们可能会经历在数字键盘上输入URL并使用方向键导航页面以获得电话号码或在飞行中反复检查地址的恐怖.

对于我们来说,实现一个sub-mobile-first布局,只向低于某个功能和性能阈值的设备提供这些信息,有多难呢?

优雅的改进

将优雅的降级作为最低限度的最佳实践, 我们已经创建了一个包罗万象的原则,(在某种程度上)阻碍了超越它的思考. 一旦优雅的降级到位,我们当然可以说我们的工作完成了,而且做得很好. 越来越多的时候,我们甚至不需要考虑它,因为它已经被各种框架和库所覆盖. 最后,在某些情况下,填充和垫片完全消除了功能退化的需要.

随着这个功能变得越来越容易获得, 思考它(更不用说超越它)的需要变得越来越遥远.

从本文的角度来看,它可以被分解成这样:

没有风度的降解: 如果一个特性不容易获得, 实现失败的方式使它变得不可用或以一种令人望而却步的不切实际的方式可用.

优雅降级: 如果一个特性不容易获得,它就会以一种仍然可以接受的可用性的方式失败.

没有风度的改进: 如果该特征不容易获得,则用填充或垫片来模拟.

问题解决了.

除非你考虑那些低端设备的性能.

他们缺乏弟弟妹妹的处理能力和数据能力, 他们被要求承担更大的负荷. 将多边形作为解决方案会产生一种错觉,即所有现代功能现在都可以在所有设备上使用,并且可以毫无顾虑地使用.

所以你要实现 modernizr 以防万一,把所有东西都填满. 能力最差的设备最终会加载最多的数据, 并执行最大数量的处理. 从而确保“最佳”的最终用户体验.

削,削,填? 谢天谢地,大多数智能手机不支持Flash!

削,削,填? 谢天谢地,大多数智能手机不支持Flash!

优雅改进的想法将通过从最低的功能需求开始并加载升级,直到基于设备功能的性能可用性平衡达到最佳状态,从而扭转这个概念. 因此,数据流量和处理需求将被转移到最适合处理它们的设备上.

确定, 目前这个概念非常复杂:大多数框架和库都不支持它, 它基本上没有被讨论过, 而且很少有人提到这种做法, 远, 并且本地化为微功能. 但在某种程度上,所有的概念和功能都是这样的.

它可以,但它必须吗?

web开发的另一个最佳实践是在激活一个功能之前检查它在设备上是否可用.

然而, 考虑到你可以在你的旧安卓手机上安装最新版本的谷歌Chrome浏览器, 它会说它能跑 CSS动画, 网络GL,背景视差效果,以及许多其他功能. 但它真的, 真的,不能. 以至于浏览器会崩溃, 整个设备会失去反应,直到它必须重新启动才能重新获得控制.

这个问题最近开始影响 Android应用程序 在很大程度上(从用户的角度). 从这个意义上说,最明显的降级之一影响了Google Talk/Hangouts应用程序的升级,由于旧设备上的性能问题,他们的服务从最轻量级的聊天应用程序变成了几乎无法使用的应用程序. (只是再次强调这一点:这里的“旧”意味着你仍然可以买到现成的, 几乎所有商店都是全新的). 同样的问题 影响了YouTube应用程序 Twitter应用程序(以我的经验),显然还有许多其他应用程序.

So, 在你的计划阶段,花点时间来评估一个高性能的核心功能比尖端的化妆更有价值. 或者至少以某种形式为遗留用户保留上一代应用/服务/内容. 说到这个……

让用户选择退出流血边缘

你有没有发现自己试图在旧设备上使用Gmail,或者在连接不良的情况下使用Gmail? 那 "加载基本HTML "链接 当然会派上用场.

你为什么不尖端, 响应, 动画, 面向触摸的在线商店有这个功能?

想想看:你要求它响应,这样你就可以接触到更多的潜在客户. 你做得很前卫,给人留下了最好的第一印象. 结果就是, 更少的潜在客户能接触到关于你和你的服务的基本信息. 如果优雅的改进对你来说太昂贵了, 为什么你不至少为你的访问者提供一个选项,让他们访问你的内容的纯文本版本呢 “哇”版本 对他们的设备来说太多了吗.

你真的需要整个图书馆吗?

最后, 我希望看到的最后一个超越标准的最佳实践是“使用它或失去它”. 跟踪实际使用的库和模块,并只包括它们,有时是乏味的, 但是将整个工具集放在每个页面上是草率的.

21世纪常见的设计谎言:只剩下几秒钟.

21世纪常见的谎言:只剩几秒钟了.

最近, 我已经开始跟踪在包含一个库之后实际使用了多少功能. 我最常用的工具是 jQuery. 我经常发现我只使用了一两个功能(例如$.扩展或$.ready),或者更糟糕的是,我只使用它来按类或ID获取元素. 有时我就这样离开, 其他时候,我回到代码中删除或解耦依赖.

如果您可以自动分析库中使用了哪些内容以及使用了多少,并根据结果进行减重,这不是很好吗?

许多库和应用程序都提供了在开始使用加载之前自定义加载的选项. 但是我一直有这样的感觉,在我们的库中标准化一个自动化的“要么使用它,要么失去它”的构建体系结构应该不是太遥不可及.

我对“包罗万象”的方法有过敏反应. 但是,将它与这样的功能结合使用可能会使这种方法变成类似于原型板的东西:一种过于灵活的开发工具,不仅在语法上被缩小了, 而是在实际功能本身.

需要的是一个开发版本的库,将, 通过对依赖功能的单元测试, 启用跟踪所使用的特性并输出最小依赖或至少利用率(例如询问我是将jQuery包含在其功能的8%还是80%中). 然后可以使用依赖项输出来挑选, 总, 并尽量减少生产的输出.

但是我能做些什么呢?

首先, 参与这个问题. 思考一下,与你的同事讨论一下,并试着在现实世界的场景中发现问题.

尝试一下. 把你藏在抽屉里的上一代手机找出来. 试着在你自己的网站上使用它,看看内容是否可以远程使用. 去乡下拜访一些落后的亲戚,试着成为他们的技术传道者. 看看他们在技术采用上的滞后是否实际上是由于无障碍问题造成的.

如果你是买家 调试一个网站时,请确保(至少)在这个问题上得到低级别的支持. 记住:我们的目标并不是将你的所有功能都移植到低级设备上. 我们所要求的只是让这些用户获得你的联系信息,而不是让他们的设备崩溃.

为此预留出实际的资源:这个问题最简单的解决方案不应该超过一两天,并且需要一些前瞻性的思考. 一定要记住制作网站最基本的原因(更不用说制作一个响应式网站了)。.

如果您是一个包开发人员 在图书馆工作, 框架, 包, 或者任何其他可嵌入的软件:你是能在这里发挥最大作用的人. 如果你能够将这些概念整合到你的平台中, 你将影响整个web开发领域. 如果您确实将其纳入您的包装设计中,请告诉我,我会为您宣传.

最后是**,如果你是 开发人员 或者一个 设计师* *,不要止步于最佳实践. 总是尽量看得远一点. 你要努力推动这些还没有人要求的概念, 为了您的客户和用户的利益,不支持和未记录的.

最后,如果你想听别人滔滔不绝地讲几个小时,你就在旁边 萨格勒布让我知道. 我们可以去喝杯咖啡.

关于总博客的进一步阅读:

聘请Toptal这方面的专家.
现在雇佣
Vedran Aberle tokiki

Vedran Aberle tokiki

验证专家 在工程
18 的经验

克罗地亚的萨格勒布

2015年7月23日加入

作者简介

拥有超过二十年的全栈开发经验, Vedran是一位热爱解决用户界面问题的JavaScript老手.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

Toptal开发者

加入总冠军® 社区.