响应式设计“忘记尺寸”

在互联网大潮的背景下, PC端加速向移动端迁移:2012年 12月底,我国网民规模达到 5.64亿,互联网普及率为 42.1%,其中手机用户占网民总数的 74.5%。2014年,智能手机全球出货量达 12.86亿部,同比增长 28.0%。截至 2015年 1月,全球接入互联网的移动设备总数超过 70亿台,几乎平均全球人手一台。

作为最主要的移动终端设备,智能手机仍然保持高速增长,皮尤研究中心(Pew Research Center)近日对调研公司 comScore今年 1月份的流量数据进行了分析,评出了美国最受欢迎的 50大新闻网站。

这些数据显示,在这 50大新闻源中,大部分网站的移动流量已超越 PC流量。

随着越来越多的智能移动设备加入到互联网中来,移动互联网不再是独立的小网络了,而是成为 Internet的重要组成部分。各种移动设备的发展导致每种移动设备都希望拥有适合自身的网页。但是 Web设计和开发几乎无法追赶上设备与分辨率的更新,但是如果不能满足各种设备下用户的使用,就会流失掉用户群,这可谓是一个巨大的挑战。

2010年 5月,伊桑 •马科特( Ethan Marcotte)在 A List Apart写了一篇开创性的文章,题为 Responsive Web Design,文中援引了响应式建筑设计的概念— —响应式架构( responsive architecture),并提出:物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构,还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产“智能玻璃”:当室内人数达到一定阈值时,这种玻璃可以自动变为不透明,确保隐私。

如果将这个思路延伸到 Web设计领域,我们就得到了一个全新的概念——响应式 Web设计。

我们何必要为每个设备各自打造一套设计和开发方案?和响应式建筑相似, Web设计同样应该做到根据不同设备环境自动响应及调整。马科特利用三种已有的工具:流动布局、媒体查询和弹性图片创建了一个在不同分辨率屏幕下都能漂亮展示的网站。

响应式设计的核心正是使用百分比布局创建流动的弹性界面,使用媒体查询来限制元素的变动范围。响应式 Web设计的理念是:页面的设计与开发应根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本还是 iPad,页面都应该能够自动切换分辨率、图片尺寸及相关脚本的功能等,以适应不同设备。换句话说,页面应该有能力自动响应用户的设备环境,响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这样,我们就不必为不断到来的新设备做专门的版本设计和开发了。我们可以将不同联网设备上众多的体验,当作是同一网站体验的不同侧面来对待,而不要为每种设备进行单独剪裁而使得设计彼此断开,这才是我们前进的方向。

随着智能终端的普及,响应式网页设计被许多网站广泛使用,而且其优势和趋势均已经被普遍认可。

开发、运营成本低:相同的页面针对分辨率的不同、设备环境的不同进行了一些不同的响应式设计,所以在开发维护和运营上,相对同时开发多个版本的成本会降低。
兼容性好:移动设备的尺寸参差不齐,版本定制通常只适用于固定规格的设备,如果新的设备分辨率变化较大,通常不能兼容,若要开发新的版本,则需要时间,但是响应式设计可以提前预防这个问题。
方便改动:响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。