设计师不该该错过的响应式设计框架
Ethan Marcotte称响应式设计是基于网格创建一个网站。Marcotte定义这项技术后，响应式设计框架开始出现，主要是css和JavaScript的结合。许多框架都是开源的，能够免费下载和快速定制。javascript
当下最火热的框架就是Bootstrap和 Foundation了。php
随着响应式设计框架愈来愈火，一个巨大的争议出现了：为何一个专业的设计师还须要用这些框架呢？css
许多人宣称响应式框架是可怕的，由于他们根本不懂一点点html和css的知识。下面是另外一些具备标志性的反对使用框架的意见：html
- 设计师能够写本身的框架，若是他们懂得一点点html和css的知识的话就更应该本身写。
- 基于框架的网站加载很是慢。
- 基于框架的网站看起来大同小异。
- 伴随多余的div标签，5000+行的css后者更多的javascript文件，网站膨胀是常见的。
尽管反对者的抗议很强烈，可是丝绝不影响框架的持续流行。我认为框架是有用的，即便是最有经验的web前端开发人员也能够好好研究一下。下面我将说说我支持框架的缘由。前端
Paul-rand
美国网站Paul Rand是使用Foundation建设的java
1、响应式设计框架
一天早上，我正在看 Eli White在 Northeast PHP Conference上的的关键演示，他是译文PHP开发人员，他所谈到的是web和PHP在过去20年的发展。他说道一点：在15年前，后台开发者构建一切东西都是从零开始的。那个时候没有多少可用的开源资源，也没有专门的内容管理系统（CMS）或者数十万美圆的成本。若是你想要为你的网站作一个概观，那么你须要从头本身编写一个。web
而现在在2014年，后台开发者再也不这样作了。如今他们能够用SurveyMonkey的API在10个小时内为用户建立内容，已经再也不是100或者1000小时了。是SurveyMonkey的代码比较可怕吗？它们是最高效、最巧妙的吗？我不是一个PHP开发者，我不知道这个问题的答案，可是这个API不断被测试和debug，它运行良好，早就能够拿来用在你其余的项目上，这就是它的价值所在。bootstrap
White说道，除非你的客户想要的东西很是的特殊而且有足够的资金支持，否则大多数的PHP开发人员没有理由在2014年还亲手从头编写本身的概观。浏览器
So~有什么能够等价于快捷的网站前端技术呢？不幸的是咱们没有。架构
目前咱们有两个选择来建立一个网站前台。第一个选择是下载一个主题（或者模板）。一般都是用于基于CMS的网站，一套主题可能会提供一些颜色的选择和一些变量的调整。另一方面，相对于整个网站的成原本说，一套主题大多数都是免费的或者是低成本的。下载一套主题，改一下颜色换一个logo是很是简单的事情。
更重要的是，一套好的主题是会按期更新的。而且会附带说明文档使修改显得很直观容易。在消极方面呢，一套主题可能会被不少人使用，看起来并非很是的新颖独特，更像是属于特定的内容管理系统。
另一个选择就是自主彻底定制解决方案。须要雇请设计师来讨论品牌方案，他们会经历再三设计和屡次修改，或许会直接把原型实现到浏览器上，或者把设计稿用html和css实现到网站上，使用CMS集成设计，考虑要不要使用后台管理，最后交付给客户完美的成品。另外一方面，每一个标签都被精确放置，和代码是彻底互相辉映的，没有丝毫的冗余标签。
可是，为了实现这一点，开发者们必须作到训练有素经验丰富。一旦这样高水准的成员加入进来，项目价格就会直线上升，项目已经从小客户目标移位到大客户目标，成本高升。此外，除非花费额外的费用在写文档上，否则一旦初始成员离开，那么新来的成员就必须重新看一遍老成员的代码，作到熟悉，而后修改，这又是不小的成本了。
在哪里能够下载一个介于低端设计、遍及互联网和高级定制、无比昂贵之间的东西吗？至关于一个后台开发者的API或者代码库的东西？咱们能够建立出某种专为前端而定制的东西吗？
咱们须要可以利用一些预先写好的元素，将他们添加到定制专栏，并开发一个定制的解决方案这就是介于低端和高端之间的产物。咱们再也不须要从零开始构建框架，咱们能够节省好几个小时呢！
我是在说咱们应该抛弃定制解决方案的框架吗？不，固然不是。在web开发的世界里，一个完整的定制解决方案已然存在，就比如CMS的存在同样，各有各的用武之地。若是你的客户有时间和金钱来构建出最完美的效果，那么何乐而不为呢？
可是要知道客户通常都是没有足够的资金和时间来等你从头构造。或许“不完美”是容许存在的，或许须要下载的代码会稍微冗长一些，然而这个解决方案会被记录下来，并在开发的时候起到很积极的做用。它能够快速产出一个并不低级的产物，这是值得的。
在web世界里，其余技术在处理响应式设计方面有本身的优点与不足，因此咱们大能够好好考虑一下这个框架。
Grk
Grk，由Bootstrap构建而成。
2、响应式设计框架的优缺点
聚焦Bootstrap 3和Foundation 5，让咱们一块儿来分析使用其中一种框架构建本身的网站的优点与短板。
浏览器兼容性
浏览器调试所花的时间有时遇上了制做网站自己所花的时间。若是你能够减小调试浏览器所花的时间，那么就是在为客户节约成本（固然也是在保护的你的头发不那么早就掉光）。
响应式设计框架是一个基于在各类浏览器调试成功的框架。使用这些框架，能够大大减小建设网站时所耗费的时间（测试次数的多少取决于你定制了多少框架的内容，若是你仅仅只是改变了几个颜色而已，那么调试的次数就很是少；若是你把框架的网格系统改来改去，那么你就须要多番调试）。
最新的框架支持IE9及以上浏览器版本。在IE8上使用框架有一点点小技巧，可是框架彻底不兼容于IE6和IE7。通常状况下，框架还支持其余浏览器，好比Firefox、Safari和Chrome，以及移动端浏览器。
不幸的是，若是你想要把框架应用在还没被调试过的浏览器上，那么你须要自行花时间来修改代码作测试。
自定义文件
Bootstrap或Foundation的下载包里面都含有最基本的网站构建文件，包括富有风格的图标和小部件。一些文件会比较大。通常来讲文件都是可读的通过压缩的文件格式。
因为你所选的每一个框架都是集大成的框架，因此介于你不须要彻底使用整个框架的全部元素，Bootstra或Foundation容许你自定义下载本身须要的部分。因此你彻底能够仅仅托用你须要的css和javascript文件包用在你的web上。这样就减轻了文件膨胀，而且也减小了下载时间，同时效果是（与你下载了整个框架包所用的效果）同样的。
可是，若是你想要添加一个以前被排除在外的小部件或者风格，如今你就得从新配置包。不过这彻底是能够避免的。我建议首先以创建网站为首，不要去考虑外观。首先定制本身须要的特性，而后再来下载那些仅包含特定特性的包，一旦框架就位，你就能够开始定制网站的外观了。
注意：每当新版本的Bootstrap 或Foundation发布，你就得从新下载定制包。仔细记录下你所采用的和没有采用的文件，这样在文件更新时就不须要重复这个步骤了。
CMS Critic
CMS Critic，一个预览文件管理系统，使用Foundation构建而成。
自定义代码
可能须要某种程度的自定义，框架不是下载下来就能够当即上线使用的。你可能会想要改变一些颜色。而若是你有必定的经验，或许你会直接攻克网格系统。
自定义代码仅仅是由于你使用一个框架并非为了使你的网站显得很大众化。你能够自定义css来改善你的网站外观。要么引用LESS (Bootstrap) 或者Sass (Foundation)，要么直接本身写都行。
来自Bootstrap框架里的盒子样式是很是宽泛的。这里的假设就是你根本不会改变它们。因此你能够在一个单独的样式表里面引用LESS或Sass文件来覆盖它们。不幸的是LESS和Sass文件也是极小的，你须要额外的补充本身的代码。Bootstrap丰富的内置风格使它很受前端开发人员的欢迎。
Foundation有少许的风格基础。你也自定义一个样式表来覆盖它们、引用外部样式表，看起来彻底自定义一个样式表会更加容易。总的来讲在Foundation方面，没有必定基础的开发者会比较难以驾驭这个框架，由于它须要你首先掌握比驾驭Bootstrap须要更多的CSS 和Sass的知识。
Bootstrap和Foundation，能够在下载以前就被自定义，尽管须要简单改变一些LESS和 Sass。在Bootstrap里面，自定义选项用了几个页面来展现（与此相反，Foundation仅仅只是一点点的改变）。可是若是你对LESS和 Sass不熟悉的话，这就显得比较快捷可是比较肮脏。
一样的，你也能够经过定义javascript来定义功能。最新版本的Bootstrap和Foundation都支持使用jQuery来自定义部件。
若是你使用专门的屏幕来引用框架，那么在下次框架更新时，你还须要另外再自定义一次。
请留意Foundation拥有许多javascript分号，可是Bootstrap只有少许，这回影响开发人员的一个选择。
可访问性
可访问性对于开发者来讲已经变得愈来愈重要了。这两个框架都有有效地HTML，可是咱们有必要比较一下在HTML以外这两个框架的可访问性。
Bootstrap在 Joomla的帮助下取得了必定的进步。Joomla是一个开源的CMS，把Bootstrap引向了第3版本。Joomla的开发人员在它的可访问性方面作了很长的探讨，他们不但愿Bootstrap减小CMS的可访问性，因此他们引用了ARIA规范和screen reader-only风格。
Foundation比较不幸的是到目前为止都尚未优先考虑可访问性。它不引用ARIA规范和screen reader-only风格。不过Zurb已经表示Foundation会作到更多。
Webflow
Webflow，引用Bootstrap制做而成的一个拖放网站制做网站。
3、总结
没有一个响应式框架是完美的。做为一个执行各类任务的工具，须要额外的代码来使这个框架响应咱们的需求。固然，彻底自定义一个网站或许会比使用一个框架更加有效。
一些前端开发人员告诉我他们有本身的网格系统、css和javascript组件来维护本身的网站。固然这样的方法没什么错误可言，可是这样作你就须要维护本身的代码。而一个流行的框架能够减小你的维护成本。
我呼吁个人前端开发者从新考虑使用响应式设计框架的前景。把它当作一个生产力工具，你可使用其中的一部分，甚至是所有。下载部分文件或者全部，使用仅仅一个原型或者全部，总之你知道用在你的项目上你须要使用多少。
一个框架旨在使网站在最少调试的状况下运行得很快。自定义它的过程是彻底不一样的，或许你会改变少许颜色或者其余。可是不管何种自定义，你都须要作到规范定义，一切作到标准化，记录下代码，作到能够很容易就传递给另外一个开发人员并被他所熟悉。代码固然不是完美的，可是已经很好了。它大大下降了咱们开发一个网站所须要的时间。
这个世界固然有彻底定制的空间。个人意思并非支持大规模定制。当客户想要在设计里面添加更多的内容时就有必要考虑一个响应式框架了。总的来讲它是一个很是好用的工具。在快速原型实现、测试甚至是生产代码方面都可以让你的客户满意。
原文地址：smashingmagazine 翻译：uisdc