响应式网页设计，对设计师与开发者的团队协作提出了更高的要求，开发者需要更多参与设计的讨论，设计师也需要更多重视开发的细节。
优秀的网页项目，不会单靠好的设计或是开发就能成功——它也需要设计师与开发者的沟通与协作。
我看过相当多的设计师与开发者由于缺乏沟通而糟蹋了项目，结果导致关系恶化。我也见过很多初学的设计师和开发者，通过团队协作创造出惊人的结果。他们避开了潜在陷阱，及时发布项目，并且迅速迭代。这种协作不仅对项目有益——善于沟通协作的团队也是一个更快乐的团队。如果任务并没有如愿进行，也会有更少的误解与紧张。
设计与开发的协作，在响应式网页设计（RWD）项目中尤其重要。各团队如今都要应对大批设备。固定的、“像素精准”的设计，如今该让位于流动的百分比设计。而且，图片资源也需要为多种设备尺寸与分辨率进行优化。
简而言之：响应式设计带来更多变数，需要交付更多资源——这也会导致更多问题。我发现一些技巧，可以克服这些障碍。
1. 首先关注“最极端”的屏幕尺寸
如果对此存疑，可以根据网页的一般经验设定屏幕尺寸范围：iPhone尺寸和桌面浏览器展开。
尽管有些设计师直接“在浏览器中”创作，一开始就完全是流式布局。但多数设计师仍然从固定尺寸开始：选定一组屏幕宽高，以此绘制效果图。
但这提出几个问题：你对开发团队重视到何种程度？应该首先交付哪些高保真资源？由于技术限制需要先考虑哪种设备？
我一直都建议从最“极端”的用户设备入手——最小和最大的设备尺寸。如果对此存疑，我建议以此为2015年的网页用户标准：
320 x 568像素（iPhone 5竖屏）
1600 x 1000px（桌面浏览器展开）
注意：你的用户可能存在差异，所以要看数据分析来定义你的“极端情况”。
“为最小和最大的设备尺寸设计，以此为响应式设计项目的起点。”
先应对最小的屏幕尺寸，这会迫使你做出艰难的选择，选出设计中最重要的功能。大屏幕尺寸则让人从另一个方向思考：最多包含多少内容？文字段落是不是太宽不易阅读？下拉菜单元素需要额外留白吗，如果需要，多少才能避免给人脱节的感觉？最后，选定最小和最大屏幕，通常需要你思考至少两种输入方式——最小的屏幕基于触摸操作，最大屏幕则使用鼠标和键盘操作。
可能最重要的是，当你应对极端情况时，你是在同时处理两种尺寸。并非完全绘制出一种屏幕尺寸，而后去适应另一种。那样会引发设计与开发的冲突。
2. 在各个断点之间讨论内容布局
既然在静止线框图和排版上投入这么多，就千万要记住，响应式网页设计天生是流动的。这意味着众多网站用户体验到的，是你设计的“中间”状态。所以几乎每件设计，都需要考虑特定尺寸间必要的布局调整。比如当尺寸减小时，内容可能会收缩，图片减少为单列。
要避免主观臆断，认为开发团队能够或是应该实现那样的布局调整。尽早行动，先知会你的开发团队，避免他们陷入太深。对于特别复杂的布局变化，最好另外绘制一张线框图或效果图来说明。特殊性不太重要的情况，通过简单的讨论，或者用邮件描述这些变化就足够了。
3. 尽早制定资源图策略
很多响应式图片需要多套资源。我个人网站的主页头图，根据屏幕尺寸和分辨率不同，会从6张不同图片中选择一张呈现。
图片格式与尺寸，通常是设计师与开发者之间的障碍。你可以使用PNG、JPG、图标字体，或者用SVG实现更小的元素或图标。并没有哪个是正确答案：一切都取决于内容和可用的资源。但重要的是对某种格式达成一致，坚持使用它。而且随着网页项目的进行，你还可以创建一些常用图片尺寸。
不过对于如今的响应式设计，这只是刚开始。你要至少输出2套位图资源（JPG）：1套给普通显示器，一套给高分辨率显示器。高级的响应式图片技术，需要更多套资源适应不同屏幕尺寸。
避免到项目末尾再决定响应式图片格式。至少要有一套像素密度显示策略。看看srcset和Picturefill，来保证良好的跨浏览器支持。如果感觉太过了，就从简单入手。用srcset属性来更换一些图片元素，这是个好的开始。看它如何处理，然后由此展开。
4. 微观的思考，模块化的设计
我的响应式设计工作流程深受Brad Frost的Atomic Web Design和Jonathan Snook的SMACSS影响。两者的框架都依赖小型、可复用的组件，以此为基础打造强大的网站结构。
对于交付给开发的资料，我喜欢先专注于小型、可复用的组件。因为它们在不同设备上，通常表现出同样的体验和外观。这样的统一性有利于开发团队消化。另外，小组件通常更容易跨页面复用。所以如果你设计了一套有效的解决方案，之后再重复使用就非常简单了。
小组件通常在不同设备上表现出同样的体验和外观。这样的统一性有利于开发团队消化。
假设你在设计一个注册页面，有标题、大幅图片和表单。根据设备不同，这些元素可能会变换交错或是改变尺寸。起初，要同开发团队一起专注于注册表单的小细节。它看起来是怎样的？需要怎样的验证？相对鼠标键盘，触摸输入会使表单发生什么变化？
5. 从开发者那里获得视觉与用户体验的反馈
有些设计师把开发者阻挡在产品会议、可用性讨论和其他反馈机会之外。只有一个启动仪式，交付一些资源，和一点点其他东西。这是错误的。
要记住，经验丰富的开发者掌握大量知识。如果他们与产品接触了一段时间，他们可能也有独到见解。
前端开发者和设计师的技能通常是重叠的。越来越多的设计师自己写代码。开发者也在刻苦钻研快速原型设计、线框图和美术设计。响应式设计加剧了这项趋势。即使没有“设计师”的头衔，一名开发者也可以表达出强有力的设计见解。
我们得承认，角色与责任的独立仍然有其价值。但稍加融合便可显著改善最终产品。所以，在你的下个可用性测试中，请一位开发者加入来讨论最终产出吧。或者如果你在进行一场设计头脑风暴，或许应该邀请一些开发者。
合作很重要
所有这些技巧都需要规划和认同。由于注重产品发布与截止日期，这就难以做到。但设计与开发关系良好对任何网页项目，尤其响应式设计项目都是有益的。初期的小投资，会为你的团队带来指数级的回报。
本文均为格度视觉摘自权威资料，书籍，文章，或来自网络，如有版权纠纷或违规问题，请联系我们删除。我们欢迎您的分享，谢绝直接抄袭复制。感谢…
