内容
如今，似乎每个人都在谈论响应式网页设计，这是有充分理由的。随着具有网络功能的设备的数量不断增长（每种设备具有不同的功能），不再需要建立固定宽度的网站。
事实是，从来没有。然而，直到现在，设计经验时仍被认为是最佳实践，这些经验围绕屏幕分辨率，带宽或输入方法进行了许多假设。如果您曾经设计过一个960px宽的网站，而只是在朋友的小屏幕上网本上查看它（是的，我是从痛苦的经历中写信的），那么您会明白为什么这不是一个特别聪明的方法。现在，随着智能手机和平板电脑的加入，很明显，我们的传统方法已不再适合目标。
值得庆幸的是，CSS媒体查询的出现以及人们日益认识到网络本身就是一种媒介，这意味着我们开始接受平台的真实性质，并接受平台的普遍性是一种优势，而不是劣势。
在接下来的五天内，我将指导您完成一项可识别此事实的技术： 响应式网页设计。它由Ethan Marcotte开发，结合了流畅的布局，灵活的图像和媒体查询，可帮助我们构建可优雅地适应其遇到的任何环境的网站。
我将通过向您展示如何建立一个简单的媒体库来演示这种方法。在我的示例中，我将创建一个小型网站来记录我最近在美国进行的一次公路旅行，但是可以根据自己的需要自定义代码和设计。
为未知而设计
本教程的大部分内容将围绕响应式设计的开发方面。但是，在深入研究任何代码之前，让我们花点时间思考一下如何设计一个可以想象具有无限布局的网站。
现在，我很幸运能够设计界面 和 开发使它们真实的前端代码。当然，这并不是一项独特的技能-如果您为自己工作，那么可能会一样。但是了解在进行流体设计时内容如何适应和回流当然是有利的。
我还作为一个较大的团队的一部分工作，在这个团队中，我的角色更加专业。在这样的环境中，视觉设计师可以专注于将线框转换为吸引人的，引人入胜的（签名，像素完美）的片段。而且，将开发人员分开放置并将这些布局转换为精简高效的标记和CSS并不少见。
但是，一旦我们开始评估设计如何适应不同的环境，这种线性且分离的工作流程就会迅速崩溃。与任何新工具或新技术一样，我们还应考虑更多协作和敏捷的工作方式。设计响应式网站时遇到的许多最棘手的问题都可以简单地通过对话，实验和迭代来解决。
务实的设计方法
这并不是说设计师没有余地去思考设计如何在任何特定设备的范围之外工作。
在Clearleft，我们从桌面的角度启动视觉设计。我们首先定义总体设计语言和视觉美感，通常将围绕核心内容的初步探索作为基础。例如，如果我们正在设计美食场所，那么我们将从食谱页面开始；对于新闻网站，是一个故事页面。
这不仅是网站上的重要页面，而且可能包含足够的结构化内容，以供我们构建印刷调色板。我们还将考虑布局可能如何适应-即使在此阶段，它只是在我们的脑海中。
对设计进行压力测试的一种有用方法是获取这样的页面，并将其调整为适合较窄（〜320px宽）的屏幕。您可能会发现，需要重新考虑设计的某些方面，以使其在此宽度下工作。这里有些例子：
- 版式： 大标题可以在较宽的布局上很好地工作，但是在较小的屏幕上，它们会占用大量垂直空间，因此需要额外的滚动。随着行长的变化，您还应该考虑行高和其他印刷处理。
- 链接： 您的设计将如何在触摸屏设备上工作？尽管我们还没有一种简便的方法来检测这些问题（这意味着我们应该在设计的所有方面都加以考虑），但为更窄的屏幕进行设计可以使我们有机会思考链接和其他交互式元素的目标区域。 iOS准则建议这些像素至少为44像素/点平方，这是一个不错的目标。
- 导航： 在响应式设计中，这可能是最笨拙的组件，尤其是在您的站点具有多个部分且层次结构较深的情况下。布拉德·弗罗斯特（Brad Frost）总结了当前正在考虑的一些不同导航方法。
- 多余的内容： 是否不需要某些内容？是否仅在某些情况下需要显示其他内容？我不主张根据用户恰好使用的设备来隐藏内容，但是条件加载（本周晚些时候将要介绍）之类的技术可以帮助我们提供较小的页面，这些页面仅在需要时才加载补充内容。
设计两种截然不同的布局可以强化设计可以适应的思想，同时尽早消除潜在的麻烦。虽然这听起来像是工作量的加倍，但请记住，我们并不是将每个页面都设计成像素完美的精度。取而代之的是，我们专注于构建可扩展的设计语言-一种在我们开始以代码形式实现时会不断发展的语言，而另一种则基于各个模块和组件。
成为不可知的布局
毫不奇怪，对于一个历史上一直将网页视为印刷品的行业来说，固定宽度的布局已经渗透到我们生产的许多可交付成果中。在我们开始设计适应性强的媒体时，正在考虑采用新的方法，使我们能够在认识到媒体的流动性的同时解决问题并交流思想。这是我的一些最爱：
- 页面描述图： 虽然线框通常可以暗示布局（并因此假定某种类型的设备），但是页面描述图消除了这种假设，而是描述了按优先级排列在文档中的各个组件。
- 样式图块： 与客户交流设计想法时，我们发现自己展示的是“网站图片”。如果我们不小心的话，客户会正确地要求查看一些概念，这些概念也可以演示设计在其他设备上的外观。这会迫使我们陷入为多个设备生成多个页面的不可持续的局面。萨曼莎·沃伦（Samantha Warren）考虑了这个问题，并提出了样式拼贴。它们位于情绪板（但不太模糊）和完全实现的伴奏（但不太精确）之间的某个位置，并帮助我们交流排版，按钮样式和标头广告处理。他们还鼓励与客户进行更成熟的讨论。
- 动员设计游戏： 在协作设计研讨会中，此练习可以很好地进行。在本练习中，每个人都在便利贴上写下可能会出现在特定页面上的元素。然后将它们按重要性顺序粘贴到墙上，就像它们在手机上线性显示一样。由此产生的讨论可能会得出一些令人惊讶的结论。例如，您可能意识到导航不是页面上最重要的组件。这可以继续进行设计，在该设计中，页面顶部的跳过链接链接到页脚中的导航。
当然，我们已经在使用这些工具的空间仍然很大，但是在广义上设计网站时，我们需要记住，布局已不再是已知的。
逐步编码
值得庆幸的是，由于我们已经完成了艰苦的工作，因此我们无需担心示例中的视觉设计！相反，我们可以专注于将我们的设计编码到一个完全响应的网站中。
在我们开始之前，还有一件事。重要的是要记住我们所使用的媒介的基本原则：普遍性。这不仅意味着要为当今的支持Web的设备构建产品，而且还要确保与昨天和明天的设备兼容。约翰·奥索普（John Allsopp）在他的《未来60亿》一文中描述了这一原则为何如此重要：
“接下来的60亿儿童是印度，非洲，中国农村地区的儿童，那里的电源和网络可能会断断续续。这是苏门答腊一个拥有十年历史的Wintel盒子里的人。这是说多种不同语言，数十种不同语言的人们书写系统：是家庭中第一个能够读写的人，而全世界有20％的人不会读写。’
我们可以通过查看我们行业中流行的各种方式（希望更好的用词）来追踪对网络的理解：网络标准，可访问性，不干扰JavaScript…都是同一主题的变体：渐进式增强。响应式网页设计也是如此。建立一个 真正地 响应式网站是要建立一个不仅向后兼容，而且对未来友好的网站。
深入了解加价
好的，上面的序言已经足够了，该打开文本编辑器了。我们的设计师为我们提供了面向桌面的设计，并且非常友好地提供了示例，说明如何在较窄的视口中显示这种外观。
可能需要单独编写这些代码，但是我将建议采用另一种方法。通过将构成设计的单独的组件（或样式）放置在单个页面上，我们可以创建样式组合。这使我们可以在任何页面布局范围之外开发组件，并为以后的回归测试提供一些参考。让我们在几种不同的设备中查看初始标记：
查看我们的标记模式组合
好吧，我该死的-我们已经有了一个响应迅速的网站！我们的内容正在适应每种设备的局限性，例如精美的新iPad或废弃的功能手机。它甚至可以在Lynx之类的纯文本浏览器中使用。
由于普遍性的基本原则，网络是 默认响应。太好了，但这也意味着从现在开始我们对代码进行的任何操作都可能会损害这种本机的适应性。
明天： 我们将认真研究并开始应用响应式设计的第一方面：版式和流体网格。
