转载

对Matthew Carver所著的《响应式Web》一书的问答

自从HTML5 变得流行以来，整个Web 平台取得了长足的进步，人们也开始将JavaScript 视为一门能够创建复杂应用的语言。许多新的API 纷纷浮现，而关于浏览器如何应用这些技术的文章也大量涌现。

这一系列文章 的视角更进一步，它们将关注于如何在实践中应用这些强大的技术，这并不是指创建多么酷炫的示例和原型，而是在第一线进行实际应用。在这个（后）HTML5 系列文章中，我们不需要响亮的口号，而是基于行业专家的实际经验，获得实践性的见解。我们也将讨论那些更进一步的技术（例如AngularJS ），并对web 标准和web 开发的未来进行定义。

发布在InfoQ 上的这篇文章是“ 下个时代的HTML5和JavaScript ”系列文章其中的一篇。你可以 订阅 本系列文章，通过RSS 获取文章更新的通知。

在Matthew Carver的著作《响应式Web》（The Responsive Web）中，作者以一种易于接受的方式，为读者介绍了现代化的web设计，以及响应式设计的重要性。

本书共分为三个部分。第一部分简明扼要地介绍了响应式设计是什么、它为什么会出现、以及现代化web浏览器中的哪些特性促成了响应式web的出现。这部分内容也谈到了“移动优先”这一概念，使用这种概念进行设计网站时，首先按照某个移动设备的断点进行设计，随后再转而设计它的桌面版本。

第二部分开始介绍如何设计响应式web。Carver首先讲解了一些如何为客户展示设计思想的技巧，而不是直接跑到代码的编写部分。他以导航的设计作为入口，介绍了设计模式的使用，以及如何创建响应式页面的思想。接下来的部分涵盖了如何进行实际的响应式设计的某些基本原理，以及用以展现信息的某些现代技术，例如web排版（typography）。

本书的最后一部分介绍了一些高级的技术，对于因各种浏览器的不同行为所造成的问题提供了有效的解决方案。在本书的结尾部分，作者对于设计的测试，以及如何进行性能优化方面提供了一些实际建议。

InfoQ有幸与Carver进行了一次访谈，围绕着本书的出版，以及当代web开发者所面对的挑战等话题展开了一次对话。

InfoQ：由于浏览器和移动设备的多样性，当代的开发者们所面临的挑战是令人难以置信的。对于那些为了跟上时代的脚步而拚命的开发者，你有什么样的建议？

Matthew ：首先我想说的是，坚持到底不要放弃。我想，对于怀有热情的开发者来说，“为了跟上时代而拼命”应该已经成为一种常态了。我们这个行业的发展速度是如此之快，对于任何人来说，如果缺乏一种非常专注的、主动适应的实践精神，是不可能始终停留在技术的前沿的。如果你觉得你正在拚命地追赶时代的脚本，那么你在工作上的表现或许已经非常出色了。

其次，现在已经有多种优秀的方式可以对各种设备和浏览器进行模拟了。如果你的工作室确实装备齐全，能够拥有所有最新的平板设备和移动电话，那自然再好不过。不过实现这一点对于许多开发者来说都不太现实。幸运的是，有一些替代方案可以选择。

Chrome的开发者工具中提供了一系列模拟器，可以将视点的外框大小调整为某种设备的尺寸，因此你可以任意地模拟各种设备的屏幕尺寸。这些工具还能够模仿触摸式控制等操作，因此你在Chrome中也能够了解在移动设备和平板上的浏览器上的行为。在安装Android SDK时，你将自动安装官方的模拟器，而Xcode中也提供了对应iOS设备的模拟器。

InfoQ：你对于Foundation或Bootstrap这样的框架有什么看法？它们能够成为开发者工具箱中的利器吗？

Matthew ：我从前对这些框架是相当迷恋的。在《响应式Web》一书中，我对Foundation进行了详细的论述，并把它当作一个优秀的原型工具推荐给读者。不过，我现在在生产环境中也开始使用它了。对于这些框架最常见的争议在于，它们或许会使整个设计过于臃肿，或是限制设计的能力。而我感觉，这些争议其实是对于设计流程提出了真正的要求。

随着我们的触角不断伸长，并且开始使用web来处理越来越多的实际生活中的问题时，网站的创建也随之变得越来越复杂了。因此当你在规划某个网站的创建时，有时候你也不确定产品最终会做成什么样。类似于Foundation这样的框架提供了一种预建的解决方案，它能够为你解决某些眼前需要处理的问题，例如“设定这个网站上的按钮外观”。因此你可以将精力花在更复杂的问题上，例如“有没有更好的方式来实现这个按钮”等等。我最终会将框架的70%至80%内容进行自定义，但使用Foundation或Bootstrap作为一个起点，能够为你节省大量的时间。

InfoQ：某些批评者认为：响应式设计会造成更多的带宽占用和内存问题（在移动设备上），你对这种说法是怎么看的？

Matthew ：这种批评有一定道理。但事实上，在web开发中，从来没有哪个大规模解决方案是完全不存在任何争议的。在处理web开发中的问题时，哪一个解决方案没有遭受过大量批评者的吐槽？就拿Swift来说吧，Apple的现金储备已经超过了某些国家的现金总额，并且为了改善iOS上的开发体验，它投入了多年的时间才打造出了这门语言，结果呢？对于它的批评很快就超过了对于它编译速度的赞扬。面对现实吧，作为开发者，我们总是面临着风险。如果你想知道拥抱变化到底能有多痛苦，就去找一个Flash开发者聊聊吧。

带宽和内存都是开支的一部分，为了完成某些任务，这些开支是必须的。开发者或许会因为各种各样的原因超支，但这不能构成完全放弃使用响应式编程的理由，太愚蠢了。这就是典型的“不会撑船怪河弯”。响应式设计是一种用于处理web上设备的一致性问题的工具，而设备的碎片化是一个现实的问题，不能说因为响应式设计不够完美，就意味着应当放弃使用它。

InfoQ：各种整合式浏览器工具（例如F12等等）在功能性与复杂性上不断发展。这些工具的哪些改进最让你感到振奋？对于响应式开发者来说，其中哪些功能是最有用的？

Matthew ：我认为构建工具的发展是令人难以置信的的，我知道以下这些工具已经不算新鲜了，但gulp和grunt确实大大地提升了开发流程的效率，完全可以用突飞猛进来形容。Compass凭空生成sprites的能力也令人惊叹，而诸如Live Reload这样的工具让整个前端开发流程进步了许多年。

InfoQ：响应式web在将来会产生什么样的变化？

Matthew ：这个问题很难回答。在《响应式Web》一书的附录中，我专门用一章的篇幅介绍了一种我称之为“上下文感知设计”的思想，它的想法是界面应该深度地适应用户的环境和模式。我发现在Code and Theory网站上也有这方面的讨论，它已经成为了一种“响应式哲学”。当我看到我们在没有互相联系的情况下，同时产生了相同的观念，看到了同样的问题，我觉得这就证明了这里确实有可以深入挖掘的地方。

我认为，我们已经拥有了所需的全部工具，足以让我们为web用户提供对UI更深层的关联，这种关联能够将用户的个人偏好、环境、时间和个性等内容集成到用户界面的设计中。

InfoQ：在设计和编码方面，你对于Macaw和Brackets这样的工具有什么样的看法？

Matthew ：它们都非常出色。我不清楚目前是否有机会在生产环境中使用这些工具，但任何一种工具，只要它能够帮助设计师看到在响应式设计中常见的一些问题，那总是好的。这种在设计中操作并移动绘图区域的能力，可以帮助设计师们在基于文本的浏览器中更清晰地表达出他们的意图。我看到越来越多的设计师们开始使用各种独立的工具集，而不是使用Photoshop这种庞大的整体应用程序。

InfoQ：你编写本书的主要动机是什么？

Matthew ：我希望能够做些什么，以解决在现代web设计以及不同职责的协作中出现的最大问题。我希望我写的东西能够让设计师阅读，并且对开发者所面临的挑战产生共鸣，同时开发者在阅读后也能够对设计师产生共鸣。我非常关注web，并且坚定不移地相信，我们能够使用web让我们的生活变得更美好。但前提是，我们所开发的系统能够解决人们的问题，并且让这些解决方案对达到平均水平的用户能够起作用。

优秀的开发者或许能够寻找的新的方式，它能够搜索房屋，或是购买各种打折产品，但如果这种系统是基于命令行界面的，那它对于用户有什么意义呢？另一方面，设计师也许能够绘制出美丽的界面模式，但如果软件不能正常运行，谁又会去关注它呢？具有这些技能的人应当通过交流而共同前进，我希望本书能够在某种程度上推动这种交流。

InfoQ：你觉得响应式设计对于当前web开发者的工作起到了怎样的影响？

Matthew ：我认为它的影响已经深入到了流程中的每个方法。你无法忽略用户设备的偏好，我想响应式设计已经找到了它在开发工作流中的位置了。对我来说，响应式设计已经是一种默认的流程了，要让我不用响应式布局作为默认方式，我还得调整一下我的思维才能做到。

注：在manning.com网站上可以使用info40rwd这个折扣代码以六折的价格订购《响应式Web》一书，这个代码目前已经被激活，并且绝不会过期。