響應(yīng)式網(wǎng)站設(shè)計就是如何構(gòu)建一個基于網(wǎng)站的布局,即調(diào)整及媒體查詢,所描述的伊桑馬科特圖像的網(wǎng)站。馬科特后定義的技術(shù),響應(yīng)式設(shè)計的框架開始浮出水面,納入這些原則。大多是基于CSS和JavaScript,許多這些框架都是開源的,免費下載和快速定制。
一些最流行 的今天是引導(dǎo)和基金會,我們將專注于本文中。
作為響應(yīng)式設(shè)計框架走紅,一個很大的爭論出現(xiàn)了:為什么一個專業(yè)的設(shè)計師用一個響應(yīng)式設(shè)計的框架?
互聯(lián)網(wǎng)辯論憤怒的。許多聲明,響應(yīng)式設(shè)計框架是可怕的,那誰也不知道HTML和CSS的唯一的人會永遠使用這樣的事情。下面是對框架的標準參數(shù):
- 設(shè)計人員可以編寫自己的網(wǎng)格系統(tǒng),他們可能應(yīng)該如果他們知道任何HTML和CSS。
- 基于框架的網(wǎng)站加載緩慢。
- 基于框架的所有網(wǎng)站看起來是一樣的。
- 膨脹是常見的,無論是由于額外的div標簽,5000 +行CSS或大JavaScript文件。
而批評者抱怨叫囂著,響應(yīng)式設(shè)計框架繼續(xù)增長受歡迎。我認為,這些框架有積極的方面,即使是最有經(jīng)驗的前端Web開發(fā)人員,我會在下面列舉這些。
一個地方的響應(yīng)式設(shè)計框架
一天早晨,我是聽白禮的主題演講在東北的PHP會議。白色是一個PHP開發(fā)人員,和他的談話是在Web和PHP在過去的20年發(fā)展的回顧。有一點他做的是,15年前,后端開發(fā)人員建立一切從頭開始。沒有多少是可以在開源世界的時候,和專有內(nèi)容管理系統(tǒng)(CMS)的成本在幾十萬美元。如果你想要一個調(diào)查,為您的網(wǎng)站,例如,你必須從頭寫一個。
現(xiàn)在,在2014年,后端開發(fā)人員不再這樣做。為什么會他們,當(dāng)他們可以使用的SurveyMonkey的API來創(chuàng)造一些對他們的客戶在10個小時,而不是100或1000小時?是的SurveyMonkey的代碼最真棒在世界上,最高效,最巧妙的書面和膨脹,免費的嗎?我不是一個PHP開發(fā)人員,不知道這個問題的答案。然而,API是測試和調(diào)試,它運行良好,并準備在你的下一個項目被納入 - 并具有巨大的價值。
除非你的客戶想要的東西非常具體和有足夠的資金來資助這樣的項目,如白解釋說,大多數(shù)PHP開發(fā)人員會說,有寫你自己的調(diào)查,由專人在2014年沒有很好的理由。
那么,什么是等效的技術(shù),快捷的網(wǎng)站的前端?不幸的是,我們沒有之一。
目前,我們有兩個選擇來創(chuàng)建一個網(wǎng)站的前端。第一個選擇是下載一個模板(或主題)。與基于CMS的網(wǎng)站常用的一個主題可能會出現(xiàn)一些顏色的選擇和幾個變量來進行調(diào)整。從有利的一面,大多數(shù)主題都是免費的或相對于整個網(wǎng)站的成本非常低的成本。下載一個主題,改變一些顏色和下降的一個標志需要一點時間。
更重要的是,一個好的主題會定期更新,并且它會與文件,使之更簡單的修改。在消極的一面,主題可能會被絲毫不少,并沒有獨特的,它甚至可能使網(wǎng)站看起來像它屬于一個特定的CMS。
第二個選擇是一個完全定制的解決方案。平面設(shè)計師將聘請來討論品牌,他們會遍歷三種設(shè)計和兩輪的修訂,或許原型直接在瀏覽器或轉(zhuǎn)換的設(shè)計,HTML和CSS,設(shè)計與CMS或他們選擇的后端集成如果需要,并提供了(希望)完美的結(jié)果給客戶端。從有利的一面,每個標簽將被精確放置,并且代碼將完全語義,與脂肪沒有一盎司或過量的div被發(fā)現(xiàn)。
要做到這一點,不過,開發(fā)人員必須訓(xùn)練有素,經(jīng)驗豐富的 - 每當(dāng)該口徑的開發(fā)商參與,明碼標價上升相應(yīng)地,把這個項目出來的小客戶的金融影響力和顯著的大的支出增加客戶端。此外,除非額外的美元花在文檔(這是不尋常的在我的經(jīng)驗),如果最初的開發(fā)者離開,那么接下來開發(fā)商必須要弄清楚的代碼,以便修改。這是一個額外的成本給客戶端。
在哪里下載一個低端的設(shè)計之間的中間地帶,用于在互聯(lián)網(wǎng)上,并創(chuàng)造一些高度定制和昂貴?哪里是一個后端開發(fā)人員的API或代碼庫的相同呢?我們能否建立某種形式的大規(guī)模定制的前端?
我們需要能夠挖掘到一些預(yù)先寫好的內(nèi)容,定制增加將它們合并,并制定一個解決方案,比罐頭主題更加個性化,但不是一個高端解決方案更少的定制。如果不從頭開始,我們就可以節(jié)省時間的開發(fā)時間和節(jié)省下來的錢用于客戶端。
我是不是說我們應(yīng)該拋棄的框架定制的解決方案?不,當(dāng)然不是。一個完全定制的解決方案有它在Web開發(fā)世界上的地位,就像罐頭CMS的主題有自己的位置。如果您的客戶有足夠的時間和金錢來達到完美和完全定制的解決方案是項目完善的方法,那么為什么不呢?
但很多客戶都非常有限的時間和金錢,他們可能無法等待或支付完美。我們能得到的東西,是“相當(dāng)不錯”,而不是?也許不是每個分區(qū)將被完全有條件,有可能是數(shù)太多其中許多。或許碼需要多一點的時間比需要下載。然而,該解決方案將被記錄在案,在積極開發(fā)和定制的,它可以迅速建立在超過一個自定義的網(wǎng)站要少得多。沒有價值的。
就像我們所掌握的所有其他技術(shù)在Web開發(fā)領(lǐng)域,一個負責(zé)任的設(shè)計框架都有自己的肯定和否定,我們需要考慮的問題。
本網(wǎng)站對于希臘餐廳GRK建有引導(dǎo)。
肯定和否定響應(yīng)式設(shè)計框架
注重引導(dǎo)3和基金會5,讓我們探索了許多建立你的下一個網(wǎng)站,這些框架中的一個積極的和消極的方面。
瀏覽器兼容性
調(diào)試的瀏覽器有時需要長達開發(fā)網(wǎng)站本身。如果你可以減少花費在調(diào)試的時候,你可以節(jié)省客戶端(和你自己的頭發(fā))顯著成本。
響應(yīng)式設(shè)計的框架已經(jīng)過測試,對一組特定的瀏覽器和設(shè)備,從而降低了推出一個網(wǎng)站所需的工作。(測試你不得不做的數(shù)額將根據(jù)有多少你已經(jīng)定制的框架有所不同。如果是你,那么只有很少的測試是必需的已經(jīng)改變了只有幾個顏色。如果你已經(jīng)破解了電網(wǎng)系統(tǒng),然后測試將需要是廣泛的。)
最新版本的引導(dǎo)和基金會支持的Internet Explorer(IE)9以上。有技巧,以使框架在IE 8的工作,但是IE 6和7是不與任何兼容。一般情況下,這些框架也支持其他常見的瀏覽器,包括Firefox,Safari和Chrome,以及不同組的移動瀏覽器的最新版本。
不幸的是,如果你想支持的尚未經(jīng)過測試一個瀏覽器,那么你可能會發(fā)現(xiàn)需要修正的代碼,你不熟悉的bug。
自定義文件
引導(dǎo)和基金會有一個包含所有必需的文件,樣式和窗口小部件標準下載軟件包。有些文件比較大,有幾個要下載的文件。一般情況下,文件會以人類可讀和精縮格式。
僅僅因為你的選擇,附帶的樣式和JavaScript,支持幾十種成分的框架并不意味著你必須下載并整合他們所有。引導(dǎo)和基金會允許您自定義您的下載包,這樣你就可以只搶了CSS和JavaScript你需要運行您的網(wǎng)站。這降低了膨脹,并作為結(jié)果,減少了下載時間,對框架的公共參數(shù)。
以后,如果您想添加一個Widget或風(fēng)格,你以前被排除在外,您可能需要重新配置包。這是可以避免的,但是,我建議首先開發(fā)的網(wǎng)站,無需自定義外觀,以確定哪些功能是你所需要的。然后,您可以自定義下載包中包含的代碼只有這些功能。一旦框架到位,然后你可以自定義網(wǎng)站的外觀。
注:當(dāng)引導(dǎo)或基金會的下一個次要版本發(fā)布時,您需要重新下載自定義軟件包。認真記筆記的你有什么,還沒有下載,讓您可以更新您的文件時,重復(fù)上述過程。
CMS的評論家,一個網(wǎng)站的評論內(nèi)容管理系統(tǒng),建有基金會。
自定義代碼
很可能需要定制一些水平。你可能會想改變顏色。如果你是較有經(jīng)驗,你不妨破解電網(wǎng)系統(tǒng)。
只是因為你使用了一個框架,并不意味著你的網(wǎng)站有看起來像之一。您可以自定義CSS來給網(wǎng)站自身的獨特的外觀,無論是使用更?。ㄒ龑?dǎo))或薩斯(用于基金會)或僅僅是從頭開始編寫CSS。
在那進來引導(dǎo)開箱風(fēng)格相當(dāng)廣泛,并且假設(shè)是,你將不會被廣泛改變它們。您可以覆蓋的CSS在一個單獨的樣式表或通過使用較少或薩斯文件。不幸的是,小文件,供LESS和薩斯文件,所以你需要找出許多代碼在你自己。內(nèi)置的自舉了豐富的款式使其成為經(jīng)驗的前端Web開發(fā)的熱門選擇。(請注意,引導(dǎo)已在過去一個月內(nèi)發(fā)布薩斯文件。在此之前,只減檔可供它。)
基金會擁有較少的款式開箱即用。雖然你可以用一個單獨的樣式表自定義,基金會是更有效地通過其廣泛的薩斯文件(該文件提供)定制。用更少的CSS來覆蓋,就可以更輕松地構(gòu)建一個完全定制的外觀。然而,經(jīng)驗不足的前端開發(fā)人員可能會發(fā)現(xiàn),因為CSS的更多的知識基礎(chǔ)更加難以處理和薩斯必需的。
引導(dǎo)和基金會也可以,甚至在下載定制,通過簡單的修改LESS和薩斯變量。在引導(dǎo)時,自定義選項去的網(wǎng)頁,而只有極少數(shù)的變化,可向基金會。但是,如果你不熟悉小于或無禮的話,這是一個快速和骯臟的方式來定制框架的外觀。
同樣地,你可以利用JavaScript的提供自定義功能。引導(dǎo)和基金會的最新版本的jQuery需要定制部件的工作。
如果您使用的引導(dǎo)和基金會的專用屏幕,那么你的下載包將被定制。當(dāng)每個框架的下一個次要版本發(fā)布時,您將需要一個新的包一遍自定義變量。
需要注意的是基金會的JavaScript包括了很多精心布置的分號。引導(dǎo)含有非常少的分號。這會影響一些開發(fā)商的首選框架。
無障礙
無障礙正在成為開發(fā)商越來越重要。這兩個框架提供有效的HTML,但是讓我們考慮無障礙超出有效的HTML。
引導(dǎo)已取得了一些進步的幫助下的Joomla。的Joomla,一個開源的CMS,結(jié)合引導(dǎo)到版本3。的Joomla的開發(fā)者有一個長期的承諾,可訪問性,并且他們不想引導(dǎo),以減少CMS的可訪問性。因此,在引導(dǎo)3,你會發(fā)現(xiàn)ARIA代碼和屏幕閱讀器,只有風(fēng)格,在其他輔助功能的改進。
基金會,不幸的是,并沒有優(yōu)先無障礙迄今。它不來與ARIA代碼或屏幕閱讀器,只有風(fēng)格。Zurb曾表示,但是,它想做更多。
Webflow的,一拖和拖放的網(wǎng)站建設(shè)者,建有引導(dǎo)。
結(jié)論
無響應(yīng)的設(shè)計框架是完美的。對于執(zhí)行各種作業(yè)的工具,額外的代碼需要作出這樣的工具柔性您的需求。當(dāng)然,完全自定義的代碼很可能是一個網(wǎng)站不是一個框架更有效。
一些前端開發(fā)人員告訴我,他們有自己的網(wǎng)格系統(tǒng),CSS和他們保持自己的網(wǎng)站的JavaScript組件。當(dāng)然,沒有什么是不對的做法。但你必須自己維護的代碼。一個流行的框架,最大限度地減少需要維護和測試。
我呼吁我的同胞前端Web開發(fā)人員重新考慮使用一個負責(zé)任的設(shè)計框架。的前景,把它看成是一種生產(chǎn)力工具,你可以在全部或部分借鑒。剛下載的網(wǎng)格系統(tǒng),或與所有的群眾演員采取全包。也許用一個框架只為原型設(shè)計的目的或?qū)嶋H重用的框架,你在自己的項目中熟悉的部分。
框架的目的是獲得一個網(wǎng)站運行迅速,以最小的調(diào)試。定制的挫折感出它看起來完全不同,或者改變短短的顏色和完成。但是你使用它,你就會有一個可以很容易地傳遞給其他開發(fā)人員進行維護和調(diào)整,而且看起來合理,功能以及標準化,文檔化的代碼。該代碼是不完美的,當(dāng)然,但它是相當(dāng)不錯的。它減少了建立一個網(wǎng)站所需的時間,這將使得該網(wǎng)站花費少一點,太。
世界上肯定有空間,完全定制的網(wǎng)站。我的意思并不是建議放棄他們支持大規(guī)模定制的。然而,下一次客戶端需要更多的在他們的設(shè)計有點,但對于捉襟見肘的預(yù)算,也許這是一個好主意,考慮一個負責(zé)任的設(shè)計框架,畢竟。您可能會發(fā)現(xiàn)它是一個有用的工具在你的軍火庫,快速原型設(shè)計,測試,甚至生產(chǎn)代碼 - 一個擴展您的產(chǎn)品系列,使客戶滿意。
本文作者來自北京網(wǎng)站建設(shè)公司-傳誠信,轉(zhuǎn)載請注明出處:北京傳誠信(m.jzztb.org.cn)