中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

重磅來(lái)襲!設(shè)計(jì)師不應(yīng)該錯(cuò)過(guò)的響應(yīng)式設(shè)計(jì)框架

2022-06-08    分類: 網(wǎng)站建設(shè)

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

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

隨著響應(yīng)式設(shè)計(jì)框架越來(lái)越火,一個(gè)巨大的爭(zhēng)議出現(xiàn)了:為什么一個(gè)專業(yè)的設(shè)計(jì)師還需要用這些框架呢?

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

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

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

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

Paul-rand

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Grk

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

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

瀏覽器兼容性

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

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

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

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

自定義文件

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

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

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

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

CMS Critic

自定義代碼

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

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

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

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

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

同樣的,你也可以通過(guò)定義javascript來(lái)定義功能。最新版本的Bootstrap和Foundation都支持使用jQuery來(lái)自定義部件。

如果你使用專門的屏幕來(lái)引用框架,那么在下次框架更新時(shí),你還需要另外再自定義一次。

請(qǐng)留意Foundation擁有許多javascript分號(hào),但是Bootstrap只有少量,這回影響開發(fā)人員的一個(gè)選擇。

可訪問性

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

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

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

Webflow

三、總結(jié)

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

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

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

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

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

當(dāng)前名稱:重磅來(lái)襲!設(shè)計(jì)師不應(yīng)該錯(cuò)過(guò)的響應(yīng)式設(shè)計(jì)框架
本文網(wǎng)址:http://m.rwnh.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)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司
武乡县| 尖扎县| 巴塘县| 兴安县| 当涂县| 磐安县| 贵南县| 虎林市| 波密县| 洛南县| 五指山市| 清新县| 大安市| 崇阳县| 赤水市| 怀仁县| 布尔津县| 南阳市| 华坪县| 舞阳县| 泸水县| 涿鹿县| 定陶县| 毕节市| 中方县| 静宁县| 元朗区| 嵊泗县| 顺昌县| 怀化市| 岳阳市| 苗栗县| 新蔡县| 罗甸县| 克东县| 太原市| 襄城县| 太谷县| 彩票| 淄博市| 南平市|