现在的位置: 首页 > 综合 > 正文

新兴的网页开发设计模式-响应式WEB设计

2013年05月06日 ⁄ 综合 ⁄ 共 1499字 ⁄ 字号 评论关闭

移动设备越来越趋于互联网使用的中心,

笔记本、智能手机、上网本、iPad、电子书等各式各样的设备,尺寸/分辨率不尽相同。

这为网页设计带来了新的挑战,也带来新的机遇,有可能“一次编写,随处呈现”吗?

 

Ethan Marcotte在2010年提出响应式WEB设计的概念,

简洁、响应式WEB设计是一种与设备无关的内容呈现方式,能在桌面、移动设备以及宽屏设备上有同样好的表现。
本文先是简单的描述了响应式WEB设计在前端设计栈中的位置,然后描述了其构成。

为什么响应式WEB设计很重要?

如今,我们通过各式各样的方式访问内容:台式机浏览器,传统手机,智能手机,电视,游戏平台,RSS订阅,本地应用程序。
我们可以想象以后的设备的尺寸和分辨率将会更加五花八门。而且人并非唯一获取信息的对象。 网络爬虫以及WEB服务也在访问内容,建立索引,进行聚合等。
迅速增长的互联网设备使得开发相关的网页和应用程序变得相当困难。响应式WEB设计就是为了有效的解决这个问题而提出的。
它主张这样的一个实现:不依赖于对设备类型的了解,不特别针对设备进行优化,不像APP那样特定于某个设备。
响应式WEB设计能够自适应设备,使得跨设备内容访问比任何一个单独的组织的特定实现都更通用,它甚至可以覆盖到将要推出的设备。

响应式WEB设计是Drupal 8的一个核心理念,这不单单是一种技术,也不单单针对移动设备,

它是一种新的WEB设计和开发模式,如10几年前的CSS带来的内容和样式分离一样意味深远。

 

前端设计栈

让我们先感受一下响应式WEB设计在实际中是什么样子的,
http://sasquatchfestival.com/网站提供了这样的一个例子,既可以在大尺寸上表现良好,也可以在小尺寸上表现良好。
您不需要各种尺寸的设备,只要观察一下在调整浏览器窗口大小时,该网站的显示效果,
*)图片、字体是如何自适应调整的
*)布局是如何从多列变成一列的
*)导航栏是如何从8个变成4个的
注意布局在变化中是如何逐步调整的。

网站并不了解设备浏览器agent信息,因此在处理页面请求时并未对数据和类型做特殊处理,
每个agent得到的是同样的基本页面-而显示或多或少是艺术裁剪的效果。
唯一的例外是在CSS中引用的背景图片,被定制成目标设备大小。

响应式WEB设计是数据的基础呈现,在一个依照目标定制程度来衡量的设计栈中,它仅处于原始网页的上面。

响应式WEB设计只是原始文档某种程度上的样式化,因此结构良好的文档是任何自适应设计的基础。

在响应式设计之上,我们开始关注代理,针对小屏幕用户设备进行页面内容优化,以达到更好的终端用户体验。
为了优化内容,服务器必须知道请求代理是一个小屏幕设备而且业务逻辑层需要针对检测到的具体的设备信息来呈现简化或优化的内容。
有一些服务如 mobify.me 就是针对这一栈层的。

在某些情况下,设计必须针对某种或一系列设备做出优化。
一个有效的方法是直接利用终端浏览器所提供的特性,
比如苹果Safari,它定义了很多基于webkit引擎的CSS属性。
另外一种方法是通过某些服务把响应式WEB设计包装到基于本地设备的设计中,比如PhoneGap
第三种方法是直接按照目标设备的特性编写特定的代码,比如iPhone的webkit-min-device-pixel-ratio属性,但第三种方法局限于某种特定的设备。

前端设计栈的最上层是和网页设计基本无关的APP,APP网络交互少,而最大程度利用单机功能进行优化。

一个好的技术策略是,把响应式WEB设计作为网站一般数据访问的首要实现,在时间和预算允许的情况下,再考虑把设备优化和本地应用考虑进来。

-iefreer-

抱歉!评论已关闭.