響應(yīng)和自適應(yīng)網(wǎng)頁設(shè)計(jì)之間的差異
日期:2016/5/5 / 人氣:
響應(yīng)性和自適應(yīng)網(wǎng)頁設(shè)計(jì)是創(chuàng)造這兩種方法多設(shè)備瀏覽的網(wǎng)站,可以在多種屏幕尺寸的工作。雖然響應(yīng)的網(wǎng)頁設(shè)計(jì)由谷歌推薦,是目前比較流行的兩種方法,這兩種方法對(duì)多設(shè)備的網(wǎng)頁設(shè)計(jì)有自己的長處和自己的短處。
讓我們來看看響應(yīng)和自適應(yīng)網(wǎng)頁設(shè)計(jì)之間的差異,特別關(guān)注這些關(guān)鍵領(lǐng)域:
易于開發(fā)
您對(duì)設(shè)計(jì)的控制水平
設(shè)備的廣度/屏幕支持
今后如何友好的解決方案
總體下載速度和網(wǎng)站性能
一些定義
在我們進(jìn)入我們的身邊并排的響應(yīng)性和自適應(yīng)網(wǎng)頁設(shè)計(jì)的比較,讓我們花點(diǎn)時(shí)間來看看這兩種方法的高層次的定義。
網(wǎng)站的響應(yīng)有一個(gè)流體布局,改變和適應(yīng),無論所使用的屏幕尺寸。媒體查詢?cè)试S響應(yīng)網(wǎng)站甚至改變“對(duì)飛”如果瀏覽器被調(diào)整。
自適應(yīng)設(shè)計(jì),采用基于預(yù)先確定的斷點(diǎn)固定尺寸為客戶提供最合適的布局版本因?yàn)檫@是當(dāng)?shù)谝淮渭虞d頁面發(fā)現(xiàn)屏幕尺寸。
有了這些廣泛的定義,讓我們來談?wù)勎覀冴P(guān)注的重點(diǎn)領(lǐng)域。
易于開發(fā)
響應(yīng)和自適應(yīng)網(wǎng)絡(luò)設(shè)計(jì)之間的最顯著不同的是在這些解決方案被應(yīng)用于一個(gè)網(wǎng)站的方式。由于響應(yīng)式設(shè)計(jì)創(chuàng)建了一個(gè)完全流動(dòng)布局,最好是在哪里你項(xiàng)目中使用重新設(shè)計(jì)從地上爬起來的網(wǎng)站。
試圖改造現(xiàn)有網(wǎng)站的代碼,成為響應(yīng)往往是一個(gè)艱苦的事情,因?yàn)槟愀揪蜎]有控制的水平,如果你是從頭開始開發(fā)這些代碼,并采取響應(yīng)的設(shè)計(jì)考慮到了這一過程的最早階段,你將不得不。這意味著,當(dāng)你改造一個(gè)網(wǎng)站響應(yīng),你不得不做出妥協(xié),以保持現(xiàn)有的代碼庫中。
如果您正在使用現(xiàn)有的固定寬度的網(wǎng)站工作,自適應(yīng)方法意味著你可以離開該網(wǎng)站是專為完整的尺寸,并根據(jù)需要額外自適應(yīng)添加斷點(diǎn)。在某些情況下,如果一個(gè)項(xiàng)目的預(yù)算是小,如果它只會(huì)容納的開發(fā)工作少量的,你可以選擇只為小屏幕/移動(dòng)為中心的大小增加新的自適應(yīng)斷點(diǎn)。這意味著您將允許更大的屏幕,都使用相同的布局 – 也許一個(gè)960斷點(diǎn)的版本這是什么網(wǎng)站很可能是最初設(shè)計(jì)為。
上攻到自適應(yīng)方法是,你可以更好地利用現(xiàn)有網(wǎng)站的代碼,但缺點(diǎn)之一是,你正在創(chuàng)建你選擇支持每個(gè)斷點(diǎn)不同的布局模板。這必將對(duì)開發(fā)和維護(hù)的長期本解決方案所需的工作量產(chǎn)生影響。
設(shè)計(jì)控制
一種響應(yīng)網(wǎng)站的優(yōu)勢(shì)之一是,他們的流動(dòng)性使他們適應(yīng)并支持所有的屏幕尺寸,而不是只在一個(gè)自適應(yīng)的方法確定的預(yù)先設(shè)定的斷點(diǎn)。然而事實(shí)是,響應(yīng)網(wǎng)站可以看一些關(guān)鍵的屏幕尺寸(對(duì)應(yīng)于市場上流行的設(shè)備一般大小)很大,但視覺設(shè)計(jì)往往打破了這些流行的分辨率之間。
例如,一個(gè)網(wǎng)站可能在1400像素,960像素中間的屏幕尺寸,屏幕看起來很小的480像素,但什么寬屏幕布局很好看這些尺寸的介于兩者之間的狀態(tài)?作為設(shè)計(jì)師,你有一點(diǎn)無法控制這些介于兩者之間的大小和頁面的那些大小視一眼往往不太理想。
具有自適應(yīng)網(wǎng)站,你有被使用過的各種布局更設(shè)計(jì)控制,因?yàn)樗鼈兪腔谝呀⒌臄帱c(diǎn)固定的大小。這些尷尬的狀態(tài)在兩者之間是沒有問題的再因?yàn)槟憔脑O(shè)計(jì)的每一個(gè)“看”(即每個(gè)斷點(diǎn)的顯示屏)將交付給參觀者。
至于因?yàn)檫@級(jí)設(shè)計(jì)的控制可能聽起來誘人,你一定要知道它是要付出代價(jià)的。是的,您對(duì)每一個(gè)斷點(diǎn)的外觀完全控制,但是這意味著你必須投資設(shè)計(jì)為每個(gè)獨(dú)特的布局所需要的設(shè)計(jì)時(shí)間。你選擇以設(shè)計(jì)為,更多的時(shí)間越斷點(diǎn),你需要在這個(gè)過程花費(fèi)。
支持的廣度
這兩種反應(yīng)和適應(yīng)性網(wǎng)頁設(shè)計(jì)欣賞相當(dāng)強(qiáng)勁的支持,尤其是在現(xiàn)代瀏覽器。
自適應(yīng)網(wǎng)站需要對(duì)屏幕尺寸的檢測無論是服務(wù)器端組件或Javascript。顯然,如果一個(gè)自適應(yīng)網(wǎng)站需要JavaScript,這意味著瀏覽器需要有它啟用,以使該站點(diǎn)正常工作。這可能不是一個(gè)大問題給你,因?yàn)榇蠖鄶?shù)人都會(huì)有使用Javascript在他們的瀏覽器,但任何時(shí)候一個(gè)網(wǎng)站有上的任何一個(gè)關(guān)鍵的依賴,應(yīng)該注意。
網(wǎng)站的響應(yīng)和動(dòng)力他們媒體查詢將在所有現(xiàn)代瀏覽器正常工作。你將有唯一的問題是用最古老的版本的Internet Explorer自8及以下版本不支持媒體查詢。要解決此,一個(gè)Javascript填充工具經(jīng)常使用,這意味著有JavaScript的依賴在這里為好,至少在IE瀏覽器的那些過時(shí)的版本。同樣,這可能并不多你一個(gè)問題,特別是如果你的網(wǎng)站的分析表明您沒有收到使用這些舊版瀏覽器眾多參觀者。
未來的友好
網(wǎng)站的響應(yīng)的流體性質(zhì)讓他們?cè)谶m應(yīng)網(wǎng)站的優(yōu)勢(shì),當(dāng)談到未來的友好性。這是因?yàn)檫@些網(wǎng)站的響應(yīng)不建,以適應(yīng)只有先前建立一套轉(zhuǎn)折點(diǎn)。他們適應(yīng),以適應(yīng)所有的屏幕,包括那些實(shí)際上可能不是當(dāng)今市場。這意味著響應(yīng)站點(diǎn)將不需要被“固定”,如果新屏幕分辨率突然變得流行。
看著在設(shè)備景觀令人難以置信的各種(截至2015年8月,有超過24,000名不同的Android設(shè)備在市場上),有一個(gè)網(wǎng)站,會(huì)盡力適應(yīng)這種廣泛的屏幕是未來友好至關(guān)重要。這是因?yàn)闄M向不可能得到任何在將來,這意味著,在設(shè)計(jì)用于特定的屏幕或大小將變得不可能,如果我們尚未達(dá)到這一現(xiàn)實(shí)更少多樣化。
在這種情況下比較的另一邊,如果一個(gè)網(wǎng)站是自適應(yīng)的,它不適合新的決議,可能會(huì)在市場中變得重要,那么,你可能會(huì)被迫斷點(diǎn)添加到您所創(chuàng)建的網(wǎng)站。這增加了設(shè)計(jì)和開發(fā)時(shí)間到項(xiàng)目和它意味著那些自適應(yīng)網(wǎng)站必須一致監(jiān)測,以確保沒有新的中斷點(diǎn)已被引入必須添加到網(wǎng)站上的市場。再次,與設(shè)備的多樣性是它是什么,不必不斷地用新的斷點(diǎn)檢查新的尺寸和可能容納它們是會(huì)對(duì)工作產(chǎn)生影響,你必須支持一個(gè)位點(diǎn)和保養(yǎng)的費(fèi)用一個(gè)持續(xù)的挑戰(zhàn)公司或組織對(duì)他們來說,網(wǎng)站是為。
性能
自適應(yīng)網(wǎng)頁設(shè)計(jì)早已被從一個(gè)貧窮的解決方案被告(不公平所以在很多情況下),下載的速度/性能的角度來看。這主要是由于這樣的事實(shí),在這種方法中的初期,許多網(wǎng)頁設(shè)計(jì)師只需上漲小屏幕媒體查詢到網(wǎng)站的現(xiàn)有CSS。這迫使用于大屏幕圖像和資源傳遞到所有的設(shè)備,即使這些小屏幕沒有在最終的布局中使用它們。因?yàn)檫@些天響應(yīng)式設(shè)計(jì)已經(jīng)走過了漫長的道路,但現(xiàn)實(shí)是,今天的質(zhì)量響應(yīng)網(wǎng)站不從性能問題的困擾。
下載速度慢和臃腫的網(wǎng)站是不是一個(gè)負(fù)責(zé)任的網(wǎng)站的問題-它是一個(gè)可以在所有網(wǎng)站上發(fā)現(xiàn)了一個(gè)問題。圖片過于沉重,從社交媒體,過度的腳本和更飼料和權(quán)衡下來的網(wǎng)站,但都反應(yīng)和適應(yīng)性網(wǎng)站建成后可快速裝載。當(dāng)然, 它們也可以以一種不會(huì)使性能優(yōu)先構(gòu)造,但是這不是解決方案本身的性狀,而是參與網(wǎng)站本身的發(fā)展團(tuán)隊(duì)的一種反映。
除了布局
一個(gè)自適應(yīng)網(wǎng)頁設(shè)計(jì)中最引人注目的方面是,你不僅在網(wǎng)站設(shè)置斷點(diǎn)的設(shè)計(jì)控制,還以為是為那些網(wǎng)站版本提供的資源。例如,這意味著視網(wǎng)膜圖像可以僅發(fā)送到視網(wǎng)膜的設(shè)備,非視網(wǎng)膜屏幕獲得更適當(dāng)?shù)膱D像是在文件大小更小。其它網(wǎng)站資源(JavaScript文件,CSS樣式等)需要,將用于當(dāng)他們被巧妙地只交付。
這種利用自適應(yīng)網(wǎng)頁設(shè)計(jì)遠(yuǎn)遠(yuǎn)超出“如果你是改造一個(gè)網(wǎng)站,自適應(yīng)可使用一個(gè)更簡單的方法。”所有的網(wǎng)站,包括徹底的重新設(shè)計(jì),對(duì)簡單的公式可以從一個(gè)更聰明的方法中獲益,以更有針對(duì)性的體驗(yàn)。
此方案顯示了這種“有求必應(yīng)與適應(yīng)性”的爭論的細(xì)致入微的性質(zhì)。雖然這是事實(shí),自適應(yīng)的方法可能更適合較敏感的部位改造,它也可以是全重新設(shè)計(jì)的最佳解決方案。同樣,在某些情況下,一個(gè)負(fù)責(zé)任的做法可以被添加到現(xiàn)有網(wǎng)站的代碼庫,使該網(wǎng)站的充分響應(yīng)方法的所有優(yōu)點(diǎn)。
哪個(gè)方法更好?
當(dāng)談到與響應(yīng)自適應(yīng)網(wǎng)頁設(shè)計(jì),沒有明確的“贏家”,雖然反應(yīng)肯定是比較流行的做法。事實(shí)上,“精益求精”的方法取決于具體項(xiàng)目的需要。此外,這并不需要是一個(gè)“要么/或”的情況。有許多網(wǎng)絡(luò)專業(yè)人士誰正在建設(shè),結(jié)合了最好的響應(yīng)網(wǎng)頁設(shè)計(jì)(流體寬度,未來支持)與自適應(yīng)設(shè)計(jì)(更好的設(shè)計(jì)控制,站點(diǎn)資源的智能負(fù)載)的優(yōu)勢(shì)點(diǎn)。
俗稱RESS(自適應(yīng)網(wǎng)頁設(shè)計(jì)與服務(wù)器端組件),這種做法表明,真的有沒有“一刀切的解決方案。”無論是響應(yīng)網(wǎng)頁設(shè)計(jì)和適應(yīng)性都有自己的長處和他們的挑戰(zhàn),所以你需要確定哪一個(gè)將工作最適合你的特定項(xiàng)目,或者如果一個(gè)混合的解決方案實(shí)際上可能最適合您。
作者:朋友圈科技
相關(guān)內(nèi)容 Related
- 為什么響應(yīng)式設(shè)計(jì)需要媒體查詢2016/8/5
- 虛擬主機(jī)被搜索引擎爬蟲訪問耗費(fèi)大量流量解決方法2016/8/3
- 網(wǎng)站建設(shè)中如何創(chuàng)建完美的顏色組合2016/8/1
- 什么是長尾關(guān)鍵詞?2016/8/1
- 建設(shè)企業(yè)或個(gè)人網(wǎng)站的好處2016/7/8
- 前端開發(fā)者需要知道的常識(shí)2016/7/6
- 12種方法為您拓展業(yè)務(wù)通道2016/7/27
- SEO優(yōu)化的三大技巧2016/7/24
- 10的方法來提高你的網(wǎng)站設(shè)計(jì)2016/7/24
- 網(wǎng)站統(tǒng)計(jì)用哪個(gè)比較好,百度?cnzz?2016/7/21