所謂“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web Design)”也就是自適應(yīng),就是可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。目前這種設(shè)計(jì)已經(jīng)出現(xiàn)在越來越多的國(guó)內(nèi)網(wǎng)站上,目前Google已經(jīng)明確表明鼓勵(lì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。
使用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)有5個(gè)好處:
1、隨著移動(dòng)設(shè)備越來越多,可以提升用戶體驗(yàn)。
2、該設(shè)計(jì)沒有網(wǎng)頁(yè)版本區(qū)分,所以SEO的策略保持一致。
3、可以避免重復(fù)內(nèi)容,專心維護(hù)這一個(gè)網(wǎng)頁(yè)。
4、保持網(wǎng)頁(yè)的原有鏈接。
5、Google也建議優(yōu)先采用響應(yīng)式設(shè)計(jì),因?yàn)闊o論是什么網(wǎng)頁(yè)版本都是相同的HTML、相同的內(nèi)容,Google最容易處理。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)對(duì)SEO是友好的,這些相關(guān)技術(shù)還在不斷演化中,還有許多尚待客服的地方。
下面來說說它的缺陷:
1、對(duì)老版本IE支持不好,這是一個(gè)致命的問題,尤其是IE6,如果你的網(wǎng)站用戶大多還采用老版本的IE的話(建議在統(tǒng)計(jì)工具里看一下),就不適合做響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)了。
2、例如一些小游戲站、視頻站,如果僅僅是網(wǎng)頁(yè)采用了響應(yīng)式設(shè)計(jì),但里面的內(nèi)容依然是只能在PC端打開的話,這時(shí)候就要認(rèn)真考慮了。
國(guó)外copyblogger的博客提到了一個(gè)很特別的案例,就是迪士尼公司的網(wǎng)頁(yè)。他說在迪士尼網(wǎng)頁(yè)中有許多給小朋友玩的網(wǎng)頁(yè)游戲,有些游戲可以在桌上型電腦玩,但是如果使用移動(dòng)設(shè)備就可以無法使用。因此這個(gè)情況下,就必須做出抉擇,放棄使用Responsive Web Design,或是修改游戲。
寫在最后:
從今年開始,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)逐漸流行開來,雖然很熱門,但是并沒有太多網(wǎng)站采用這類的設(shè)計(jì)方式。
響應(yīng)式網(wǎng)站建設(shè)中的常見問題
1、屏幕尺寸多,很難做到一次編碼,到處運(yùn)行
目前,主流的大家用來訪問網(wǎng)頁(yè)的設(shè)備有:計(jì)算機(jī)(廢話),iPad,Android Pad(例如三星的),智能手機(jī)。那么做一個(gè)網(wǎng)站,必須到這些設(shè)備上去測(cè)試和運(yùn)行。普通的網(wǎng)站作坊很少有人會(huì)愿意花這么多的精力去測(cè)試一個(gè)網(wǎng)站。
2、視覺設(shè)計(jì)要求高、細(xì)節(jié)多
因?yàn)椴荒苁褂媒^對(duì)定位,那么在設(shè)計(jì)的時(shí)候需要考慮可讀性以及區(qū)域面積以及在不同的設(shè)備下的行為。這對(duì)一般的設(shè)計(jì)師來說簡(jiǎn)直是一場(chǎng)災(zāi)難。所以很少有出眾的響應(yīng)式網(wǎng)站出現(xiàn)。
3、前端實(shí)現(xiàn)難、跨技術(shù)合作
響應(yīng)式設(shè)計(jì)出的稿子,當(dāng)然還需要響應(yīng)式的實(shí)現(xiàn)。響應(yīng)式的基礎(chǔ)就是HTML5, CSS3。小的建站公司,一般是沒有錢去聘用精通HTML5和CSS3技術(shù)的高手的。最多是讓程序員在寫代碼之前看2天書,然后就趕鴨子上架。這就導(dǎo)致了即使設(shè)計(jì)師設(shè)計(jì)出了很棒的模板,但是在實(shí)現(xiàn)了之后,怎么看怎么不舒服。
4、成本大
因?yàn)轫憫?yīng)式設(shè)計(jì)需要對(duì)多個(gè)界面兼容、功能調(diào)試,導(dǎo)致整個(gè)制作過程需要UI設(shè)計(jì)師和前端工程師要不斷磨合制作。而測(cè)試人員也要在不同的設(shè)備下對(duì)網(wǎng)站進(jìn)行測(cè)試。我們做過調(diào)查。如果創(chuàng)建一個(gè)普通網(wǎng)站的成本是1,那么創(chuàng)建一個(gè)響應(yīng)式模板的成本大概在2.5左右。由于小的建站公司的報(bào)價(jià)普遍比較低,利潤(rùn)空間肯定不支持他們把網(wǎng)站做成響應(yīng)式的。
5、結(jié)論
總的來說,響應(yīng)式網(wǎng)站設(shè)計(jì)比傳統(tǒng)的網(wǎng)站設(shè)計(jì)復(fù)雜的多。它需要更多的人員參與到網(wǎng)站制作中來。它給美工、前端和后臺(tái)開發(fā)團(tuán)隊(duì)之間的協(xié)作模式帶來很多挑戰(zhàn)。因此,響應(yīng)式網(wǎng)站的建設(shè)成本往往是傳統(tǒng)網(wǎng)站的2-3倍。