响应式web设计:WEBJX收集50个响应式设计工具

在您开始着手响应式站点的搭建之前，如果能拥有强有力的开发工具会让您的世界另有一番风采。本文中Denise Javobs和Peter Gasston推荐了50种强大的工具来支持您建造响应式站点的过程。

在Ethan Marcotte的文章《响应式web设计》以及他的畅销书中最早首创介绍了建设响应式站点需要的三个元素：

1. 灵活布局、流式网格
2. 响应式图片
3. 媒体查询

另外也有很多文献涵盖了响应式web设计领域相关的主旨，

初期工具

在您开始编制站点之前，最好弄清楚整个页面的元素框架以及它们如何自动适应不同的浏览器窗口尺寸，因为不同的设备的分辨率和屏幕都不尽相同，而且要 避免脑海中原来那些关于桌面应用设计时的思维影响，以及不要事后再去考虑剩下的哪些响应式迭代（可以参考Stephanie Rewis的评论）。

（译者注：为了方便读者搜索相关资料，对关键字原文进行保留不译了，每一种工具都附有截图）

1. Responsive Web Desigh Sketch Sheets

这是一个响应式草案图表的集合，由Jeremy P Alford设计，是一个优秀的启点工具，可以帮助您规划页面的各个部分在不同解决方案时的转换。

2. Responsive Design SketchBook

如果您更青睐于保持框架不动，那么或许可以考虑一下这本包含了50个响应式草案图纸的线装本书，由App Sketchbook公司出品。

3. Responsive Wireframes

制作响应式站点的一个难点是，使用wireframe来显示响应时设计如何工作。Adobe公司的James Meller把实验工具集合在一起来为您展示复杂的布局如何通过响应式wireframe工作。

4. Multi-Device Layout Patterns

在筹划一个响应式设计的时候，如果能看看别人以前都是怎么做的，对您可能帮助十分大。所以Luke Wroblewski的多设备布局方式，列出了很多流行的方式，还连接到了样例，是对您可能有极大帮助的。

5. Style Tiles

Samanatha Warren的Style Tiles在响应式设计时代提出了一种新技术，而不是使用混合的设计模型。使用了类似调色板的东西来显示设计的进展概要而并不需要深入粒度细节。

灵活的/流动的网格相关工具

正如之前所说的那样，响应式设计需要的第一个组件是Flexible/fluid Grid.以下介绍了一些已经预构建的东西，您只需要下载就可以迅速在它们的基础上设计更有响应式功能的站点了。

6. Golden Grid System

Joni Korpi是开发了Less Framework的那位，近期已经发布了这个可靠的Grid系统的新版本。因为其易于适应从16个到8个到4个栏，被视为“折叠式”。Golden Grid System还具有另一个特色，可以在测试时用一个小型浏览器覆盖您所制作的页面上的Grid。

7. Foldy960

Paravel公司才华横溢的男人们发布了960.gs的修改版并用它来做响应式工程的基础。

8. SimpleGrid

由Conor Muirhead设计，基于火热的响应式技术，因此易于学习并应用到您的响应式站点工程中。

9. 1140px CSS Grid

另外一个伟大的响应式Grid系统是1140px CSS Grid，由Melboume 的设计师Andy Taylor制作，可以从宽的桌面解决方案缩小到移动应用。

[1] [2] [3] [4] [5]  下一页