web设计创意笔记(Web设计的峥嵘岁月)

渐进增强一直是现代Web开发的基础之一,我第一次接触到这个概念是在Dave Shea的博客上,当时他介绍了所谓的MOSe——Mozilla、Opera和Safari增强你应该对Dave有所耳闻,就是他创造了CSS禅意花园,我来为大家讲解一下关于web设计创意笔记?跟着小编一起来看一看吧!

web设计创意笔记(Web设计的峥嵘岁月)

web设计创意笔记

渐进增强一直是现代Web开发的基础之一,我第一次接触到这个概念是在Dave Shea的博客上,当时他介绍了所谓的MOSe——Mozilla、Opera和Safari增强。你应该对Dave有所耳闻,就是他创造了CSS禅意花园。

Dave是这样解释MOSe方法的:

“在IE浏览器上创建一个基本的功能页面,你可以在拥有高级选择器的现代浏览器里添加额外的功能,等等,这是我们可以在未来几年持续前进的唯一方法,让我们拥抱它吧。”

Dave建议我们应该首先为低级浏览器创建一个最低可用页面,尤其针对IE的早期版本,然后在支持CSS的子选择器、兄弟选择器和属性选择器的现代浏览器里应用更多的样式。你会注意到,Dave讨论页面应该如何工作,而不是应该如何设计。

渐进增强

同年早些时候,Steve Champeon 开始推广渐进增强概念。他同Jeffrey Zeldman一样,是Web标准的创建人之一。

“与其优雅降级,不如渐进增强。首先为最新的、不同功能的设备构建文档,通过单独的逻辑继续增强这些文档表现。不要让基准设备承担过多的责任,而应该让使用现代浏览器的用户拥有更加丰富的体验。”

许多人将渐进增强概念视为设计开发网站的理想方法。从对Web特性支持较少的浏览器上开始,设计一个仅能提供最基本体验的网页,然后再在高级和现代浏览器上,根据其所支持的特性,实现不同细节的分层设计。

这意味着在实际操作时,优先使用老旧浏览器支持较为成熟的CSS选择器和属性,而对于较新的属性则谨慎使用。理论上这种渐进增强的方法是行得通的,但是在实践中,我们又该如何选择不同的增强方案,才能发挥这种设计原则的最大潜力?尽管Steve在文章中使用了术语“包容性的网页设计”,但我确信,他从未打算让我们与功能差劲的浏览器纠缠,限制我们的渐进增强创作思路。就算他提过这样的想法,你能猜猜他和Dave的那些文章是什么时候的吗?2003年!

时代更迭

2003年,巨大的30GB容量的iPod可算是个潮物,在那一年,如果你的工作是设计、开发网页或者仅仅是浏览网页,你肯定使用过下面这些软件。

Mac OS X 10.2 (Jaguar)

Windows XP (SP2)

Adobe Photoshop CS

Macromedia Dreamweaver 7

Microsoft FrontPage 2003

Internet Explorer 6

Apple Safari 1

Mozilla Phoenix/Firebird

Opera 7

随着时间的流逝,我们会不断升级软件,然而在实践渐进增强方面,我们总是固执地坚守着以前的常识。

沉醉其中

这并不是说渐进增强不值得称赞,事实恰恰相反。

基本内容和功能应该总是可访问的。

应该使用简洁、清晰和语义化的标记。

样式表应该可以实现视觉设计的所有方面。

网页的交互行为应尽可能交给脚本来完成。

我们在开发时遵循这些原则,页面的可用性或可访问从来不依赖CSS或者JavaScript。当我们使用有意义的HTML标签时,它将变得更轻量、更具有适应能力。CSS使得在各种尺寸和类型的屏幕上的排版更容易。

渐进增强的理念不止如此,然而我们必须小心谨慎,不要因为坚持其原则或应用其理念而限制了自己的创造力,特别是在视觉设计方面。我们必须不断地重新评估如何应用这些原则,从而避免我们的作品变得平庸。

老旧浏览器和过时设备

Zoe Gillenwater在她的演讲“使用弹性布局提高响应能力”中提到了CSS中flexbox布局的应用,她提倡使用弹性布局在设计中实现渐进增强。但问题是,在渐进增强实践中,往往会为了迁就还在使用老旧浏览器和过时设备的用户,而放弃使用先进的CSS属性,甚至放弃使用flexbox这样强大的工具。

增强或改善,往往意味着从底部开始。仅仅针对各种浏览器普遍支持的特性进行Web设计是远远不够的,这也是造成当今许多网页如此平庸的原因。我们使用新的CSS特性作为一种工具时,需要为使用新浏览器和设备的用户设计更多、更好的体验,就如Dan Cederholm所说“为新版浏览器用户提供增强的文档,以便让他们获得更加丰富的体验。”

在过去的几年里,Zoe提出了很多非常有指导意义的Flexbox实战案例,具体查阅:zomigi.com/publications/#pub-fwd。

因为我们首先开始为老旧的浏览器设计,所以离最终的卓越设计还差着十万八千里。

抖个机灵

我们绝不能被那些老旧的浏览器与过时的设备限制了创造力。相反,我们应该利用新技术,为每一位用户的每一次浏览,设计出最好的体验。这样我们可以充分利用一切能力更强的浏览器和新兴技术,实现更高和更优的设计。

我猜你现在肯定在想优雅降级的事儿?

踌躇不前

渐进增强的另一面——优雅降级——确保当样式和脚本不可用或无法被浏览器解析时,用户依然可以访问网页的内容。采用优雅降级方法,意味着网站的功能永远都是可用的,尽管一定程度上也许是低保真的设计,好在它的内容仍然可以访问。

优雅降级就够了么?

在老旧的或功能较弱的浏览器中,考虑可用性是我们能做的最基本,也是最重要的部分。但是优雅降级这个术语,意味着我们应该妥协。

去xx的优雅。

硬派的方法,是进一步推进优雅降级,并发挥我们的创造天赋去设计,不仅只针对设备的屏幕大小,而且也要考量其浏览器的功能。我们需要重新理解优雅降级,并面对今天这个领域所遇到的挑战。

如果要创建令人期待且鼓舞人心的网站,我们必须打破过往渐进增强和优雅降级的经验藩篱。只是鼓励人们去使用高性能或者对Web特性支持良好的浏览器,是远远不够的。

相反,我们应该充分利用新的技术,并且精心设计每一次用户体验,以便于充分发挥用户使用的浏览器的潜力。这可能意味着最终页面跟设计稿有很大不同,有时在不同的浏览器或设备上差异更大。

对于一些人来说,这种方法似乎太激进,甚至有些偏执。但这种方法更好地利用了当今的技术,充分释放创造性,令用户体验和设计达到更高水平,并让我们开发出更鼓舞人心和富有想象力的网站与应用。

拥抱新特性

在渐进增强和优雅降级的概念刚提出时,网络是一个与今日完全不同的环境。在浏览器新特性支持领域,两款竞争的浏览器间鲜有差异。而今天一切都改变了,优秀的现代浏览器支持各种Web特性,而老旧的浏览器的支持性很差,二者之间的鸿沟越来越大。下面是一些最新的CSS选择器和属性,在现代浏览器中有着稳定和良好的表现。

对任何元素的选择器绑定样式不再使用id跟class属性。

以多种方式实现透明效果,包括RGBa、opacity属性和CSS滤镜。

以更多的方式让背景跟边框一起生效。

使用偏移、旋转、缩放和拉伸,实现元素变形。

应用过渡特效,实现微妙的交互效果。

制作以前只能通过JavaScript或Flash实现动画的逐帧动画。

当前桌面浏览器对CSS属性的支持情况

CSS作为高自由度的创作工具,帮助我们实现了很多惊艳的Web体验。如果在创作中不充分利用它们,是多么短视和愚蠢啊。如今,在掌握这些技术的前提下,我们为什么不去使用这些属性呢,哪怕只用其中的一个。

那么到底是什么在阻止我们?只不过是几个陈旧的想法罢了。打破传统

渐进增强和优雅降级,都不应该被教条或不经大脑地应用在我们的Web设计中。相反,它们提供了一个新的起点,而现在,我们要重新定义响应式设计的原则,以适应不断变化的网络。


本文节选自《前端体验设计——HTML5 CSS3终极修炼》

内容简介

本书是Web设计畅销书《超越CSS》作者的最新力作,结合当前移动互联网下硬件的变化,以一个资深Web设计开发者的视角,将传统的工作方法与最新技术相结合,通过丰富的案例为读者展示了如何设计高效、充满创意的Web页面和应用,并通过挖掘高级布局方式、无障碍页面、语义化标签、高级CSS技巧等内容,快速提升读者的视野与设计开发水平。

此外,腾讯FERD团队(前端研发中心)在翻译本书的过程中,不仅严谨精准地表达出了作者的观点,还兼顾了国内行业的实际情况,帮助读者更加自然地理解原文的要义。

本书结构清晰合理、内容深入浅出,无论您是有一定经验的前端开发工程师,还是Web设计与开发的爱好者,本书都值得您反复品味,仔细吸收。

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页