上周，我与一家设计代理机构进行了交谈，他们即将开始他们的第一个响应式网页设计项目。 听起来很像应用程序。 他们有兴趣了解我的经验，对项目的期望，过程是什么或可能是什么，交付成果应该是什么，需要注意的事项等等。
以下是我们讨论的内容
- “移动优先” 的理念特别适合从头开始的 Web 应用程序。 首先为小屏幕设计意味着要对什么最重要以及什么可以被裁剪做出艰难的决定。
- 从那里开始，随着屏幕宽度的增加，考虑动态加载您需要的任何其他内容。 这意味着小屏幕（通常是具有较慢互联网连接的移动设备）不会下载不需要的东西，这可以保持速度。 以下是一种在 保持 CSS 中媒体查询的情况下 执行此操作的技术。 演示.
- 媒体是一个重要的考虑因素。 确保您的图像/音频/视频按比例缩放，并且您不会（例如）向移动设备提供桌面大小的图像。 这尤其具有挑战性。 有几种 响应式图像解决方案 可供选择。 视频更难，但您可以 至少使其流畅.
- 在设计时不要忘记 X 轴（左右）。 我认为，无论您在网站上的哪个位置，从侧面滑入的导航都是一项非常好的技术（类似于 Facebook iPhone 应用程序）。 以下是一些其他您可以查看的 响应式导航模式。 移动设计不仅仅是挤压东西以适应一个长的垂直列。
- 您的工作流程可能会比过去更加迭代。 制作模型，对其进行编码并将其放入浏览器，找到特别困难的地方，然后让每个人回到桌旁并解决这些问题。 重复。
- 响应式设计并不总是答案。 有时专门的移动网站或应用程序是最好的选择。 虽然在从头开始一个项目时，它通常是最好的选择。 另外，Google 喜欢它，并且使用单个代码库很好。
- 不要考虑确切的屏幕尺寸。 也许制作一个小、中、大设计模型，并以此为基础。 “断点”（设计通过 媒体查询 发生改变的地方，超出 流体网格 的范围）应该是“缩小到它断裂，在断点处设置断点，缩小到它断裂，在断点处设置断点，重复”。 并且不要忘记 垂直媒体查询.
- 提供给客户的“交付成果”绝对应该是完全交互式的 HTML/CSS/JS 网站，即使他们将自己进行实际实施。 交互性太多，可能的屏幕尺寸太多，无法使平面设计模型有效。
- 大量响应式网站的画廊：http://mediaqueri.es/
- 尽可能使用“真实”的数据/副本/媒体。 即使您 伪造它。 如果您伪造它，请使用真实的外观，而不是 猫.
- 在真实设备上进行测试是一个好主意。 Adobe Shadow 可以帮助您更轻松地做到这一点。
- BrowserStack 提供了许多可以进行测试的虚拟设备。
- 记住要考虑交互。 桌面有键盘和鼠标，移动设备有触摸和手势。 例如，如果您要设计一个拖放交互，那么它需要根据环境进行非常不同的实现。
- 悬停完全被淘汰。
- 有时 HTML 中的“源代码顺序”会使重新排列东西变得很麻烦。 以下是一个 巧妙的小技巧 用于移动东西。 并且如果您有兴趣， 未来.
- 如果您还没有阅读过，经典读物是 这篇文章 和 这本书.
很棒的写作！ 对于响应式网页设计的新手来说，这里有一些很棒的链接！ 我还想建议 这个网站 用于测试响应式页面。 当然，它不是原生，但它是查看您的网站在不同宽度下的外观的良好起点。
很棒的写作。 我真的很喜欢你最近一直在做的这些“笔记”式博客文章。 “不要考虑确切的屏幕尺寸”这句话真的引起我的共鸣。 有时我会对响应式设计着迷，而我认为只需 3 个左右的通用设计似乎就能满足大多数项目。
为什么不是小猫？
我喜欢 placekitten
是的，我一直认为 Chris 是这个行业里的思想领袖。 每次我在谷歌搜索东西，然后看到他的文章，我就知道我只需要点击那篇文章。
直到，他说不要 placekitten。
什么？ 你是谁？ 你对 Chris 做了什么？
我有一个关于像 Google 日历或 Eventbrite 的购票应用程序这样的 iframe API 的问题：它们根本没有开发为响应式的，如果你将它们设置为百分比宽度，当屏幕尺寸低于某个点时，应用程序就会崩溃。 例如，Eventbrite 的 API 在低于 400 像素时会切断应用程序的右侧，因此您无法购买门票。 或者，Google 日历在低于 300 像素时会开始不断垂直增长。 如果您在 y 轴上拉伸 gCal，可以解决这个问题，但这看起来很糟糕。 有人有解决这类框架的办法吗？ 视频通过某种笨拙的 CSS 解决方案完成，所以希望有或将来会有针对 iframe 的解决方案。 还是我做错了什么？
您尝试过 fitvids.js 吗？ 它在 iframe 中的视频上效果很好，我想知道它是否适用于所有类型的 iframe……
PS 我还没有真正尝试过，但看起来它效果很好（而且它是免费的，而且 Chris 开发了它；））
例如，您的 Facebook 推荐 iframe API 也崩溃了，当它打开共享窗口时，它会切断它，您无法用您的评论来共享它，只能推荐。 我喜欢响应式设计，也喜欢移动优先的理念，但被 iframe API 困住了……
感谢您的写作，我刚开始学习响应式网站，这确实很有帮助。
不错的写作。 我期待着不再说响应式设计，而是再次说网页设计的那一天。 我想这需要几年时间才能实现。
另外，我喜欢动画媒体查询，虽然用处不大，但可以在平板电脑等设备上从横向切换到纵向时添加一些不错的效果。
而且，我在过去两个项目中忽略了移动优先，并且在构建过程中，我开始希望自己使用了这种方法。 我确实发现向上工作比向下工作更容易。 下一个项目……移动优先！
图像是我们头疼的问题，尤其是在现在的视网膜屏幕上。
http://www.responsinator.com/ 是一个快速测试响应式网站的好网站。
回复 DBUK，responsinator.com 对我来说根本不起作用。 它似乎只做的是设置 iPhone 的屏幕尺寸并提供滚动条，它不会移动我的流体设计，而这正是我在真实的 iPhone 上发生的事情，在那里我的网站运行良好，所以简而言之，这个模拟器根本不起作用。
很好的建议/参考资料。 感谢分享。
我们真的需要停止将移动网站/应用程序和响应式设计视为不能共存的两种选择，这并不是真正的关系。 移动网站或应用程序应该被视为可以补充响应式设计的工具。
有时确实需要移动应用程序或网站，但为什么网站不能仍然是响应式的？ 为什么任何新网站不能在某种程度上响应式？
我完全同意，网页代理机构将他们的样式表从静态的固定宽度更改为流体宽度，并将其称为响应式网页设计。 是的，它在狭窄的设计中看起来会更好，但我认为大多数情况下，最好为网站/webapp 制作一个完全独立的、补充的移动版本。
感谢 placekitten 的链接 - 我喜欢它：D
我认为消除悬停只是半途而废。
我还没有见过一个响应式设计，它在桌面端仍然使用悬停，而在移动端（或小于某个屏幕尺寸时）切换到点击。
有没有简单的方法可以做到这一点？
我做过很多次，大部分情况下都很简单。以下是一个例子：http://madeinla2012.org。日历在非触控屏幕上使用悬停，而 Modernizr 会检测触控并使用它。
悬停不会消失。在某些情况下，你可能需要改变一些东西，比如导航栏只在悬停时显示，现在你需要在那里放置一些东西来帮助用户理解，如果他们点击它，悬停就会显示出来，使其明显或放置一个导航图标，或者只写“导航”。使用 jQuery 很简单
http://stackoverflow.com/questions/2432003/combine-hover-and-click-functions-jquery
也就是说，我尽量避免使用悬停来激活基本功能，因为这是一种糟糕的用户体验习惯，我们让用户习惯了。
酷！感谢这些例子。
让设计公司/客户在项目启动时考虑移动端将是一个巨大的优势，或者至少在输入阶段包括开发人员。我目前正在尝试将一个固定宽度的网站转换成响应式布局。如果从一开始就使用百分比，会更好。现在只是有很多样式需要覆盖。这是我参与项目过晚的弊端。如果我有时间重头开始，我会的。 :-(
移动优先是一个有趣的角度，对于下一个项目一定要记住这一点。响应式布局听起来是当下的潮流，这是一个很棒的资源！
好文章，但我真的相信前端的 RWD 只是整体架构方法的一部分，它延伸到堆栈的每一端...... 它不仅仅是关于 UX 的。
更详细的想法在
http://barkgolgafrincham.wordpress.com/2012/05/09/responsive-web-design-a-time-and-place-for-everything/
很高兴你提到了“悬停完全过时”这一点。
最近我一直在撞墙，试图说服开发人员（他们中大多数都有智能手机，我得补充一句）悬停在这种情况下行不通！
@ParadoxDesign 我正在做一个这样的布局——使用 :hover 类在 1024 以上，使用固定的背景颜色在 1024 以下。这真的不难，我只是觉得人们还没有太在意 :hover 问题，因为他们假设悬停会变成点击。
快速原型设计（或者现在的浏览器内设计）绝对是响应式设计的未来。正如你正确指出的，首先要排序好导航和内容层次结构（不使用 CSS），理解标记顺序将如何影响内容的整体“权重”（或所需的交互），然后围绕最有效的方法进行设计。
训练自己停止从桌面端向下设计可能很困难——尤其是在你像我一样在业界待了这么久之后——但一点点开始时的痛苦可以创造奇迹，并能帮助开发人员更好地理解内容和功能极简主义的重要性。我通常发现，向设计中添加内容比从中删除内容要容易得多。
我认为，如果一个组织没有足够的资金立即开发一个成熟的移动应用程序，流畅的设计是一个不错的折衷方案。在当今经济困难的时期，很容易理解为什么响应式设计正成为那些刚刚开始考虑移动端的公司的流行解决方案。
你对 Twitter Bootstrap 有什么想法？
为什么事情总是不断变化啊，ARGH！！！? 我们一直在敲打这块石头，总有一天我们会把它削成细粉。同意悬停过时的说法，我不得不承认，悬停在移动端确实表现很糟糕。
我们难道不能都同意，把所有承重和资源密集型的东西都保密吗？就像一个协议，但隐藏起来，不要让客户知道，这样可以节省我们所有人的工作量。
干杯
对于一个复杂的网站来说，从移动端浏览它非常困难，因为它有响应式设计。移动版本与响应式设计版本不同，正如我所说，有些网站确实不需要响应式网页设计。
这篇文章很有料！很有趣，因为我刚做完我的网站响应式设计。现在我要再看看。:)