廣告:
什么是響應(yīng)式網(wǎng)站?
響應(yīng)式網(wǎng)站英文為:Responsive Website 或者Responsive Web design(響應(yīng)式設(shè)計)。
響應(yīng)式網(wǎng)站也叫HTML5響應(yīng)式網(wǎng)站,也叫自適應(yīng)網(wǎng)站。網(wǎng)站頁面可根據(jù)用戶不同的瀏覽設(shè)備(一般指智能手機(jī)、ipad或ipod、觸屏、電腦、手機(jī)app內(nèi)嵌入瀏覽和微信內(nèi)瀏覽)和瀏覽尺寸,從而能夠自適應(yīng),顯示出不同的展現(xiàn)形式,響應(yīng)式企業(yè)網(wǎng)站頁面更加簡潔、美觀、大氣,可以提升企業(yè)形象和產(chǎn)品視覺效果,提升用戶體驗(yàn),對搜索引擎收錄也會更加友好。
互聯(lián)網(wǎng)技術(shù)的快速發(fā)展,手機(jī)移動端用戶在不斷增加,僅僅依靠PC網(wǎng)站體驗(yàn)已經(jīng)無法滿足人們?nèi)粘I罨蚬ぷ鞯男枰藗儗W(wǎng)站有著更高的要求。響應(yīng)式網(wǎng)站應(yīng)運(yùn)而生,它能夠很好的滿足用戶的需求,帶給終端用戶良好的訪問體驗(yàn)。響應(yīng)式網(wǎng)站已經(jīng)成為當(dāng)下較為主流的網(wǎng)站設(shè)計,越來越多的企業(yè)傾向于建設(shè)響應(yīng)式網(wǎng)站。
響應(yīng)式網(wǎng)站的特點(diǎn):
1.快捷傳播,統(tǒng)一管理,維護(hù)方便,跨系統(tǒng),跨平臺,跨終端等標(biāo)桿級網(wǎng)站。
2.只需對站點(diǎn)后臺和域名作的維護(hù)和推廣,降低網(wǎng)站運(yùn)營成本,提高傳播效率。
3.用戶可以使用瀏覽器、二維碼掃描工具等獲取網(wǎng)站信息。
4.響應(yīng)式架構(gòu)會根據(jù)各終端設(shè)備的分辨率自動調(diào)整頁面布局和體驗(yàn)交互程序,讓用戶能夠快速、舒適、直觀地從瀏覽器或微信平臺等獲取信息。
響應(yīng)式網(wǎng)站的分類:
1 HTML5響應(yīng)式網(wǎng)站(客戶端響應(yīng)):
此類型網(wǎng)站適用于一般企業(yè)建站,一般提到的響應(yīng)式網(wǎng)站就是指這一類的。技術(shù)員使用現(xiàn)在流行的html5技術(shù)標(biāo)準(zhǔn)來設(shè)計網(wǎng)站,依靠瀏覽器端css的媒體查詢 Media Query,百分比流式布局。我們可以在定義設(shè)備不同的尺寸下選擇需要加載的樣式。該網(wǎng)站采用移動優(yōu)先方式,實(shí)現(xiàn)了默認(rèn)的線性布局。
常見代碼:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> @media screen and (min-width:600px){ /*css查詢代碼*/}
優(yōu)點(diǎn):
a 用一個網(wǎng)址,布署一個網(wǎng)站,設(shè)計元素易被反復(fù)利用,只需要維護(hù)一套CSS。設(shè)計人員一個頁面網(wǎng)址只需要維護(hù)一個頁面和對應(yīng)的樣式(CSS)。
b 用戶體驗(yàn)好,用戶只需記住一個網(wǎng)址,用不同設(shè)備瀏覽有不同的呈現(xiàn)效果。
c PC端和移動端十分接近,網(wǎng)站內(nèi)容和布局令用戶感到“熟悉”。
d 維護(hù)成本小,有時pc網(wǎng)站只需要更改幾處css,就可以在手機(jī)端有很好的用戶體驗(yàn)。
缺點(diǎn):
a 只適用于企業(yè)型網(wǎng)站或者簡單網(wǎng)站,如果網(wǎng)站屬于偏重信息傳達(dá)而輕交互的網(wǎng)站,那這個解決方案其實(shí)恰到好處,CSS解決就足夠。但是,如果我想要做更多的「移動化設(shè)計」,比如減少信息層級、增強(qiáng)手勢操作等等,或者移動端和pc網(wǎng)站界面功能大不一樣,那么這種方案維護(hù)起來就非常困難。一套前端代碼要適配各種桌面顯示器、橫豎屏平板、橫豎屏手機(jī),方案維護(hù)成本非常高,不易變更。開發(fā)方面的成本有所降低,但有限。
b 網(wǎng)站有時并非按需加載css、js,pc站和手機(jī)站在瀏覽時會同時加載pc端和手機(jī)端的css、js腳本。這樣浪費(fèi)服務(wù)器端和用戶瀏覽器端流量,同時增加頁面腳本和css的計算復(fù)雜度,可能導(dǎo)致用戶瀏覽時性能下降,也會造成不流暢的用戶體驗(yàn)。
案例:現(xiàn)在企業(yè)網(wǎng)站新建網(wǎng)站一般都是這一類別的。
2 瀏覽器端腳本跳轉(zhuǎn)(客戶端響應(yīng)):
嚴(yán)格來說此類型不叫響應(yīng)式網(wǎng)站。但是我們站在用戶角度來說把它放在響應(yīng)式網(wǎng)站類別里面去。這是中大型網(wǎng)站比較常用的方法,實(shí)際上pc站和手機(jī)站是兩個不同的網(wǎng)站。每個頁面功能較為復(fù)雜,pc端和手機(jī)端用戶體驗(yàn)完全不一樣。如果放在一個頁面下維護(hù),維護(hù)起來就相當(dāng)復(fù)雜,而且容易出錯。
優(yōu)點(diǎn):
a 兩個域名,布署兩個網(wǎng)站,分開維護(hù),不同的技術(shù)人員維護(hù)不同的網(wǎng)站,網(wǎng)站可維護(hù)性好。
b 用戶體驗(yàn)好,不同瀏覽器設(shè)備只需加載自己需要css和腳本,用戶瀏覽起來快速流暢。
缺點(diǎn):
a 開發(fā)成本大,兩個域名,兩個網(wǎng)站,企業(yè)開發(fā)成本和維護(hù)成本增加,跳轉(zhuǎn)到不同網(wǎng)站相對應(yīng)的詳細(xì)頁面時成本增加,增加程序難度。一般只有大站才會采用這種方案,不在乎開發(fā)成本。
b 用戶端有兩個網(wǎng)址,跳轉(zhuǎn)時可能浪費(fèi)帶寬和用戶瀏覽時暫,F(xiàn)象。
案例:
53bk數(shù)字報網(wǎng)站演示 pc端:http://demo.53bk.com/ 手機(jī)端:http://demo.53bk.com/m;
阿里巴巴網(wǎng)站:pc端:http://www.1688.com 手機(jī)端:http://m.1688.com;
京東網(wǎng)站: pc端:http://www.jd.com 手機(jī)端:http://m.jd.com;
騰訊網(wǎng)站 pc端:http://www.qq.com 手機(jī)端:http://xw.qq.com
3 服務(wù)器端響應(yīng)式網(wǎng)站:中大型網(wǎng)站解決方案
英文RESS:響應(yīng)式Web設(shè)計+服務(wù)器端組件 (RESS: Responsive Web Design + Server-Side Components)。RESS,在服務(wù)器后端就對用戶進(jìn)行一定的區(qū)分,對不同的設(shè)備返回不同的內(nèi)容,以降低前端響應(yīng)式的成本。這個方案相當(dāng)于把上面兩個方案揉到一起,取長補(bǔ)短。我們可能永遠(yuǎn)不會有一個易于開發(fā)且可以在所有設(shè)備上完美運(yùn)行的解決方案,但是RESS提供了一個很好的折衷方案,可以解決響應(yīng)式Web設(shè)計遇到的許多性能問題。
優(yōu)點(diǎn):
a 用一個網(wǎng)址,布署一個網(wǎng)站。一個網(wǎng)站成本比兩個網(wǎng)站成本要小很多,這樣我們只需要多維護(hù)一套風(fēng)格模板即可,網(wǎng)站可維護(hù)性好。
b 用戶體驗(yàn)好,不同瀏覽器設(shè)備只需加載自己需要css和腳本,用戶瀏覽起來快速流暢。
缺點(diǎn): 開發(fā)成本大,服務(wù)器端開發(fā)需要用到一些比較大的框架,同時需要使用兩套不同的風(fēng)格模板,不適合小型網(wǎng)站開發(fā)使用。
案例:
53bk數(shù)字報網(wǎng)站官網(wǎng): http://www.asiacable.com.cn/
閱速公司網(wǎng)站官網(wǎng): http://www.ysneo.com/
53BK數(shù)字報部分客戶如:陵川新聞 http://dzb.lczf.cn/
國外著名網(wǎng)站:
google搜索 http://www.google.com/
亞馬遜購物網(wǎng)站 http://www.amazon.com/ (中國站 www.amazon.cn)
ebay全球外貿(mào)網(wǎng)站 https://www.ebay.com/
下面是服務(wù)器端響應(yīng)式網(wǎng)站幾個網(wǎng)站的分析圖:
手機(jī)上看到的Ebay網(wǎng)站樣子
電腦上看到eBay網(wǎng)站的樣子,切換到手機(jī)界面不清除緩存,網(wǎng)站并沒有及時響應(yīng)成手機(jī)界面
google網(wǎng)站電腦看和手機(jī)上看是不同的界面,但是并不是htmlt5瀏覽端響應(yīng),需要刷新清空緩存才有不同的界面
廣告: