页面构建的方式 渐进增强和优雅降级

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。

在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角,阴影(CSS3),要求兼容(使用图片背景,放弃CSS3),你会如何说服他?

作为前端的我们是不是该好好考虑一下这个问题呢

时间: 2024-09-10 16:22:28

页面构建的方式 渐进增强和优雅降级的相关文章

《图解CSS3:核心技术与案例实战》——1.3节渐进增强

1.3 渐进增强第一次听到"渐进增强"(Progressive Enhancement)一词是在前端重构交流会上.渐进增强并不是一种技术,而是一种开发的方式,更是一种Web设计理念.首先思考一个问题:"网站是否需要在每个浏览器中看起来都一样?"带着这个问题来看渐进增强.1.3.1 渐进增强与优雅降级正如前面所言,渐进增强是一种开发方式,更是一种设计理念.在编写Web页面时,首先保证最核心的功能实现,让任何低端的浏览器都能看到站点内容,然后考虑使用高级但非必要的CSS

图解css3:核心技术与案例实战. 1.3 渐进增强

1.3 渐进增强 第一次听到"渐进增强"(Progressive Enhancement)一词是在前端重构交流会上.渐进增强并不是一种技术,而是一种开发的方式,更是一种Web设计理念.首先思考一个问题:"网站是否需要在每个浏览器中看起来都一样?"带着这个问题来看渐进增强. 1.3.1 渐进增强与优雅降级 正如前面所言,渐进增强是一种开发方式,更是一种设计理念.在编写Web页面时,首先保证最核心的功能实现,让任何低端的浏览器都能看到站点内容,然后考虑使用高级但非必要的

图解css6:核心技术与案例实战. 1.3 渐进增强

1.3 渐进增强 第一次听到"渐进增强"(Progressive Enhancement)一词是在前端重构交流会上.渐进增强并不是一种技术,而是一种开发的方式,更是一种Web设计理念.首先思考一个问题:"网站是否需要在每个浏览器中看起来都一样?"带着这个问题来看渐进增强. 1.3.1 渐进增强与优雅降级 正如前面所言,渐进增强是一种开发方式,更是一种设计理念.在编写Web页面时,首先保证最核心的功能实现,让任何低端的浏览器都能看到站点内容,然后考虑使用高级但非必要的

《渐进增强——跨平台用户体验设计》一1.6 适应未知的设备

1.6 适应未知的设备 然而,还是有人认为,设计思想这东西看不见摸不着,扯那些没用的是在浪费时间.在Web设计师Tim Kadlec的博文"我们的设计并没有真正理解Web"的后面,有个读者的留言是这么说的[15]: "说得好听,但是不接地气.你得算一下捕捉用户的成本.如果一些用户根本不是你的目标用户,不能为你带来任何收益,那么,干嘛为他们进行优化?根据这种设计思想,本质上你是要为所有用户的体验负责,无形中会大量增加开发成本.但是,恕我打个比方--我们都知道成衣的尺码分大中小号

渐进增强的 Web 体验(Progressive Web AMP)

本文讲的是渐进增强的 Web 体验(Progressive Web AMP), 如果你最近几个月一直关注着 Web 开发社区,可能你对渐进增强的 Web 应用(Progressive Web App 简称 PWA)已有所了解.它是应用体验能与原生应用媲美的 Web 应用的统称:不依赖网络连接,易安装,支持视网膜屏幕,支持无边距图像,支持登录和个性化,快速且流畅的应用体验,支持推送通并且有一个好看的界面. 一些 Google 的渐进式 Web 应用示例. 虽然新的 Service Worker A

[译] 渐进增强的 CSS 布局:从浮动到 Flexbox 到 Grid

本文讲的是[译] 渐进增强的 CSS 布局:从浮动到 Flexbox 到 Grid, 原文地址:Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid 原文作者:Manuel Matuzović 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:LeviDing 校对者:薛定谔的猫,LouisaNikita 今年早些时候,大多数主流浏览器都支持了 CSS Grid 布局.自然地

面向未来Web设计:内容与外层分离 渐进增强

中介交易 SEO诊断 淘宝客 云主机 技术大厅 现在终端设备种类繁多对WEB设计提出更多要求 是时候考虑针对未来,设计出体验友好的Web了.现在终端设备种类繁多,如台式机.笔记本.上网本.平板电脑.多功能手机.智能手机等等,而这仅仅是一个开始.技术更新换代的速度在加快,我们的工作流程.标准及基础设施正在触及它们所能承受的极限.这个相互联通的时代不断创造着新的挑战,同时也酝酿着巨大的机会. 谁也无法预知,在未来将会发生什么.如果有人说可以创造出永不过时的事物,这又将是多么愚蠢的事啊.虽然我们无法提

《渐进增强——跨平台用户体验设计》一1.5 向后兼容,向前适应

1.5 向后兼容,向前适应 中学时代,我经常用MS-DOS系统上的Word文字编辑软件写作业.这是个特别专业的软件,因为打开它就只能写字,别的什么都干不了[11].那时的Word软件没有太多的编辑选项,却也能满足大部分的需要,对于我来说,足够用了. 然而,当时我写的作业,用现在的Word软件已经打不开了.二十多年过去,这个软件已经不再支持MS-DOS版本的DOC文件. 有人说,都20多年过去了,你还惦记那些中学写的作业啊--我不是这个意思.我相信除了我之外,很多人都用过MS-DOS下的Word软

(译)理解“渐进增强(Progressive Enhancement)”

原文:Understanding Progressive Enhancement 作者:Aaron Gustafson 译者:空帷 @ Taobao UED 自 1994 年开始,Web 开发社群就擂起了名为"平稳退化 (Graceful Degradation)"的大鼓.这是一个从工程界引入的概念,其主旨是为那些最新最好的浏览器提供更全方位的浏览体验,而对不幸使用 Netscape 4 的人们仅提供很少的一些基本功能.这个方法的确能够奏效,但它却并不真正符合 Tim Berners-