50个响应式网页设计的精彩工具

正如Ethan Marcotte在他的文章中所介绍/创造的那样“响应式网页设计“还有他的畅销书,需要三个元素才能使网站响应:

  1. 柔性/流体网格
  2. 响应式图像
  3. 媒体查询

有很多其他 好文章那封面动机概念,和技术关于响应式网页设计,因此我们将把本文的重点放在一些顶级工具上,这些工具将帮助您做出负责任的响应。

开始的工具

在开始构建网站之前,最好是概述,草拟页面上的元素将如何适应以适应将要查看的各种设备的不同浏览器大小避免通常主要考虑桌面设计的断开连接其余的响应迭代作为事后的想法(特别参见斯蒂芬妮(苏利文)路易斯'评论)。

01.响应式Web设计草图表

这组响应式草图表由Jeremy P Alford撰写,是一个很好的起点,可以开始绘制页面部分将如何在不同的分辨率中移动。

02.响应式设计素描本

如果您希望将所有草图保存在一个地方,那么您可能需要考虑这本有线书50张响应草图由App Sketchbook公司提供。

03.响应线框

构建响应式网站的困难之一是使用线框来展示响应式设计的工作方式。 Adobe的James Mellers将这个实验工具放在一起展示如何复杂布局的响应线框图能行得通。

04.多设备布局模式

在规划响应式设计时,了解其他人在你之前是如何接近它的,这是很有用的,所以Luke Wroblewski的多设备布局模式,列出了带有示例链接的流行模式,是一个很好的起点。

05. Style Tiles

Samanatha Warren的风格瓷砖在响应时代提出一种新的设计技术;而不是固定宽度设计模型,这些像样本或情绪板,显示一般设计方法,而不是细节。

用于柔性/流体网格的工具

如前所述,响应式设计所需的第一个组件是灵活/流体网格。以下是预先构建的:您只需要下载它们,您就可以快速前往更具响应性的网站。

06.金网系统

Joni Korpi,谁也发展了较少的框架,最近发布了这个新版本的可靠网格系统,用于响应式设计。视为“折叠”,因为它可轻松适应16列到8列,金网系统还有一个小的浏览器覆盖,可以在页面上显示网格以进行测试。

07. Foldy960

才华横溢的男士们Paravel,Inc。已经释放修改后的960.gs网格他们将其作为响应项目的基础。

08. SimpleGrid

SimpleGrid,通过Conor Muirhead,内置了响应性,因此您可以轻松启动并运行响应式网站项目。

09. 1140px CSS网格

另一个伟大的响应式网格系统是1140px CSS网格由墨尔本设计师安迪泰勒,从广泛的桌面分辨率到移动。

10. Columnal CSS网格系统

柱状网格系统, 由...制作纸浆+像素又名创意总监尼克戈斯林,是基于1140px网格系统,但有一些额外的好东西,如带有草图和线框模板的设计套件,以及CSS调试样式。

11.语义网格系统

像Sass和LESS这样的预处理CSS扩展正变得越来越流行,而Tyler Tate则越来越受欢迎语义网格系统在这个声称不使用不必要的类或元素的网格系统中使用它们来达到最大效果。了解更多信息coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

12. SUSY

就像语义网格系统Oddbird一样超对称创建了一个不使用额外标记或特殊类的网格系统,但SUSY仅针对Sass(及其扩展,Compass)的用户。

13. Gridpak

Gridpak由Erskine Design设计,是最新的响应式网格生成器之一。它允许您在多个断点处设置列和装订线,然后输出CSS,JavaScript和PNG文件,以便整个团队从同一个起点开始工作。

14.网格集

还有一丝神秘感Gridset因为,在我写这篇文章的时候,它还没有真正发布。但是Mark Boulton Design的工具承诺提供定制的,非规范的网格系统以及在线保存和管理网格的方法。

15.适用于RWD的更好的Photoshop网格

Elliot Jay Stocks建议放弃旧的960px事实上的网格标准,而不是使用1000px基础,使所有百分比计算更容易使用。如果你同意,他就会成功一个PSD让你开始合作。

16.流体网格

如果您的设计是高度专业化的,并且您需要创建自己的自定义网格,则可以使用.net奖励出色的新人候选人哈里罗伯茨的流体网格计算器

17.响应计算器

另一个像素百分比计算器,但Stu Robson通过为您生成所有CSS规则比其他人更进一步,这意味着您可以将它们复制并粘贴到样式表中。

响应式图像(和文本)的工具

响应式网页设计的另一个重要组成部分是流畅图像虽然实现流体图像的技术很简单,优化不同设备的性能和页面加载似乎是响应式网页设计中的最大挑战之一。以下是解决问题的一些资源。

18.响应式图像

细丝集团设计一种基于屏幕分辨率发送适当大小的图像的方法。这个实验采用移动优先图像,可以响应和负责任地进行缩放两个不同大小的图像可供参考

19.自适应图像

Matt Wilcox从Responsive Images工具中汲取灵感来创作自适应图像,它使用PHP和一点JavaScript为用户的设备提供适当的图像,而无需任何额外的标记。

20. Sencha.io Src(原名Tinysrc)

Sencha提供云服务根据请求它们的设备大小发送托管图像的优化版本。要了解如何使用它,请参阅docs.sencha.com/io/src/

21. FitText

来自Paravel,Inc的又一个宝石是FitText.js,一个jQuery插件,使标题Web类型响应设计和设备。详情见Trentwalton.com/2011/05/10/fit-to-scale/

22. SlabText

灵感来自FitText和SlabType算法,Brian McAllister的SlabText是一个jQuery插件,它可以生成粗体文本块,在保持定义宽度的同时响应性地调整大小。

媒体查询工具

现在您已经了解了布局如何针对不同设备,流体网格和流体图像进行更改,您需要使用媒体查询将页面元素转换为响应状态。

23. Respond.js

响应式设计的一个问题是无法读取媒体查询的浏览器被遗忘。这可能不是您的目标受众的问题,但在旧浏览器上容纳用户仍然是一个很好的做法。Respond.js,通过斯科特杰尔,仅支持属性min-width和max-width。

欲了解更多filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js,由Wouter van der Graaf,使旧版本的IE和其他浏览器能够有效地测试和应用各种媒体查询。

25. Adapt.js

Nathan Smith是原始960.gs网格系统的作者Adapt.js,一个检测浏览器维度并仅提供所需样式表的脚本 - 如媒体查询但没有媒体查询,这意味着它也适用于旧版浏览器。

26.分类员

这是从相反角度接近的设备检测 - Brett Jankord的Categorizr脚本假设设备是移动设备,除非另外检测为桌面或平板电脑,使您能够以同情的方式向浏览器提供资源。

响应式设计(和移动)样板

本着高效响应工作流的精神,样板便于将设计尽快移至浏览器。大多数这些样板都将上面提到的最好的工具组合成一个整齐的包装:一个增强了脚本的灵活网格,同时实现了首先是移动内容出哲学。

27. 320及以上

安迪克拉克的320及以上是一个移动优先的样板,它集成了许多其他现代网页设计工具,如LESS和Bootstrap(见#30)。这是一种轻松灵活的方式,可以快速启动和运行网站。还可以看看我们对安迪的采访,他在其中告诉我们更多关于新版本的信息。

28.无网格

无网格是一个HTML5和CSS3样板,可以作为响应式设计的基础,专注于排版和烘焙跨浏览器兼容性。

29.骨架

与之前的两个样板不同,它们的起点是最小的分辨率骨架开发套件, 由...制作戴夫加马切,基于960.gs网格系统,并缩小到移动。 Skeleton还拥有一个很棒的样式框架,供开发人员在其上构建样式。

30. Bootstrap

由Twitter构建,现在是开源的,引导是一个框架和一系列组件,用于快速获取站点在线,从版本二开始,其所有核心部分都响应性地工作。

插件,垫片和polyfill

虽然现代浏览器和软件倾向于响应,但有时我们必须使用额外的工具来提供一致的体验。

31.响应式插件

Marios Lublinski写道一个WordPress插件承诺将任何当前的WP主题转变为响应主题。这是如何工作的我还不知道,因为它还没有作为写作时间发布,但如果它符合它的承诺它应该是非常有用的。

32.推翻

内容溢出处理在桌面浏览器上运行良好,但较旧的移动浏览器处理不一致。该推翻polyfill来自勤劳的Filament Group在各种设备上增加了一致的优雅降级,确保所有移动用户都能获得最佳体验。

33. MediaTable

Marco Pegoraro的jQuery插件,MediaTable,与Respond.js配合使用,帮助您解决如何在小屏幕设备上显示大型数据表的问题,制作响应列并在适当的位置添加显示/隐藏切换。

“测试,测试:1-2-3 ...”

响应式工作流程的另一个方面是了解您的目标设备和分辨率,然后在其中进行测试。

34. ResizeMyBrowser

ResizeMyBrowser,由前端开发人员陈洛,为浏览器窗口提供多个预设尺寸,以测试响应设计的页面,或者如果找不到符合您需求的新预设,则创建新预设。

35. Responsivepx

很像resizeMyBrowser,Responsivepx, 由__建造雷米夏普,将页面加载到窗口中,您可以在其中测试宽度和高度,以确定媒体查询的触发情况以及设计中断点的位置。

36.响应式设计测试

设计师和开发人员非常有用的工具马特克斯利:只需输入您的自适应网站的网址即可响应式设计测试了解它如何在各种浏览器大小下呈现。

37.责任人

输入网址和责任人将向您展示它如何在许多常见的设备尺寸中显示 - 具有无情的机器人效率。 Tama Pugsley和Andy Hovey对此负责。

38. Responsive.is

另一个页内设备模拟器,响应允许您键入URL,然后在一系列不同的预设之间快速调整大小。这是由即将到来的团队制作的类型转换应用程序。

39. Screenqueri.es

还有一个浏览器尺寸工具Screenqueri.esMandar Shirke通过拥有广泛的移动和平板电脑预设,以及使精细测量变得更加容易的网格和标尺来区分自己。

40. Aptus

另一个用于测试多个定义尺寸的网站的应用,但是问博是Mac原生的。它可以通过Mac App Store实现,并且本机带来了额外的功能,例如简单的屏幕截图和离线支持。

41.响应式设计书签

Victor Coulon做了一个非常简单但有效的方法书签;当您在任何网页上激活它时,它会添加一个工具栏,允许您在四个常见的屏幕尺寸之间切换,以便您可以看到您的网站以不同的尺寸呈现的方式。

42.响应式设计测试书签

这个书签作者Benjamin Keen允许您定义自己的设备尺寸,以及您喜欢的任意数量或少数设备,从而实现更多自定义。激活后,它会并排显示所有选定尺寸的部位,以便于比较。

43. Screenfly

Screenfly,通过QuirkTools,允许您在桌面,平板电脑,手机和电视上测试不同分辨率的网站。桌面测试目前仅限于Safari,而平板电脑和移动设备有更多的设备和浏览器选项。电视仅限于歌剧院。

44.媒体查询指标

约翰布鲁克提供了一种纯CSS方式来测试浏览器何时触发媒体查询。媒体查询指示器是另一个测试和玩设计突破点的好工具。

45.垫片

RWD运动的海报男孩波士顿环球报的重新设计中使用的工具之一,是一个Node.js应用程序,它在同一个Wifi网络上的多个设备上运行网页,使跨设备测试变得更加容易。

46.免下车

如果您没有运行Shim的Node.js服务器,那么Scott Jehl已经制作了一个更简单的版本驶入它基本上以相同的方式工作,但使用PHP,Apache和.htaccess文件。

47. Adobe Shadow

Adobe通过这种远程调试工具继续推动Web技术的发展。安装阴影以及Mac或Windows上的Chrome扩展程序,以及Android或iPhone上的Shadow客户端,您可以在许多不同的设备之间共享网页。

48. Opera Mobile Emulator +远程调试

调试移动页面的一种更简单的方法是安装Opera和Opera Mobile Emulator并使用远程调试选项连接两者。设置简单快捷,并且具有超过WebKit测试的额外好处。

更多灵感

想知道其他人如何使他们的设计响应?

49. MediaQueri.es

如果你还没有看到它,该网站Mediaqueri.es有越来越多的网站已经越过响应的一面。

50. @ RWD

Ethan Marcotte参赛一个Twitter帐户它带来了RWD世界的最新新闻,工具和展示。

丹妮丝雅各布斯Adores是演讲者,作家,网页设计培训师和创造力传播者,而Peter Gasston则是作者CSS3书和博客的资深网络开发人员破碎的链接

喜欢这个?阅读这些!