重磅來襲！設(shè)計師不應(yīng)該錯過的響應(yīng)式設(shè)計框架

Ethan Marcotte稱響應(yīng)式設(shè)計是基于網(wǎng)格建立一個網(wǎng)站。Marcotte定義這項(xiàng)技術(shù)后，響應(yīng)式設(shè)計框架開始出現(xiàn)，主要是css和JavaScript的結(jié)合。許多框架都是開源的，可以免費(fèi)下載和快速定制。

當(dāng)下最火熱的框架就是Bootstrap和 Foundation了。

隨著響應(yīng)式設(shè)計框架越來越火，一個巨大的爭議出現(xiàn)了：為什么一個專業(yè)的設(shè)計師還需要用這些框架呢？

許多人宣稱響應(yīng)式框架是可怕的，因?yàn)樗麄兏静欢稽c(diǎn)點(diǎn)html和css的知識。下面是另一些具有標(biāo)志性的反對使用框架的意見：

設(shè)計師可以寫自己的框架，如果他們懂得一點(diǎn)點(diǎn)html和css的知識的話就更應(yīng)該自己寫。

基于框架的網(wǎng)站加載非常慢。
基于框架的網(wǎng)站看起來大同小異。
伴隨多余的div標(biāo)簽，5000+行的css后者更多的javascript文件，網(wǎng)站膨脹是常見的。

盡管反對者的抗議很強(qiáng)烈，但是絲毫不影響框架的持續(xù)流行。我認(rèn)為框架是有用的，即使是最有經(jīng)驗(yàn)的web前端開發(fā)人員也可以好好研究一下。下面我將說說我支持框架的原因。

Paul-rand

一、響應(yīng)式設(shè)計框架

一天早上，我正在看 Eli White在 Northeast PHP Conference上的的關(guān)鍵演示，他是譯文PHP開發(fā)人員，他所談到的是web和PHP在過去20年的發(fā)展。他說道一點(diǎn)：在15年前，后臺開發(fā)者構(gòu)建一切東西都是從零開始的。那個時候沒有多少可用的開源資源，也沒有專門的內(nèi)容管理系統(tǒng)（CMS）或者數(shù)十萬美元的成本。如果你想要為你的網(wǎng)站做一個概觀，那么你需要從頭自己編寫一個。

而如今在2014年，后臺開發(fā)者不再這樣做了?，F(xiàn)在他們可以用SurveyMonkey的API在10個小時內(nèi)為用戶創(chuàng)建內(nèi)容，已經(jīng)不再是100或者1000小時了。是SurveyMonkey的代碼比較可怕嗎？它們是高效、最巧妙的嗎？我不是一個PHP開發(fā)者，我不知道這個問題的答案，但是這個API不斷被測試和debug，它運(yùn)行良好，早就可以拿來用在你其他的項(xiàng)目上，這就是它的價值所在。

White說道，除非你的客戶想要的東西非常的特殊并且有足夠的資金支持，不然大多數(shù)的PHP開發(fā)人員沒有理由在2014年還親手從頭編寫自己的概觀。

So~有什么可以等價于快捷的網(wǎng)站前端技術(shù)呢？不幸的是我們沒有。

目前我們有兩個選擇來創(chuàng)建一個網(wǎng)站前臺。第一個選擇是下載一個主題（或者模板）。通常都是用于基于CMS的網(wǎng)站，一套主題可能會提供一些顏色的選擇和一些變量的調(diào)整。另外一方面，相對于整個網(wǎng)站的成本來說，一套主題大多數(shù)都是免費(fèi)的或者是低成本的。下載一套主題，改一下顏色換一個logo是非常簡單的事情。

更重要的是，一套好的主題是會定期更新的。并且會附帶說明文檔使修改顯得很直觀容易。在消極方面呢，一套主題可能會被很多人使用，看起來并不是非常的新穎獨(dú)特，更像是屬于特定的內(nèi)容管理系統(tǒng)。

另外一個選擇就是自主完全定制解決方案。需要雇請?jiān)O(shè)計師來討論品牌方案，他們會經(jīng)歷再三設(shè)計和多次修改，或許會直接把原型實(shí)現(xiàn)到瀏覽器上，或者把設(shè)計稿用html和css實(shí)現(xiàn)到網(wǎng)站上，使用CMS集成設(shè)計，考慮要不要使用后臺管理，最后交付給客戶好的成品。另一方面，每個標(biāo)簽都被精確放置，和代碼是完全互相輝映的，沒有絲毫的冗余標(biāo)簽。

但是，為了實(shí)現(xiàn)這一點(diǎn)，開發(fā)者們必須做到訓(xùn)練有素經(jīng)驗(yàn)豐富。一旦這樣高水準(zhǔn)的成員加入進(jìn)來，項(xiàng)目價格就會直線上升，項(xiàng)目已經(jīng)從小客戶目標(biāo)移位到大客戶目標(biāo)，成本高升。此外，除非花費(fèi)額外的費(fèi)用在寫文檔上，不然一旦初始成員離開，那么新來的成員就必須從新看一遍老成員的代碼，做到熟悉，然后修改，這又是不小的成本了。

在哪里可以下載一個介于低端設(shè)計、遍布互聯(lián)網(wǎng)和高級定制、無比昂貴之間的東西嗎？相當(dāng)于一個后臺開發(fā)者的API或者代碼庫的東西？我們可以創(chuàng)建出某種專為前端而定制的東西嗎？

我們需要能夠利用一些預(yù)先寫好的元素，將他們添加到定制專欄，并開發(fā)一個定制的解決方案這就是介于低端和高端之間的產(chǎn)物。我們不再需要從零開始構(gòu)建框架，我們可以節(jié)省好幾個小時呢！

我是在說我們應(yīng)該拋棄定制解決方案的框架嗎？不，當(dāng)然不是。在web開發(fā)的世界里，一個完整的定制解決方案已然存在，就好比CMS的存在一樣，各有各的用武之地。如果你的客戶有時間和金錢來構(gòu)建出最好的效果，那么何樂而不為呢？

但是要知道客戶一般都是沒有足夠的資金和時間來等你從頭構(gòu)造?；蛟S“不好”是允許存在的，或許需要下載的代碼會稍微冗長一些，然而這個解決方案會被記錄下來，并在開發(fā)的時候起到很積極的作用。它可以快速產(chǎn)出一個并不低級的產(chǎn)物，這是值得的。

在web世界里，其他技術(shù)在處理響應(yīng)式設(shè)計方面有自己的優(yōu)勢與不足，所以我們大可以好好考慮一下這個框架。

Grk

二、響應(yīng)式設(shè)計框架的優(yōu)缺點(diǎn)

聚焦Bootstrap 3和Foundation 5，讓我們一起來分析使用其中一種框架構(gòu)建自己的網(wǎng)站的優(yōu)勢與短板。

瀏覽器兼容性

瀏覽器調(diào)試所花的時間有時趕上了制作網(wǎng)站本身所花的時間。如果你可以減少調(diào)試瀏覽器所花的時間，那么就是在為客戶節(jié)約成本（當(dāng)然也是在保護(hù)的你的頭發(fā)不那么早就掉光）。

響應(yīng)式設(shè)計框架是一個基于在各種瀏覽器調(diào)試成功的框架。使用這些框架，可以大大減少建設(shè)網(wǎng)站時所耗費(fèi)的時間（測試次數(shù)的多少取決于你定制了多少框架的內(nèi)容，如果你僅僅只是改變了幾個顏色而已，那么調(diào)試的次數(shù)就非常少；如果你把框架的網(wǎng)格系統(tǒng)改來改去，那么你就需要多番調(diào)試）。

最新的框架支持IE9及以上瀏覽器版本。在IE8上使用框架有一點(diǎn)點(diǎn)小技巧，但是框架完全不兼容于IE6和IE7。一般情況下，框架還支持其他瀏覽器，比如Firefox、Safari和Chrome，以及移動端瀏覽器。

不幸的是，如果你想要把框架應(yīng)用在還沒被調(diào)試過的瀏覽器上，那么你需要自行花時間來修改代碼做測試。

自定義文件

Bootstrap或Foundation的下載包里面都含有最基本的網(wǎng)站構(gòu)建文件，包括富有風(fēng)格的圖標(biāo)和小部件。一些文件會比較大。一般來說文件都是可讀的經(jīng)過壓縮的文件格式。

由于你所選的每個框架都是集大成的框架，所以介于你不需要完全使用整個框架的所有元素，Bootstra或Foundation允許你自定義下載自己需要的部分。所以你完全可以僅僅托用你需要的css和javascript文件包用在你的web上。這樣就減輕了文件膨脹，并且也減少了下載時間，同時效果是（與你下載了整個框架包所用的效果）一樣的。

但是，如果你想要添加一個之前被排除在外的小部件或者風(fēng)格，現(xiàn)在你就得重新配置包。不過這完全是可以避免的。我建議首先以建立網(wǎng)站為首，不要去考慮外觀。首先定制自己需要的特性，然后再來下載那些僅包含特定特性的包，一旦框架就位，你就可以開始定制網(wǎng)站的外觀了。

注意：每當(dāng)新版本的Bootstrap 或Foundation發(fā)布，你就得重新下載定制包。仔細(xì)記錄下你所采用的和沒有采用的文件，這樣在文件更新時就不需要重復(fù)這個步驟了。

CMS Critic

自定義代碼

可能需要某種程度的自定義，框架不是下載下來就可以立即上線使用的。你可能會想要改變一些顏色。而如果你有一定的經(jīng)驗(yàn)，或許你會直接攻克網(wǎng)格系統(tǒng)。

自定義代碼僅僅是因?yàn)槟闶褂靡粋€框架并不是為了使你的網(wǎng)站顯得很大眾化。你可以自定義css來改善你的網(wǎng)站外觀。要么引用LESS (Bootstrap) 或者Sass (Foundation)，要么直接自己寫都行。

來自Bootstrap框架里的盒子樣式是非常寬泛的。這里的假設(shè)就是你根本不會改變它們。所以你可以在一個單獨(dú)的樣式表里面引用LESS或Sass文件來覆蓋它們。不幸的是LESS和Sass文件也是極小的，你需要額外的補(bǔ)充自己的代碼。Bootstrap豐富的內(nèi)置風(fēng)格使它很受前端開發(fā)人員的歡迎。

Foundation有少量的風(fēng)格基礎(chǔ)。你也自定義一個樣式表來覆蓋它們、引用外部樣式表，看起來完全自定義一個樣式表會更加容易?？偟膩碚f在Foundation方面，沒有一定基礎(chǔ)的開發(fā)者會比較難以駕馭這個框架，因?yàn)樗枰闶紫日莆毡锐{馭Bootstrap需要更多的CSS 和Sass的知識。

Bootstrap和Foundation，可以在下載之前就被自定義，盡管需要簡單改變一些LESS和 Sass。在Bootstrap里面，自定義選項(xiàng)用了幾個頁面來展示（與此相反，F(xiàn)oundation僅僅只是一點(diǎn)點(diǎn)的改變）。但是如果你對LESS和 Sass不熟悉的話，這就顯得比較快捷但是比較骯臟。

同樣的，你也可以通過定義javascript來定義功能。最新版本的Bootstrap和Foundation都支持使用jQuery來自定義部件。

如果你使用專門的屏幕來引用框架，那么在下次框架更新時，你還需要另外再自定義一次。

請留意Foundation擁有許多javascript分號，但是Bootstrap只有少量，這回影響開發(fā)人員的一個選擇。

可訪問性

可訪問性對于開發(fā)者來說已經(jīng)變得越來越重要了。這兩個框架都有有效地HTML，但是我們有必要比較一下在HTML之外這兩個框架的可訪問性。

Bootstrap在 Joomla的幫助下取得了一定的進(jìn)步。Joomla是一個開源的CMS，把Bootstrap引向了第3版本。Joomla的開發(fā)人員在它的可訪問性方面做了很長的探討，他們不希望Bootstrap減少CMS的可訪問性，所以他們引用了ARIA規(guī)范和screen reader-only風(fēng)格。

Foundation比較不幸的是到目前為止都還沒有優(yōu)先考慮可訪問性。它不引用ARIA規(guī)范和screen reader-only風(fēng)格。不過Zurb已經(jīng)表示Foundation會做到更多。

Webflow

三、總結(jié)

沒有一個響應(yīng)式框架是好的。作為一個執(zhí)行各種任務(wù)的工具，需要額外的代碼來使這個框架響應(yīng)我們的需求。當(dāng)然，完全自定義一個網(wǎng)站或許會比使用一個框架更加有效。

一些前端開發(fā)人員告訴我他們有自己的網(wǎng)格系統(tǒng)、css和javascript組件來維護(hù)自己的網(wǎng)站。當(dāng)然這樣的方法沒什么錯誤可言，但是這樣做你就需要維護(hù)自己的代碼。而一個流行的框架可以減少你的維護(hù)成本。

我呼吁我的前端開發(fā)者重新考慮使用響應(yīng)式設(shè)計框架的前景。把它當(dāng)做一個生產(chǎn)力工具，你可以使用其中的一部分，甚至是全部。下載部分文件或者所有，使用僅僅一個原型或者所有，總之你知道用在你的項(xiàng)目上你需要使用多少。

一個框架旨在使網(wǎng)站在最少調(diào)試的情況下運(yùn)行得很快。自定義它的過程是完全不同的，或許你會改變少量顏色或者其他。但是無論何種自定義，你都需要做到規(guī)范定義，一切做到標(biāo)準(zhǔn)化，記錄下代碼，做到可以很容易就傳遞給另一個開發(fā)人員并被他所熟悉。代碼當(dāng)然不是好的，但是已經(jīng)很好了。它大大降低了我們開發(fā)一個網(wǎng)站所需要的時間。

這個世界當(dāng)然有完全定制的空間。我的意思并不是支持大規(guī)模定制。當(dāng)客戶想要在設(shè)計里面添加更多的內(nèi)容時就有必要考慮一個響應(yīng)式框架了?？偟膩碚f它是一個非常好用的工具。在快速原型實(shí)現(xiàn)、測試甚至是生產(chǎn)代碼方面都能夠讓你的客戶滿意。

當(dāng)前名稱：重磅來襲！設(shè)計師不應(yīng)該錯過的響應(yīng)式設(shè)計框架
本文網(wǎng)址：http://www.muchs.cn/news13/165163.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站改版、云服務(wù)器、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)