响应式Web设计:通过响应式的设计开发方式(2)

开始规划

首先来定义每种关键规格中的结构网格。我们创建了三个页面模板，宽度分别为1024像素（桌面显示器）、768像素（iPad竖屏宽度）、320像素（iPhone竖屏宽度）。

如上图所示，从每列等宽的情况入手，可以让规划工作相对简单一些，帮助我们将注意力放在响应式的布局改变上。

沟通与评审

接下来我们需要考虑的是，每一列中的模块组件应该以怎样的方式随着页面的宽度缩放而响应式的适应和调整。在这个过程里，保持团队成员之间的沟通是非常重要的，包括视觉设计师、前端开发人员等；使用初步的线框原型，与大家交流模块组件在布局和样式方面的调整计划，尽量在初期就让相关成员对整个规划做到心中有数，并尽早发现前端实现等方面的潜在的问题。

首页

也许对于你自己的实际项目来说，其他页面的重要程度或代表性是超过首页的。这不是问题，你可以调整具体的页面规划次序；我们的这个项目案例是从首页开始入手的。下图中展示的，就是我们为首页制作的三种响应规格的线框原型。