响应式设计(Response Web Design)浅谈

响应式Web设计,这个话题可能是当下Web设计领域里讨论和应用比较多的话题了,为什么要响应式Web设计?什么是响应式Web设计?

Web发展迅速,各种应用和服务层出不穷,现在打开电脑,可能使用最多的程序应该是浏览器了,访问不同的网站,可以满足人们购物,社交,获取新闻资讯,娱乐,等等需求。然而近几年内,移动设备快速崛起,移动互联网慢慢进入人们的生活,预计未来5年内移动设备的使用度会超过桌面计算机。所以需要您的网站不仅要在桌面计算机大尺寸屏幕上可以为用户提供友好的UI和用户体验,同时在小尺寸屏幕上也应该可以提供一致的用户体验。使得用户可以在桌面大屏幕上和移动小屏幕上平滑的切换使用,同时没有任何的不适应感觉。

(移动设备趋势:http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/)

要网站在桌面大尺寸屏幕上和移动小尺寸屏幕上提供一致的用户体验,最直接的方法就是为每种设备及分辨率制作一个网站或者特定的页面,使得移动用户在这些页面里取得平滑友好的用户体验。但是到底有多少不同的移动设备和屏幕分辨率呢?这种方法需要投入多少成本能?

(早先的数据:2005至2008年市场中的400余种移动设备的统计情况

http://www.quirksmode.org/mobile/mobilemarket.html)

这份统计结果已经比较早了,随着时间的推移,又有很多移动设备投入市场,为每种设备及分辨率制作一个网站或者特定的页面,这应该是比较大的工作量,是比较耗时耗费资源的。是否可以只做一个网站一套页面,既满足桌面大尺寸屏幕,同时也可以满足各种不同移动设备的小尺寸屏幕。

因为有了这个问题,才有了响应式Web设计这种方案:一个网站能够兼容多种移动设备屏幕尺寸,而不是为每种屏幕尺寸做一个特定的版本。这个概念可以说是为移动互联网而生的。国外已经有一些这样的应用例子了,如: http://foodsense.is/, 此网站在Android 上的效果:

不采用响应式Web设计 news.sina.com.cn 在Android上的效果,需要用双指进行缩放才能友好浏览:

foodsense.is 在其它设备分辨率下的情况:

(iPad1/2 1024X768 横向)

(iPad1/2 1024X768 纵向)

(iPhone4 320X480 横向)

(iPhone4 320X480 纵向)

(ASUS Galaxy 7 480X800 纵向)

foodsense.is 可以在各种设备分辨率下,根据分辨率的不同做出响应,对菜单和图片进行重新布局,来满足显示的需要。这种技术就是响应式Web设计,这个概念是Ethan Marcotte在A List Apart发表的一篇文章"Responsive Web Design" (http://www.alistapart.com/articles/responsive-web-design/) 中援引响应式建筑而得名的: “响应式建筑(responsive architecture),物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构,还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产"智能玻璃":当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。” Web借由建筑上这个概念,当设备分辨率发生变化时,根据设备分辨率,调整菜单,图片,文字,等其它页面DOM的状态和布局,使得页面仍然可以给用户提供友好的使用体验。

 

未完待续……

时间: 2024-10-24 08:10:56

响应式设计(Response Web Design)浅谈的相关文章

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景.本文聊一聊如何实现.   如何让自己的网站也响应式Web设计,可以响应设备的分辨率呢? 根据Ethan Marcotte的文章,和相关的实践,已经总结出了一些实践方法.(本文最后列出了所引用的文章和工具)响应式Web设计是想把固定的(Fixed)设定(位置定位,长宽大小)变为相对的(Relative)设定,其包括三个主要手段: Fluid Grid (流体表格), (Liquid Image) 液态图

移动互联网之响应式设计

在公司的做的关于"移动互联网之响应式设计"分享,以下简要内容,记录如下 1.移动互联网的现状 2.Web App和Native App 之争 Web App 优点 开发成本低,周期短 零部署,方便更新和升级 缺点 性能.用户体验受制于浏览器的实现 难以应用手机的高级功能,如照相.重力感应等 Native App 优点 能最大化挖掘性能潜力 能够运用手机的所有开放特性 能够不断改善用户体验 缺点 平台差异大,开发难度大,成本高.周期长 让用户安装客户端是个不低的门槛(我不会为了看你的网站

移动网站新趋势:响应式设计

[搜狐IT消息]7月17日消息,科技博客Business Insider旗下研究机构BI Intelligence发布报告,描述了 响应式设计的 优缺点. 作为一种能够 缩放适应不同大小的屏幕的网页设计做法,响应式设计(Responsive Design)正日益成为最受推崇的移动网页优化方式.在谷歌公司于2012年中期指出,响应式设计是优化移动网站的最佳方式之后,这种设计做法的地位得到了进一步巩固. 随着iPhone.iPad和Android手机的普及,网站主办方发现,网站在移动端应当带来与桌面

深聊MATERIAL DESIGN复杂响应式设计

  2011年,Gmail邮箱的按钮变得更加扁平化.2012年,Google引入分层的卡片设计,使用更多的空白和精心设计的层次排版结构.经历了几年的迭代和提炼,Google寻找到了一种可以贯通的理论体系,即把系统内的各种设计都规范成一种变形的纸片,并套用现实中纸墨的物理模型进行交互,这就是2014年Google I/O大会隆重发布的Material Design. Material Design提出了平面像素的Z轴概念,通过纸片在物理世界中形态的抽象和提炼,定义了各种信息层级和常用状态的表达方式

响应式web设计:WEBJX收集50个响应式设计工具

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

学习响应式设计:如何实现响应式Web设计

文章描述:淘宝响应式WebUI设计实践. 感谢贷岩的邀请,我在本期奶茶会上做了"响应式设计实践"的分享,是接着上一次的话题进一步讨论"如何实现".响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计?简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等. 响应式设计听起来非

Web响应式设计案例:响应式设计开发Lot18

文章描述:有关 Web 响应式设计的 7 点启发. 开发者视角中的优秀并不意味着用户也有同样的感受.国外知名电子商务网站 Lot18 的高级前端开发人员Vince Allen,特别撰文讲述了采用响应式设计开发Lot18的背后故事和7条经验. 全文如下: 为Lot18 这样迅猛发展的电子商务公司工作是件激动人心的事情.知道几个月后,在开发团队面临一项重大决择的时候,我们狂热的情绪才逐渐平复下来.我们的困扰是:是 在网站的原有引擎(该引擎很有可能在网站发布几个月后就难以为继)上继续开发还是重新搭建全

WEB响应式设计:响应式Web设计的CSS框架分享

文章简介:Web布局设计新方式-响应式设计,应用越来越广泛,在这里为大家分享10个用于响应式Web设计的CSS框架,让您的开发工作越来越轻松. Web布局设计新方式-响应式设计,应用越来越广泛,在这里为大家分享10个用于响应式Web设计的CSS框架,让您的开发工作越来越轻松. 1) Less Framework Less框架是一个用于设计自适应网站的CSS网格系统,它包含4个布局和3套预设布局,这些都以一个单一网格为基础.Less框架的目标是更高效地创建多布局网站,并在布局之间保持一致. 2)

关注Web响应式设计的局限和误区

多设备测试响应网站 我们已经讨论了很多关于如何创建响应网站的思想-使用灵活的布局.媒体查询.图像缩放及其它一些技术,总之,使网站在各种屏幕上都能很好的运行并且美观.当前响应式设计受到了很大关注,知名web网站.net在首页有60%的文章在讨论这个主题. 然而,有时关注一下web响应设计中的禁忌也是大有裨益的.最近,响应设计大师Brad Frost在.Net杂志上发表了响应设计人员最常犯的五种错误(WebAppTrend正在翻译中).其中提到了这样的错误:利用特定尺寸的屏幕来触发布局变化和避免将单