响应式网页设计师的 20 个最佳网页工具

响应式网页设计 (RWD) 虽然对于当今大多数网站管理员和开发人员来说是一个易于掌握的概念，但仍然需要对浏览器用于呈现响应式设计以供显示的核心功能有一个简明的理解，而忽略这些功能会导致开发编码的响应式网站会阻碍用户体验，并导致网站性能出现问题。 除了帮助定义响应式网页设计方向的 HTML5 之外，开发人员还需要对 CSS3 有深入的了解，否则响应式设计根本不可能完成。 例如，媒体查询是为特定设备屏幕尺寸和类型定义特定内容片段的独立解决方案。 但即便如此，这些功能也只是响应式设计所能做到的一切的冰山一角。

移动友好是另一个敏感话题，毫无疑问，它将重构和重组响应式设计的感知方式。 有明确的迹象表明，移动本身正在朝着一种更具体的内容显示方法发展，这种方法以移动应用程序和框架的形式出现。 所有这些增长概念都需要对设计的未来进行彻底调查，以及如何修改您当前的策略以适应未来的增长。

了解网页设计的发展方向后，我们编制了一些真正实用且方便的响应式网页设计工具列表，它们将非常适合您现有的工具包，其中一些肯定已经找到了您的心，但有些对你来说可能是全新的。 从直接的前端框架到移动测试工具，以及大量鼓舞人心的设计模式资源，这些资源将帮助您从现在开始构建更好、响应更快、更具吸引力的网站 — 喝杯茶，开始您的精彩综述之旅.

引导程序

从前端网站建设开始从未如此方便。 像 Bootstrap 这样的框架使引导功能性商业网站的过程真正成为一项轻松的任务。 由于 Bootstrap 遵循最新的 Web 标准，因此所有功能也与响应式设计兼容。 使 Bootstrap 如此成功的原因很大程度上归功于其庞大的组件集合，采用标准的 Bootstrap 网格设计并将任何免费组件应用于它以快速引导现代网站。

可以自定义形状、颜色和大小的按钮以及您可以自己修改以与自定义 JavaScript 功能集成的导航栏等组件。 例如，浏览器在支持响应式设计方面也取得了长足的进步，例如，可以将嵌入的视频或图像配置为根据访问者访问的设备大小自动调整大小。 这使用户体验现代、流畅和可靠。 从总体上看，Bootstrap 是帮助您创建网站的框架，然后您可以继续使用我们将提到的许多其他响应式设计工具，以进一步扩展体验。

网络流

Flexbox 可能是现代网页设计和开发中谈论最多的功能，仅在去年一年就激发了无数资深开发人员撰写的主题。 Flexbox 的基本定义——一个强大的布局工具，可以解决响应式网页设计中的常见问题。 什么是网流？ 它是一个将 Flexbox 设计集成到可视化构建器中的平台，可节省开发时间并选择可用于构建响应式布局的简单 UI。

所以无论如何.. 为什么是 Flexbox？ Flexbox 如此受欢迎的部分原因是它解决了复杂的设计问题，否则这些问题将需要非生产性的设计模式。 为您提供 Flexbox 的基本概要——您只需几行代码就可以有效地创建复杂的设计模式。 例如，创建同样对齐的模态元素，不管您用于标题或副标题的字体大小如何，这些元素仍然保持对齐。 使用 Flexbox，您可以创建功能大纲或客户评论等布局并对齐它们，以便提供卓越的用户体验。 即使是像定价表这样的平凡事物，您依赖原生 CSS3 来帮助您勾勒轮廓，现在也可以使用 Webflow 的 Flexbox 功能集成到您的设计中。 可以构建完整的网站网格来加快网站实现的速度。

用户界面模式

作为一名网页设计师，我们日常使用的许多网站、应用程序和工具都离不开 UI 模式。 想象一下，如果我们不依赖常见的 UI 模式，数字世界会是什么样子。 那将是一个疯狂、扭曲的世界。 但是，由于设计的演变，以及对模式如何在常见功能中重复的理解，有可能了解不同的 UI 模式，这些模式控制表单、数据管理、内容管理、布局、导航和用户屏幕页面等类别。

这是大量的设计屏幕，可以使用您自己的设计风格重新创建，但遵循常见 UI 模式的指导以实现平衡感。 这些也是 UI 模式涵盖的类别。 每个类别都有许多示例模式，显示了可以修改每个设计类别以反映标准 UI 模式的方式，所有这些模式都被普通数字用户认为是最喜欢的。 您将在此页面上找到的设计模式可应用于本机和移动应用程序。 响应式设计从一开始就是关于可用性的，管理多个设备的单一布局本身就是一项繁重的任务，但模式通过让您将单一模式应用于多个设计来帮助解决有问题的任务。

想象

图像是响应式设计中另一个非常受欢迎的话题。 毕竟，您不希望为来自平板设备或智能手机的访问者提供完全相同的图像。 设备分辨率总是会有所不同，虽然 CSS3 功能的存在是为了在不同设备下载的图像大小和类型之间保持某种平衡，但提高图像质量及其大小仍然是一个非常重要的话题。 当然，HTTP/2 将为世界各地的开发人员带来一些巨大的变化，但未来 5 年对网络来说仍然相当艰难。

HTTP Archive 报告说，在 2010 年——平均一个网页的大小大约为 700kb，而在 2016 年——这个数字已经增长到 2.2mb！ 这些兆字节中的大部分都被视觉内容占用了； 图片。 所以..你必须问问自己，我是否因为在图像优化方面的不负责任的决定而影响了我的页面的性能？ 在这里，您可以了解 Imagify，它是一个服务/平台，可以为您回答这个问题，并为您提供正确的工具来进行图像优化，这是一个完全自动化的过程。

提供了一个 WordPress 插件，以便您可以即时优化所有现有和未来的上传内容。 除非您直接查看问题，否则它通常看起来根本不是问题，但是如果像 Google 这样的公司鼓励用户提高他们的网站性能以换取更好的排名......你知道没有回头路。

小贴士

JavaScript 经常用于前端开发。 想想 React、Angular、Meteor、Node.js 和原生 JavaScript 库等框架，它们几乎将 Web 的其余部分连接在一起。 如果您热衷于花哨的响应式设计功能，jQuery 是一个您会经常使用的库，而提高 JS 性能的唯一方法是编写更多代码。 在这种情况下，提示对于学习新事物、更好地理解模式以及通常使您的大脑保持新鲜并了解 JavaScript 中的最新动态非常有帮助。 所以.. 在您的智能手机上安装 JsTips。

一个简单而优雅的应用程序，每天都会为您提供新的 JavaScript 技巧。 有时，这些提示会谈论您在脑海中已经知道的东西，但通常情况下，您会遇到具有创造性、未来感和令人兴奋的尝试和使用的东西。 App Store 上的一条评论表明该应用程序缺乏一些基本的设计功能，但作为一名编码员，您可以获得最渴望的东西、大量的代码示例和代码定义，这样您就可以跳上该代码编辑器并拔掉插头。

数据可视化目录

响应式设计的事情是，你可以日夜工作来完善你所追求的布局，但即使在布局完成之后——还有更多的工作要做，这通常归结为你可以集成的方式交互式和动态内容到您的设计中。 当然，WordPress 可以通过令人兴奋的插件轻松插入内容，这些插件在某种程度上迎合了响应式设备，但真正的原生响应式网站是一个更难破解的 cookie，您在内容中发现最多的东西之一是图表，图表和其他通过数字描述故事的数据可视化。 《纽约时报》是一个很好的例子，说明响应式网站如何需要一组响应式工具来为最新的选举结果创建动态可视化。

这就是我们分享更多关于数据可视化目录的原因——数据可视化模式和功能的精彩集合，每个都有一个独特的页面、独特的描述、图表/图形/可视化的预览，以及最重要的是——推荐可用于重新创建此类图表或可视化的最稳定的最新工具。 这个项目已经做了很多工作，避免使用它来帮助自己更好地理解响应式数据可视化将是一个相当无知的想法。 有大量可用的示例，例如——弧形图、面积图、条形图、头脑风暴云、气泡图和地图、公告图、日历、连接图、流程图、直方图、折线图、螺旋图和无数其他在响应式网站上以创造性的方式显示您的数据。

由 InVision LABS 制作

Craft 是来自 InVision Labs 的新工具，InVision Labs 是一个著名且享有盛誉的设计软件平台，多年来已经帮助塑造了网页设计的格局。 随着 Craft 的发布，InVision 似乎希望保持该记录完整无缺，而且他们很可能会这样做。 Craft 是一款独一无二的屏幕设计工具。 它很直观，很智能，可以完成困难的任务，并且对用户的需求非常敏感。

创建使用真实数据（由您提供或自定义生成）的动态应用程序原型，以创建独特的应用程序原型体验。 库功能能够通过云功能为您的屏幕添加新的和令人兴奋的设计元素，因此无论您是想从实时网站中提取数据，还是自己上传数据，Craft Library 都是可以使用的功能。 我们不太可能在短期内看到这样一个系统的竞争对手，所以现在学习 Craft 可能意味着你会更适应它计划在未来发布的新功能。

四四方方的SVG编辑器

Boxy 是一种直接在浏览器中操作矢量图形的新方法。 到目前为止，图形设计师严重依赖使用 Sketch 和 Adob​​e Illustrator 等工具来完成围绕矢量图形的常见任务，但使用 Boxy SVG — 您现在可以创建插图、图标、横幅、模型、图表、按钮和其他自定义直接从您喜欢的浏览器中获取 SVG 元素。 它具有惊人的功能，当然也很有用。 SVG 已经是响应式设计的未来，而像 Boxy 这样的工具将确保它保持这种状态。 将 SVG 图形集成到您的设计中的好处是无价的。 它们在性能、可扩展性和漂亮的用户体验方面非常有用。

用户体验引脚

如果您有网页设计的想法，您可以使用令人惊叹且灵活的 UXPin 来实现。 这是一个真正不知道任何限制的解决方案。 事实上，你的想象力是你拥有的唯一边界，所以放手创造你所追求的精确杰作。 使用 UXPin，您可以尽早将简单和复杂的事情变为现实。

无论您是建立原型还是成熟的项目，UXPin 都没有界限，因为您可以将其用于任何目的。

至于功能，不用说，还有很多。 从内置库（如 Material Design 和 Bootstrap）到 HTML 导入、大量组件、交互式表单元素和矢量绘图工具，所有这些以及更多内容都是您通过 UXPin 获得的。 立即准备好与令人印象深刻的 UXPin 产生直接差异。

移动友好测试（由 Google 提供）

在这个时代，您的网站或博客与所有设备完全兼容至关重要。 简而言之，您的页面必须支持移动设备。 如果您有兴趣检查您网站的灵活性，您最好不要错过尝试 Google 自己的移动友好测试。 虽然它是 Search Console 的一部分，但即使您没有帐户，您也可以进行测试。

要检查您的网站或博客的布局有多流畅，您可以添加 URL 甚至代码。 点击测试按钮后，移动友好测试将处理所有其余的工作。 在分析页面后，Mobile-Friendly Test 将提供结果，以及是否有任何错误等等。

跨浏览器测试

与针对移动设备测试您的网站类似，您需要了解它与不同网络浏览器的兼容性。 幸运的是，您可以从 CrossBrowserTesting 中受益，而不是手动完成所有工作。 借助众多桌面和移动浏览器，该软件将帮助您针对所有受欢迎的浏览器优化您的页面。 要了解它的要点，您甚至可以观看可用的演示文稿，并通过卓越的 CrossBrowserTesting 查看所有可能的内容。

该工具包含三个不同的软件包，可确保 Web 开发人员和团队找到满足其需求的正确解决方案。 请记住，您可以开始无风险试用并亲身体验这个强大的解决方案。 一些功能包含手动和自动测试、调试、屏幕截图、真实设备、并行测试和 CI 集成，仅举几例。

原子

Atomic 做两件事：它帮助您使用现有设计文件（PS 或 Sketch）构建界面，并帮助您使用自定义动画制作这些设计的原型。 创建不受设备类型限制的自定义应用程序，并了解这些设计如何跨多个平台进行交互。 运动优化引擎可以让您制作动画运动，通过一些现代的扭曲来丰富您的应用程序的 UI。 对于您的每个设计，您可以获得一个自定义 URL，您可以与您的设计团队或运行不同设备的人员共享该 URL，并查看应用程序原型如何与他们交互。

看，Atomic 在这里试图做的是让开发人员，当然还有设计师，有机会更轻松地构建适用于所有主要设备的原型。 单独编码这样的设计会花费大量的时间，但使用 Atomic——该过程被降级为一个单一的设计，在它正在尝试的所有平台上都同样出色。 Atomic 会记录您的设计历史并记录您已采取的操作，以便您可以随时恢复到特定版本。 可以邀请团队成员一起进行设计协作，并且存在反馈功能以在需要时直接收集反馈。

折纸

我们不会隐瞒这样一个事实，其中相当多的工具实际上用于原型设计界面，尤其是用户界面。 似乎最近几年市场的大门已经打开，现在谷歌和 Facebook 等公司也纷纷效仿，以满足专业图形设计师的需求。 Origami 是一个由 Facebook 构建的设计原型库。

Origami 已经在 Instagram 和 Facebook Messenger 等流行平台中得到使用，现在任何能够访问其开发工具包的人都可以选择使用 Origami 重新创建一些著名的界面模式。 现代组件使 Origami 的后端如此受欢迎。 滚动、滑动和点击元素都经过精心设计和制作，以反映最先进技术的可能性。 Origami 作为本机应用程序，可让您将 Sketch 设计直接导入 Origami，以便您可以在浏览器中实时预览您的设计。 是的，Origami 也适用于桌面原型设计。 在许多方面 - 它是一种通用工具。

微软流程

借助 Microsoft Flow，我们正在进入更企业级的设计开发。 Flow 用于构建可以代表您自己的开发过程自动执行多项任务的工作流。 为什么这在设计中会有用？ 嗯，一方面，它有助于跨多个设备同步数据。 其次，它有一个整洁的通知系统，您可以使用它来设置警报等。 这样，您的团队和您的底线在跟上整个设计结构中正在发生的事情时保持不变。

Flow 如此吸引人的原因还在于它可以连接的服务数量——Twitter、Dropbox、Slack、GitHub、Google Drive 等等。 在撰写本文时，已有 30 多个现成的服务集成。 也不是这样。 自定义模板将有助于解释 Flow 如何成为您现有设计工作流程或开发的有用补充——我们不会评判。 每个模板都是为特定目的而设计的，例如当您的老板给您发送电子邮件时向您发送短信、将 Twitter 线索添加到 CRM 或备份您的文件。 这些模板只是冰山一角，旨在激发您创建根据您需要的确切流程定制的流程。

1140格子

仅限移动设备的开发人员不愿意承认这一点，但桌面优先的方法仍然是缩小设计以适合不同设备类型的最佳方式。 开发人员为宽度为 1280 像素的屏幕构建了 1140 个响应式网格，能够优雅地降级以适应更小的屏幕。 不幸的是，原始网站现已不存在，但所有可用的开源文件仍在 GitHub 上，并且可以使用一些文档来帮助您构建第一个 CSS 网格网站。

自适应图像

我们已经学到了很多关于响应式图像的知识； 其中最重要的是，图像需要针对所有设备类型进行优化，并缩小图像以提供最佳的用户体验，而无需牺牲网站性能。 试想一下，如果每个网站都开始向访问者提供性能优化的视觉内容，那么网络速度会快多少？

整体网络流量将下降惊人的数量，但除非这将在本地强制执行，否则在很长一段时间内我们都不会看到这样的变化。 但是，存在替代方案。 其中之一是自适应图像。 自适应图像算法能够检测用户访问您的页面所使用的设备类型，并向该用户提供更专门制作的图像，以响应屏幕尺寸小得多的设备的要求。 自适应图像脱颖而出，因为它与流行的内容管理系统无缝集成，而不会导致页面中断。 所以本质上，没有很多理由不使用自适应图像。

FitVids

媒体（文件、照片、音乐、视频等）是最能减慢网络速度的因素。 不幸的是，我们还没有学会如何管理大量数据来为用户提供反映极简功能的浏览体验。 带宽还不是免费的。 而且在发展中国家肯定会很昂贵。 运行 CSS-Tricks 的 Chris Coyier 在决定用 FitVids 回馈开发者社区时毫不犹豫地回馈了开发者社区，FitVids 是一个流畅的 jQuery 库，用于在响应式网站中进行无缝视频嵌入。 为用户提供这些点对点体验至关重要。 这样，他们可能永远不会质疑他们正在浏览的平台的质量。

有线

Wirefy 承担了从设计草图到完整原型实现的角色。 为了达到预期的效果，需要有一种快速组合 UI 元素的方法。 这就是Wirefy最适合的地方。 Wirefy 是您可以在其上构建的层。 采取布局，并根据您自己的要求进行管理。 无论是删除组件，还是管理样式功能。 毋庸置疑，构建一个客户可以实际与之交互的原型将为您提供合理数量的“额外积分”。

适合文本

如果您愿意，文本或排版在响应式设计中扮演着重要的角色。 首先，您必须正确布局，但不能忘记对齐排版。 这将反映访问您的内容的所有设备和媒体的相同质量。 与 FitVids 类似，这就是 FitText 的用武之地。它是一个简单的 jQuery 库，用于缩放与父元素大小匹配的标题。 这样，您的重要标题将始终处于聚光灯下，完全符合现代网页设计标准。

响应者

您必须通过多个物理设备检查网站设计的兼容性的日子已经一去不复返了。 的确，这样的时代是存在的。 但是由于软件的发展，现在您可以在大量设备上检查网站的响应能力。 您只需将您的网站 URL 输入到诸如 Responsinator 之类的工具中即可。 这确实是一项非凡的设计技术壮举，将在设计过程中为您节省大量时间。 现在，您可以加载您的网站，并针对最流行的现代智能设备对其进行测试。 现在，您将能够查看是否可以随时改进您的网站。

幽灵实验室

Ghostlab 为浏览器中的测试带来了独特的变化。 Ghostlab 的引擎可以连接大量设备，让您从一个位置浏览各种设备上的网站。 这使您可以实时了解您的代码在您的设备列表中的执行情况。 例如，您可能正在寻找样式表中的错误。 您可以使用 Ghostlab 的代码检查器来修复任何代码问题。 您对主设备所做的所有更改都将实时反映在所有其他设备上。 这是 Ghostlab 最好的部分。 您甚至可以检查 JavaScript 并对其进行修改。 Ghostlab 还将同步在线和离线设备。 一旦您上线，这会迅速将任何新更改推送到您的生产服务器。 除此之外，Ghostlab 还是现代前端开发技术的热心支持者。 它使开发人员对改进他们的开发工作流程感兴趣。

面向前端开发人员的响应式网页设计工具

怎样才能很好地刷新记忆和理解？ 我们介绍了一些非常令人惊叹的工具，但响应式设计工具的市场随着时间的推移而增长。 有时，这不仅仅是为我们提供直接代码提示的工具，或者是一个可以使用的框架。 激励我们使我们的应用程序和网站在真正关注设计的地方更具响应性的工具。 用户体验永远是第一位的，没有比改进用户界面更好的方法来改善用户体验。 这就是成为您正在构建的体验的东西。 你从这个列表中找到了一些新的想法吗？ 我们很乐意让您与我们分享它们，总是鼓舞人心地阅读其他人的想法！