設計師不該該錯過的響應式設計框架

　　Ethan Marcotte稱響應式設計是基於網格創建一個網站。Marcotte定義這項技術後，響應式設計框架開始出現，主要是css和JavaScript的結合。許多框架都是開源的，能夠免費下載和快速定製。

　　當下最火熱的框架就是Bootstrap和 Foundation了。

　　隨着響應式設計框架愈來愈火，一個巨大的爭議出現了：爲何一個專業的設計師還須要用這些框架呢？

　　許多人宣稱響應式框架是可怕的，由於他們根本不懂一點點html和css的知識。下面是另外一些具備標誌性的反對使用框架的意見：

• 設計師能夠寫本身的框架，若是他們懂得一點點html和css的知識的話就更應該本身寫。
• 基於框架的網站加載很是慢。
• 基於框架的網站看起來大同小異。
• 伴隨多餘的div標籤，5000+行的css後者更多的javascript文件，網站膨脹是常見的。

　　儘管反對者的抗議很強烈，可是絲絕不影響框架的持續流行。我認爲框架是有用的，即便是最有經驗的web前端開發人員也能夠好好研究一下。下面我將說說我支持框架的緣由。

　　Paul-rand

　　美國網站Paul Rand是使用Foundation建設的

　　1、響應式設計框架

　　一天早上，我正在看 Eli White在 Northeast PHP Conference上的的關鍵演示，他是譯文PHP開發人員，他所談到的是web和PHP在過去20年的發展。他說道一點：在15年前，後臺開發者構建一切東西都是從零開始的。那個時候沒有多少可用的開源資源，也沒有專門的內容管理系統（CMS）或者數十萬美圓的成本。若是你想要爲你的網站作一個概觀，那麼你須要從頭本身編寫一個。

　　而現在在2014年，後臺開發者再也不這樣作了。如今他們能夠用SurveyMonkey的API在10個小時內爲用戶建立內容，已經再也不是100或者1000小時了。是SurveyMonkey的代碼比較可怕嗎？它們是最高效、最巧妙的嗎？我不是一個PHP開發者，我不知道這個問題的答案，可是這個API不斷被測試和debug，它運行良好，早就能夠拿來用在你其餘的項目上，這就是它的價值所在。

　　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