响应式Web设计

原文地址：http://www.oschina.net/translate/the-new-rules-of-the-responsive-web

响应式Web设计(RWD)是Web领域的流行语。在推上搜索#rwd(Responsive Web Design)，可以找到同样多的内容和垃圾推文。这是新概念逐渐成熟的常见现象。我记得满页面Ajax的时候，Ajax和RWD一样落到这个境地。如今，已经很少人聊Ajax，不过像jQuery的js库类又烂大街了(in workflow)。

RWD如今也这样，到处都是。我有一个做杂志出版的朋友。她最近参加了一个会议。会议上一个一个很有名的新兴杂志的编辑就提到的了未来的趋势和响应式Web设计。杂志编辑可能在Web方面并不专业，但是也都知道这个词“响应式Web设计”(RWD)。

响应式设计蒸蒸日上，创建Web网站的方式已经改变。而且随着RWD从新词成为Web设计的常规部分，专业的我们工作方式也需要改变。出于这种考虑，我们需要确立一些工作的新规则。

规则 1：不要停留在“软式响应”(spuishy)

当某人要求你测试响应式设计的网站时，我们先做什么？你最可能改变窗口大小，观察布局怎么变化。我很可能用手机或者平板访问，旋转显示方向，或者测试页面加载速度。我整天都在调整浏览器。这是设计人员或开发人员的想法，不是用户。我做为用户访问，是没有耐心的。我不关心网站是否布局流畅；我只想要我要的东西。

ldquo;软式响应”就是网站的线性缩放。就是网站从宽到窄的变化就足够？响应式设计不在于缩放，而在于有一个核心内容，按照功能适量加载更多内容。假想网站必须在极端网络下为IE7制作一个手机元素(如App宣传页面)。那么手机元素就是你的核心，然后循着屏幕和功能放大内容。

(译者注：响应式设计不仅是布局的响应，而且是内容的取舍）

规则 2：不要想投机取巧

响应式设计很复杂的。我也想告诉你一些东西让它更简单，可是真没有。大多数负责开发响应式的人，都会向原有工作流程中添加工作。无论是做新内容交付，还是问开发人员设计是否适配响应式。

我有个朋友做了个响应式网站。她先在Photoshop里做了桌面大小的设计图。做了一些设计页面后，她需要展示平板或智能机的页面效果，就又要制作设计图。给客户展示后，她有需要一些创意设计调整。现在已经有50个PSD文件了。他花了很长时间来修正布局。

如果有要添加新设计，又会消耗时间，造成前后不一致。最好的处理方式之一就是向客户展示原型线框图。这样就可以照着框图只讲布局不讲设计。Foudation by ZURB是很好的线框图制作工具。

工作流中添加原型设计是不够的。为了响应式设计的成功，你还需要调整，这就进入了下一条规则。

规则3：拥抱变化

当我第一次构建Web时我仅仅使用了Photoshop和GoLive两个工具就可以完成，但是现在我至少要使用6个。我现在仍然使用Photoshop来创建页面中的图形元素，但对于页面中的其它设计我主要使用Sublime Text 2，并且使用iOS 6自带的Safari浏览器开发者工具来查看生产的页面元素。另外，我还使用Codekit来编译pre-processed CSS（比如LESS或Sass）以及在命令行中使用版本控制工具Git。

响应式Web设计也意味着设计方式的改变。相对于在Photoshop中画出整个页面这种方式，使用Samantha Warren’s Style Tiles工具可以更清晰的表达视觉设计。通过设计一个Web在多种布局下的视觉品牌和界面元素，你可以根据布局直接改变设计来创建响应式的Web原型。

CSS pre-processors对于任何响应式设计的工作都有巨大的帮助。简单的说，pre-processors可以降低网站构建的复杂性并且在CSS解释执行的过程中减少了许多样式重复继承的工作。针对这方面的工具，我个人更喜欢SCSS，当然LESS也是一个很好的选择，并且它有更加完善的文档。

规则4：记住你的原则

Web应该能够被任何可以访问互联网的硬件设备更加友好的访问，无论是固定设备还是移动设备、屏幕大或是小。——Tim Berners Lee

HTML和CSS本身就是具有响应性的。自HTML诞生以来，Web就试图提供足够的灵活性来适应一切可以访问互联网的硬件设备，并不是以前设计者和开发者都趋向于固定的布局而现在改变了。尝试给Web强加上固定的大小会限制Web创造出台式电脑一般的用户体验。

总结

响应式web设计是一个将你如何表达抽象为你想表达什么的设计原则，例如，NPR最近迁移到一个API驱动的内容模型中，通过使用API提供相应的内容方式，NPR可以在app和网站上走统一的一个方式了。唯一需要修改的就是表现层了。

这就是响应式web应该具有的一切，弄清楚你想表达什么，并且通过它驱动你实现如何表达。设计要迎合需求并且能达到赏心悦目的效果。

这就是响应式web设计所具备的一切，用户——创建的网站来为他们服务，无论什么情况都要保证他们可以访问内容。做一个可以适应小屏幕的网站仅仅是个开始。