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