什么是Responsive Web Design

9 月 13, 2011 发表于: 设计杂谈. 评论

Sponsor

Responsive Web Design 这个概念，最知名的文章当然是 A List Apart 的这篇。还找不到什麽很好的中译，大致上的意思是「适应性网页设计」，也应该可以说成「弹性调适型的设计」，还有些人译成「自适应网页设计」，这个到底哪个最适合呢？我想也没必要具体讲述，自己了解就好，另外达人上次分享的《15个Responsive WordPress主题》就是采用适应性网页设计。

绝对重要的原因是近年来行动载体的风行，当然就是 iPhone 与 iPad 分别带来的智慧型手机与平板电脑，除了萤幕较小，也必须以手指触控操作，所以改变了很多东西。这似乎又可分成两种趋势，一种是 RWD，另一种就是 Mobile Design，类似以 jQTouch 或 jQuery Mobile 这些框架特别製作专属的版本。

由于 RWD 实际上更改的是外观，也就是 CSS 所控制的佈景主题，使用者实际上载入的还是同样的一张网页，所以有人认为这对于行动载体，尤其是手机来说，还是容易造成载入网页时间过久的问题。调製行动专属网站，就是连送出的资料都经过筛选或处理，效能可能更好。当然这两种差别，在以应用程式（Web App）为主的网站会比较明显，以内容网站来说，RWD 还算是一种有效且便利的做法。

实际上，网页设计本来是「原生 Responsive 的」，我们本来就是为了适应电脑萤幕的尺寸，刻意做成某些范围内的尺寸，也是因为比较好製作的缘故吧。我的原意并非深入研究网页设计，而是偏向电子书与数位内容的呈现，所以更觉得这是件有趣的事。

例如 EPUB 被认为具备「ReFlow」的能力，事实上却只是网页天生的特性罢了。但是为了要让版面更好看、更易读，结果还是得针对不同大小的萤幕特别去调整 CSS，RWD 实际上就是「多种萤幕设计版本」的意思。这也跟目前 iPad 上的数位杂志很类似，即使是直横两种，其实还是很接近两个独立的版面。

完全流动、自动适应、甚至自动找到最适排版的方法，老实说我觉得是不存在的，至少不会是百分百。

一本电子书如果递送到读者手上，你不知道读者会在怎样的设备、多大的宽度萤幕上阅读，目前这些事通通交给阅读系统去完成，阅读系统如果预设值设定得不错（例如 iBooks），阅读体验或许不差；如果套用得很糟糕，作者、出版社却也无计可施。由于单独的数位内容并非一个独立的应用程式，所以不能用 Mobile Edition 概念去处理，剩下来的解决方法，其实就是 Responsive Design。

Adobe Folio Digital Magazine 实际上就是这样，你必须选择至少直横任一种排版基础，或是两种都做。至于拿到七吋的 Android Tablet 上怎麽办？当然是再做一种排版（不对，是直横各一种…）。

单纯的 Media Queries 对应不同 CSS 样式表，提供最基本的逻辑，你可以完全独立思考、甚至让两组人分别发挥创意，但成本很高。加入类似 CSS Grid 的概念，是在不同之中整理出一些共同之处，试着让一部份工作由系统能力处理，设计者要将焦点摆在「差异点」上。
改篇于此源文：Responsive Web Design
图片链接http://dustinsenos.com/

赞助商链接