Web Design: Progressive Enhancement

 20th August 2020 at 2:19pm

中文作「渐进式增强」,意思是设计或者开发功能时,先考虑限制最多的终端,实现核心能力,再针对限制少的终端,做上锦上添花的功能。例子:

  • 基于屏幕小的移动端设计网站,再对屏幕更大的设备提供更详细的信息、更好的交互等
  • 在实现单页应用时,同时考虑没有启用 JavaScript 的客户端,对这样的客户端采用 server rendering,使其有一样的使用体验

对于特定技术,也要多考虑如何渐进式增强:

  • HTML:比如你使用了 HTML5 的 语义化标签,那么你要考虑下老版本浏览器是否认识这些标签,可能需要使用 CSS Reset
  • CSS:比如你对某块背景使用了渐变,那么你最好也给它设置一个静态的背景,避免有些浏览器还不支持渐变,导致背景一块空白
  • JS:如果你使用了高版本的浏览器接口或者 ECMAScript,考虑使用 polyfill 或者 transpiler 来支持老版本浏览器。如果做到极致,甚至应该考虑用户浏览器禁用了 JS 的情况

Learning Web Design 一书中给了一些这个领域非常好的参考书目。