網(wǎng)站設(shè)計(jì)頁設(shè)計(jì)(Responsive Web Design簡稱RWD)這個(gè)術(shù)語,由伊?!ゑR科特(Ethan Marcotte)提出。他在A List Apart發(fā)表了一篇開創(chuàng)性的文章,將三種已有的開發(fā)技術(shù)(彈性網(wǎng)格、彈性圖片、媒體查詢)整合起來,并命名為響應(yīng)式網(wǎng)頁設(shè)計(jì)。
響應(yīng)式網(wǎng)站設(shè)計(jì)應(yīng)根據(jù)用戶使用的設(shè)備的分辨率大小進(jìn)行相應(yīng)的響應(yīng)與調(diào)整,大限度滿足不同設(shè)備用戶體驗(yàn)需求。
響應(yīng)式網(wǎng)站設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端,不需要為每個(gè)終端做一個(gè)特定的版本。簡單地理解:一個(gè)響應(yīng)式網(wǎng)站=手機(jī)端網(wǎng)站+pad端網(wǎng)站+PC端網(wǎng)站。具體的實(shí)現(xiàn)方式由多方面決定,包括彈性網(wǎng)格、彈性圖片、CSS媒體查詢(media query)的使用等。彈性網(wǎng)格(flexible grids)可基于屏幕分辨率擴(kuò)展或拉伸內(nèi)容。彈性圖片(flexible grids)在小屏幕上可縮小尺寸,并可擴(kuò)展至大尺寸以支持大屏幕。媒體查詢(media queries)是放在站點(diǎn)HTML和樣式表種的代碼段,用來收集設(shè)備顯示能力的信息以支持多種形式的界面。響應(yīng)式網(wǎng)站的優(yōu)點(diǎn):
1、用戶體驗(yàn)友好
隨著電腦尺寸多元化,智能設(shè)備(pad/智能手機(jī))普及化,在當(dāng)下追求用戶體驗(yàn)至上的時(shí)代,之前網(wǎng)站普遍使用固定的寬度(960px)逐漸滿足不了現(xiàn)在不同設(shè)備與不同分辨率需求。在高分辨率電腦寬屏顯示器上,兩邊留白過多。在手機(jī)上顯示,內(nèi)容顯示過小,用戶為了看清楚,首先需要放大界面,再左右拖拖界面。響應(yīng)式網(wǎng)站可以根據(jù)不同終端、不同尺寸和不同應(yīng)用環(huán)境,自動(dòng)調(diào)整界面布局、展示內(nèi)容、內(nèi)容大小,提供非常好視覺展示效果,一致性友好體驗(yàn)。2、節(jié)省設(shè)計(jì)開發(fā)成本
相對(duì)需要開發(fā)電腦網(wǎng)站、pad網(wǎng)站、手機(jī)網(wǎng)站來說,響應(yīng)式網(wǎng)站節(jié)省設(shè)計(jì)開發(fā)成本的。從設(shè)計(jì)角度說,一般來說,響應(yīng)式網(wǎng)站界面只需要設(shè)計(jì)兩套設(shè)計(jì)效果圖就行了,電腦端與pad端基本可以共用一套設(shè)計(jì)效果圖,手機(jī)端重新設(shè)計(jì)一套就可以了;從前端開發(fā)角度說,再不需要開發(fā)三套完成不一樣的前端代碼,只需要根據(jù)臨界點(diǎn)為不同終端開發(fā)三套不同的CSS樣式;從后期維護(hù)角度來說,再不需要分別維護(hù)pc界面、pad界面、移動(dòng)界面,專心維護(hù)一個(gè)網(wǎng)站即可。3、SEO友好
由于響應(yīng)網(wǎng)站在不同終端有友好的界面展示效果,用戶可以與網(wǎng)站一直保持聯(lián)系,比如URL不變積累分享;通過單一的URL地址手機(jī)所有的社交分享鏈接化搜索引擎。搜索引擎也在變得越來越聰明,它們足夠智能可以完成移動(dòng)網(wǎng)站和桌面網(wǎng)站的鏈接。Google也建議優(yōu)先采用響應(yīng)式設(shè)計(jì),因?yàn)闊o論是什么網(wǎng)頁版本都是相同的HTML、相同的內(nèi)容,Google最容易處理。響應(yīng)式網(wǎng)站的缺點(diǎn):
1、對(duì)老版IE兼容性不友好
對(duì)于老版本IE(IE6、IE7、IE8)支持不好,這是一個(gè)致命的問題,如果你的網(wǎng)站用戶大多還采用老版本的IE的話,建議不做響應(yīng)式網(wǎng)站。2、靈活性有所欠缺
基于不同終端的設(shè)備屬性不同,對(duì)產(chǎn)品用戶體驗(yàn)要求就會(huì)截然不同。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做
響應(yīng)式網(wǎng)站設(shè)計(jì),如:電商類型網(wǎng)站,寬屏的PC端內(nèi)容如果全部要在手機(jī)端進(jìn)行展示,勢(shì)必導(dǎo)致手機(jī)端的界面非常長,需要根據(jù)手機(jī)端屬性進(jìn)行重新信息框架設(shè)計(jì),這樣對(duì)響應(yīng)網(wǎng)站要求非常高,實(shí)現(xiàn)難度與成本非常高。但是大型網(wǎng)站為了提高用戶體驗(yàn),通常做法,把高分辨率寬屏網(wǎng)站最小的響應(yīng)尺寸響應(yīng)到1024px,不再適配手機(jī)端,手機(jī)端重新設(shè)計(jì)開發(fā)一套手機(jī)網(wǎng)站,簡單理解為2.5響應(yīng),如:電商網(wǎng)站亞馬遜,Calvin Klein、Nike、視頻網(wǎng)站Youtube等。3、速度可能會(huì)變慢
由于響應(yīng)式頁面是同時(shí)下載多套CSS樣式代碼,可能在手機(jī)上就下載PC、pad的冗余代碼,導(dǎo)致文件變大,影響加載速度。不過CSS樣式的代碼占用內(nèi)存相對(duì)圖片來說不算大,所以如果前端編程處理得好前提之下,這就不會(huì)影響網(wǎng)站加載速度??偨Y(jié)
根據(jù)響應(yīng)式網(wǎng)站的優(yōu)缺點(diǎn),我們不難看出:企業(yè)官網(wǎng)、單頁宣傳網(wǎng)站非常適合做響應(yīng)式網(wǎng)站,由于它們的界面內(nèi)容比較少,結(jié)構(gòu)比較簡單,所以在不同終端、不同尺寸設(shè)備上進(jìn)行網(wǎng)站信息框架調(diào)整、內(nèi)容加減、圖片、文字、柵格響應(yīng)比較容易。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做響應(yīng)式網(wǎng)站,如:電商類型網(wǎng)站。但是隨著科技不斷發(fā)展,響應(yīng)技術(shù)逐漸完善,給響應(yīng)式設(shè)計(jì)提供強(qiáng)有力的技術(shù)支持;響應(yīng)式設(shè)計(jì)可以在不同終端提供好展示效果與友好的用戶體驗(yàn),符合用戶體驗(yàn)智商的趨勢(shì)。所以說,
響應(yīng)式網(wǎng)站建設(shè)必定是未來發(fā)展趨勢(shì)。
文章標(biāo)題:響應(yīng)式網(wǎng)站的優(yōu)缺點(diǎn)分析,看完再做選擇
分享URL:http://m.newbst.com/news29/71179.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有做網(wǎng)站、響應(yīng)式網(wǎng)站等
廣告
聲明:本網(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í)需注明來源:
創(chuàng)新互聯(lián)