有關(guān)如何區分響應式網(wǎng)站和自適應網(wǎng)站,可以參考之前的一篇文章:SiteServer CMS 如何實(shí)現響應式網(wǎng)站---原理篇。
今天想要講的是響應式網(wǎng)站四個(gè)致命缺陷:
1、響應式站用戶(hù)體驗不能最優(yōu)化
響應式網(wǎng)站設計基本原則是:自動(dòng)識別屏幕尺寸并做出相應調整的網(wǎng)頁(yè)設計,頁(yè)面布局和展示的內容可能會(huì )隨著(zhù)屏幕尺寸變化而有所變化。響應式布局不管使用什么設備都是在服務(wù)器把數據推送到瀏覽器后,腳本或CSS自行檢測設備屏幕大小后執行對應的樣式表內容,并且一直通過(guò)本地腳本在監聽(tīng)屏幕大小的變化,隨時(shí)做出樣式響應的變化。
比如在1280x768分辨率的電腦屏幕上和在320x240分辨率的手機屏幕上顯示一樣的內容的話(huà),內容都擠一起無(wú)法看清楚。所以響應式設計是選擇把部分內容隱藏來(lái)解決這個(gè)問(wèn)題。但這樣的話(huà)頁(yè)面的表現效果就不是那么好了,用戶(hù)的交互體驗也非常不友好。
比如下面這個(gè)響應式網(wǎng)站,右邊移動(dòng)端和左邊電腦端相比,把產(chǎn)品展示模板隱藏了,這對用戶(hù)體驗是非常不友好的。而且左邊明顯不符合我們平?吹降囊苿(dòng)端的設計。同一個(gè)網(wǎng)站PC端和移動(dòng)端風(fēng)格差異太大,感覺(jué)就是兩個(gè)沒(méi)有任何聯(lián)系的網(wǎng)站。
如果是單獨設計PC站和移動(dòng)站,就能整體考慮規劃,設計成一個(gè)整體風(fēng)格類(lèi)似功能相同的網(wǎng)站,避免像上面這種顯示上的突兀,比如天貓PC站和移動(dòng)站的對比:
從天貓的做法可以看到:移動(dòng)站界面是大家熟悉的和流行的,交互上更接近APP的UI風(fēng)格。
2、響應式設計并不利于SEO和推廣
百度對移動(dòng)站和PC站的關(guān)鍵詞處理策略不盡相同。如果網(wǎng)站設計成響應式, 所有設備訪(fǎng)問(wèn)同一份代碼,這就非常不利于百度關(guān)鍵詞優(yōu)化。
而且百度的搜索排名是區分移動(dòng)站和PC站的。如果PC站和移動(dòng)站是獨立分開(kāi)的,那么移動(dòng)站所做的百度排名,不會(huì )影響PC站的排名,PC站的百度優(yōu)化也可以獨立于移動(dòng)站進(jìn)行。
從商業(yè)推廣的角度來(lái)看的話(huà),移動(dòng)站和PC站分開(kāi)單獨做比設計成一個(gè)統一的響應式網(wǎng)站會(huì )更好。
3、響應式網(wǎng)站代碼冗余,打開(kāi)速度慢
響應式網(wǎng)站的實(shí)現原理通常是通過(guò)css或js來(lái)控制部分內容顯示或不顯示,從而使得網(wǎng)站在移動(dòng)設備上看起來(lái)也正常。但通過(guò)代碼不顯示的內容其實(shí)依然還在頁(yè)面上,只是表面看不見(jiàn)(不顯示)了而矣,所以瀏覽器依然還會(huì )加載這部分看不見(jiàn)的網(wǎng)頁(yè)代碼。也就是說(shuō)響應式網(wǎng)站要比單獨的非響應式網(wǎng)站加載更多的數據,從而造成流量增加,而且網(wǎng)頁(yè)的打開(kāi)速度變慢。
比如說(shuō)單獨設計一個(gè)移動(dòng)端網(wǎng)站,整個(gè)頁(yè)面大小可能是100kb,如果設計成響應式網(wǎng)站(PC站和移動(dòng)站代碼合在一起)則頁(yè)面大小可能就是400kb甚至更多。導致打開(kāi)響應式網(wǎng)站的時(shí)間相比非響應式會(huì )慢很多,尤其是手機在用2G、3G網(wǎng)絡(luò )上網(wǎng)的情況下更明顯。
4、響應式兼容性差
響應式網(wǎng)站算是比較新的技術(shù)了,運用了很多html5的特性,只有瀏覽器的高版本才支持這些html5特性,尤其是微軟的IE瀏覽器對這一塊的支持比較弱。