细节是魔鬼,设计在于细节
 首页> 读。设计

响应式设计框架:你想,你应该可以

响应式设计是如何构建一个基于网格的布局,随时调整布局及媒体查询,所描述的伊桑马科特图像的网站。马科特后定义的技术,响应式设计的框架开始浮出水面,纳入这些原则。大多是基于CSS和JavaScript,许多这些框架都是开源的,免费下载和快速定制。

作为响应式设计框架走红,一个很大的争论出现了:为什么一个专业的设计师用一个响应式设计的框架?

许多声明,响应式设计框架是可怕的,那谁也不知道HTML和CSS的唯一的人会永远使用这样的事情。下面是对框架的通常认识:

  • 设计人员可以编写自己的网格系统。
  • 基于框架的网站加载缓慢。
  • 基于框架的所有网站看起来都是大同小异的。
  • 沉余是常见的,无论是由于额外的div标签,还是5000 +行CSS或大JavaScript文件。

而批评者抱怨叫嚣着,响应式设计框架继续增长受欢迎。我认为,这些框架有积极的方面,即使是最有经验的前端Web开发人员,我会在下面列举这些。

响应式设计

一个地方的响应式设计框架

一天早晨,我是听白礼主题演讲的PHP会议。白色是一个PHP开发人员,和他的谈话是在Web和PHP在过去的20年发展的回顾。有一点他做的是,15年前,后端开发人员建立一切从头开始。没有多少是可以在开源世界的时候,和专有内容管理系统(CMS)的成本在几十万美元。如果你想要一个调查,为您的网站,例如,你必须从头写一个。

现在,在2014年,后端开发人员不再这样做。为什么会他们,当他们可以使用的SurveyMonkey的API来创造一些对他们的客户在10个小时,而不是100或1000小时?在世界上SurveyMonkey的代码最棒,最高效,最巧妙的,免费的吗,我不是一个PHP开发人员,不知道这个问题的答案。然而,API是测试和调试,它运行良好,并准备在你的下一个项目被纳入 – 并具有巨大的价值。

除非你的客户想要的东西非常具体和有足够的资金来资助这样的项目,如白解释说,大多数PHP开发人员会说,有写你自己的调查,由专人在2014年没有很好的理由。

那么,什么是等效的技术,快捷的网站的前端?不幸的是,我们没有。

目前,我们有两个选择来创建一个网站的前端。第一个选择是下载一个模板(或主题)。与基于CMS的网站常用的一个主题可能会出现一些颜色的选择和几个变量来进行调整。从有利的一面,大多数主题都是免费的或相对于整个网站的成本非常低的成本。下载一个主题,改变一些颜色和下降的一个标志需要一点时间。

更重要的是,一个好的主题会定期更新,并且它会与文件,使之更简单的修改。在消极的一面,主题可能会被丝毫不少,并没有独特的,它甚至可能使网站看起来像它属于一个特定的CMS。

第二个选择是一个完全定制的解决方案。平面设计师将聘请来讨论品牌,他们会遍历三种设计和两轮的修订,或许原型直接在浏览器或转换的设计,HTML和CSS,设计与CMS或他们选择的后端集成如果需要,并提供了(希望)完美的结果给客户端。从有利的一面,每个标签将被精确放置,并且代码将完全语义,与脂肪没有一盎司或过量的div被发现。

要做到这一点,不过,开发人员必须训练有素,经验丰富的 – 每当该口径的开发商参与,明码标价上升相应地,把这个项目出来的小客户的金融影响力和显著的大的支出增加客户端。此外,除非额外的美元花在文档(这是不寻常的在我的经验),如果最初的开发者离开,那么接下来开发商必须要弄清楚的代码,以便修改。这是一个额外的成本给客户端。

在哪里下载一个低端的设计之间的中间地带,用于在互联网上,并创造一些高度定制和昂贵?哪里是一个后端开发人员的API或代码库的相同呢?我们能否建立某种形式的前端?

我们需要能够挖掘到一些预先写好的内容,定制增加将它们合并,并制定一个解决方案,比罐头主题更加个性化,但不是一个高端解决方案更少的定制。如果不从头开始,我们就可以节省时间的开发时间和节省下来的钱用于客户端。

我是不是说我们应该抛弃的框架定制的解决方案?不,当然不是。一个完全定制的解决方案有它在Web开发世界上的地位,就像罐头CMS的主题有自己的位置。如果您的客户有足够的时间和金钱来达到完美和完全定制的解决方案是项目完善的方法,那么为什么不呢?

但很多客户都非常有限的时间和金钱,他们可能无法等待或支付完美。我们能得到的东西,是“相当不错”,而不是?也许不是每个分区将被完全有条件,有可能是数太多其中许多。或许码需要多一点的时间比需要下载。然而,该解决方案将被记录在案,在积极开发和定制的,它可以迅速建立在超过一个自定义的网站要少得多。没有价值的。

就像我们所掌握的所有其他技术在Web开发领域,一个负责任的设计框架都有自己的肯定和否定,我们需要考虑的问题。

grk-bootstrap-large-opt

肯定和否定响应式设计框架

注重引导3和基金会5,让我们探索了许多建立你的下一个网站,这些框架中的一个积极的和消极的方面。

浏览器兼容性

调试的浏览器有时需要长达开发网站本身。如果你可以减少花费在调试的时候,你可以节省客户端(和你自己的头发)显著成本。

响应式设计的框架已经过测试,对一组特定的浏览器和设备,从而降低了推出一个网站所需的工作。(测试你不得不做的数额将根据有多少你已经定制的框架有所不同。如果是你,那么只有很少的测试是必需的已经改变了只有几个颜色。如果你已经破解了电网系统,然后测试将需要是广泛的。)

最新版本的支持Internet Explorer(IE)9以上。有技巧,以使框架在IE 8的工作,但是IE 6和7是不兼容。一般情况下,这些框架也支持其他常见的浏览器,包括Firefox,Safari和Chrome,以及不同组的移动浏览器的最新版本。

不幸的是,如果你想支持的尚未经过测试一个浏览器,那么你可能会发现需要修正的代码,你不熟悉的bug。

自定义文件

引导和基金会有一个包含所有必需的文件,样式和窗口小部件标准下载软件包。有些文件比较大,有几个要下载的文件。一般情况下,文件会以人类可读和精缩格式。

仅仅因为你的选择,附带的样式和JavaScript,支持几十种成分的框架并不意味着你必须下载并整合他们所有。允许您自定义您的下载包,这样你就可以只抢了CSS和JavaScript你需要运行您的网站。这降低了膨胀,并作为结果,减少了下载时间,对框架的公共参数。

以后,如果您想添加一个Widget或风格,你以前被排除在外,您可能需要重新配置包。这是可以避免的,但是,我建议首先开发的网站,无需自定义外观,以确定哪些功能是你所需要的。然后,您可以自定义下载包中包含的代码只有这些功能。一旦框架到位,然后你可以自定义网站的外观。

:当引导或基金会的下一个次要版本发布时,您需要重新下载自定义软件包。认真记笔记的你有什么,还没有下载,让您可以更新您的文件时,重复上述过程。

mscritic-foundation-large-opt

CMS的评论家,一个网站的评论内容管理系统,建有基金会。

自定义代码

很可能需要定制一些水平。你可能会想改变颜色。如果你是较有经验,你不妨破解电网系统。

只是因为你使用了一个框架,并不意味着你的网站有看起来像之一。您可以自定义CSS来给网站自身的独特的外观,无论是使用更小(引导)或萨斯(用于基金会)或仅仅是从头开始编写CSS。

那进来引导开箱风格相当广泛,并且假设是,你将不会被广泛改变它们。您可以覆盖的CSS在一个单独的样式表或通过使用较少或萨斯文件。不幸的是,小文件,供LESS和萨斯文件,所以你需要找出许多代码在你自己。内置的自举了丰富的款式使其成为经验的前端Web开发的热门选择。(请注意,引导已在过去一个月内发布萨斯文件。在此之前,只减档可供它。)

基金会拥有较少的款式开箱即用。虽然你可以用一个单独的样式表自定义,基金会是更有效地通过其广泛的萨斯文件(该文件提供)定制。用更少的CSS来覆盖,就可以更轻松地构建一个完全定制的外观。然而,经验不足的前端开发人员可能会发现,因为CSS的更多的知识基础更加难以处理和萨斯必需的。

引导和基金会也可以,甚至在下载定制,通过简单的修改LESS和萨斯变量。在引导时,自定义选项去的网页,而只有极少数的变化,可向基金会。但是,如果你不熟悉小于或无礼的话,这是一个快速和肮脏的方式来定制框架的外观。

同样地,你可以利用JavaScript的提供自定义功能。引导和基金会的最新版本的jQuery需要定制部件的工作。

如果您使用的引导和基金会的专用屏幕,那么你的下载包将被定制。当每个框架的下一个次要版本发布时,您将需要一个新的包一遍自定义变量。

需要注意的是基金会的JavaScript包括了很多精心布置的分号。引导含有非常少的分号。这会影响一些开发商的首选框架。

无障碍

无障碍正在成为开发商越来越重要。这两个框架提供有效的HTML,但是让我们考虑无障碍超出有效的HTML。

引导已取得了一些进步的帮助下的Joomla。的Joomla,一个开源的CMS,结合引导到版本3。的Joomla的开发者有一个长期的承诺,可访问性,并且他们不想引导,以减少CMS的可访问性。因此,在引导3,你会发现ARIA代码和屏幕阅读器,只有风格,在其他辅助功能的改进。

基金会,不幸的是,并没有优先无障碍迄今。它不来与ARIA代码或屏幕阅读器,只有风格。Zurb曾表示,但是,它想做更多。

webflow-bootstrap-large-opt

Webflow,一拖和拖放的网站建设者,建有引导。

结论

无响应的设计框架是完美的。对于执行各种作业的工具,额外的代码需要作出这样的工具柔性您的需求。当然,完全自定义的代码很可能是一个网站不是一个框架更有效。

一些前端开发人员告诉我,他们有自己的网格系统,CSS和他们保持自己的网站的JavaScript组件。当然,没有什么是不对的做法。但你必须自己维护的代码。一个流行的框架,最大限度地减少需要维护和测试。

我呼吁我的同胞前端Web开发人员重新考虑使用一个负责任的设计框架。的前景,把它看成是一种生产力工具,你可以在全部或部分借鉴。刚下载的网格系统,或与所有的群众演员采取全包。也许用一个框架只为原型设计的目的或实际重用的框架,你在自己的项目中熟悉的部分。

框架的目的是获得一个网站运行迅速,以最小的调试。定制的挫折感出它看起来完全不同,或者改变短短的颜色和完成。但是你使用它,你就会有一个可以很容易地传递给其他开发人员进行维护和调整,而且看起来合理,功能以及标准化,文档化的代码。该代码是不完美的,当然,但它是相当不错的。它减少了建立一个网站所需的时间,这将使得该网站花费少一点,太。

世界上肯定有空间,完全定制的网站。我的意思并不是建议放弃他们支持大规模定制的。然而,下一次客户端需要更多的在他们的设计有点,但对于捉襟见肘的预算,也许这是一个好主意,考虑一个负责任的设计框架,毕竟。您可能会发现它是一个有用的工具在你的军火库,快速原型设计,测试,甚至生产代码 – 一个扩展您的产品系列,使客户满意。

此为译文,原文地址:http://mobile.smashingmagazine.com/2014/02/19/responsive-design-frameworks-just-because-you-can-should-you/

发表评论

还可以输入 1994 个字符

全部评论 (0)
切换登录

注册

切换注册

登录

忘记密码 ?