响应式Web设计

标签: Front-end UX Fluid Images Media Queries RWD | 发表时间:2012-03-09 13:41 | 作者:葵中剑
出处:http://www.swordair.com/blog

响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局。

虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:

  1. 响应式Web设计50个例子和最佳实践
  2. 21个响应式Web设计工具
  3. 响应式Web设计的模板和框架

这些资源,仿佛都是一下子冒出来似的…这要归功于IE9的发布,从而使得主流浏览器上升到全部支持Media Query的程度。

然而眼花缭乱的资料堆里,可供细细品读的资料其实也就那么几篇: ETHAN MARCOTTEResponsive Web Design,以及其引用的 JOHN ALLSOPPA Dao of Web Design

无论是在UX角度还是维护角度,RWD的优势都显而易见。虽然很多移动设备都默认就可以缩放页面,但是RWD就意味着最少的缩放,最少的滚动,最少的用户行为。我们不必要求用户拨动他们的手指来调整页面的舒适度,因为这种舒适度是我们一开始就设计好的。

作为设计师,RWD算得上是一种限制,甚至一些设计的权利已经被前端所剥夺。为了达到良好的自适应效果,很多设计点上不得不做出偏向代码的妥协。所以可能单纯的视觉设计师可能并不喜欢RWD。然而对于前端来说,RWD非常迷人:一处代码,却处处不同。开发人员只要开发维护一个版本,就能使页面在不同的设备里均呈现良好的访问性效果,何乐而不为?

一旦牵着到RWD,就不可避免的使得页面设计本身趋向相似。看看那些RWD的页面就会发现,很容找出他们的共同点:流式的布局、网格化的排布以及相对而言死板的布局。之所以如此,是因为对于RWD而言,流体图片( Fluid Images)和流体网格(Fluid Grids)是必须,完善的RWD视觉设计里必须以它们为限制。

而随着RWD的各种或浅或深的应用,一些非常常见的IE trick的弊端也开始显现。

比如,IE低版本的“浮动双倍边距bug”是如此常见,以至于我们几乎是可以闭着眼睛在浮动元素上添加 display:inline; 来触发IE的haslayout来修正。由于浮动元素独自成块并构建自己的块格式化上下文,所以这句 display:inline; 的有无对现代浏览器来说毫无影响。当然问题也就随之而来,在 Media Query 里仅仅取消这个元素的浮动是不够的,还需要同时将 display 置回 block。即使是经验丰富的人也可能在这里浪费一些时间,因为他们可能意识不到一个长久写惯的trick会在这时候捅你一刀。

最后,虽然RWD如此流行并且是个好东西,不过对于Web而言也并非必须。网站依据自身特点可以酌情引入部分这种功能,以此来改善移动设备的浏览体验,毕竟有些站点本身就不适合做RWD的考量。

Related Post:

相关 [响应式 web 设计] 推荐:

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

自适应网页设计/响应式Web设计

- - HTML5研究小组
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端. 于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页. 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.

50种响应式web设计的奇妙工具

- - Web App Trend
在您开始着手响应式站点的搭建之前,如果能拥有强有力的开发工具会让您的世界另有一番风采. 本文中Denise Javobs和Peter Gasston推荐了50种强大的工具来支持您建造响应式站点的过程. 在Ethan Marcotte的文章 《响应式web设计》以及他的 畅销书中最早首创介绍了建设响应式站点需要的三个元素:.

谈响应式web设计代码实现

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论. 总结下来,响应式比之前想象的要复杂得多. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式文件. 一个模块的mq样式整体放在这个模块的样式的之后,符合层叠逻辑,也同时以免被层叠. 祈求在一个相应点上同时做变化几乎是不可能的,因为版式中间的变化,无论是视觉还是具体的编码人员不可能掌握所有细节.

响应式的WEB设计(三)- 桌面及移动设备的网页性能

- - 博客园_首页
移动设备由于受到带宽、处理器运算速度的限制,因而对网页的性能有更高的要求. 究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢. 这些元素应该做何处理以提升页面在移动设备中的整体性能. 是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢. 2、移动设备中网页的性能检测. 3、移动设备网页的性能瓶颈.

与瀑布模式说”再见”:教你5个步骤实现响应式Web 设计

- - Web App Trend
恭喜你终于使领导们信服:你的下一个Web 设计项目需要进行响应式设计. 虽然说服他们相信是一件非常艰难的事情,但是你现在不能在荣誉上休息. 现在项目最关键的问题是: 如何带领你的团队去构建响应式设计. 你可能熟悉典型的“瀑布模式”的开发过程:从系统需求分析开始,然后着手设计,接着开始前后台开发,最后进行评估并且实施.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.