到2014年，會有更多的人用移動設(shè)備代替PC端訪問互聯(lián)網(wǎng)，所以打造易訪問的移動端成了Web開發(fā)者最關(guān)注的問題之一。因此響應(yīng)式設(shè)計應(yīng)運(yùn)而生，但從我個人的角度看，它并不值得大力追捧，為什么？
響應(yīng)式設(shè)計不是萬能的。我自己過去也是一個響應(yīng)式設(shè)計的粉絲，發(fā)現(xiàn)很多Web應(yīng)用不能很好的在移動屏幕上顯示，Google地圖就是一個很好的例子。包含很多圖片的網(wǎng)站也適合響應(yīng)式設(shè)計，但以文本為主的網(wǎng)頁和博客就不是了，甚至于我覺得對這種Web網(wǎng)站實(shí)施響應(yīng)式設(shè)計只是浪費(fèi)時間。
1. “響應(yīng)式設(shè)計”達(dá)不到用戶期望
Usability 101 規(guī)則的第一條就是“滿足用戶期望”。以博客為例子，它被廣泛接受的設(shè)計方式是： 從上往下、內(nèi)容和圖片各放一邊、提供邊欄，這個已在數(shù)百萬博客中被應(yīng)用，因?yàn)樗_(dá)到了用戶的期望。
但若你訪問經(jīng)過響應(yīng)式設(shè)計的移動網(wǎng)頁，一般邊欄會消失，或者會跳到最頂部或者最底部， 反正不是你期望的地方。以Cats Who Code 為例，下面是桌面顯示，有頂部的導(dǎo)航、邊欄（包括最近Post），小廣告欄和搜索框。下面是iPhone的界面：
可看出導(dǎo)航和邊欄消失了，繼續(xù)往下拖的時候我終于找到了邊欄，你可能會覺得這只是個個例， 但事實(shí)是這是一個典型的響應(yīng)式設(shè)計，我們想看到的是以不犧牲桌面元素為前提的移動界面顯示，顯然這不是。
2. 花錢多 耗時長
一般來說，響應(yīng)式設(shè)計比非響應(yīng)式設(shè)計要花更多的錢。如果有人Damn地爭論響應(yīng)式設(shè)計比建立一個額外的移動版面更便宜，我同意，但你知道比響應(yīng)式設(shè)計更便宜的是什么嗎？什么都不用！
此外你要想想這花了你多少時間，從響應(yīng)式設(shè)計里面你得到了多少投資回報，獲得了什么？
3. 非響應(yīng)式設(shè)計表現(xiàn)也不賴
看我自己的博客在Mac上顯示效果：
看它在我的iPhone上：
在iPhone4英寸的屏幕上，讀起來感覺很好。如果文字太小了，那就雙擊放大吧，待會看完了又縮回來并不是什么難事。 而且好笑的是，現(xiàn)在的手機(jī)界面就是為了非響應(yīng)式設(shè)計準(zhǔn)備的， 且大部分手機(jī)表現(xiàn)得很好。如果你非要揪出一些意外的話，去看看那些網(wǎng)頁的桌面版，設(shè)計也同樣很差。
4. 對加載時間沒好處
我們知道移動設(shè)備操作時是基于互聯(lián)網(wǎng)子寬帶的聯(lián)網(wǎng)速度，所以網(wǎng)頁要確保最少的負(fù)荷來減少加載時間，很多響應(yīng)式設(shè)計并未真正減少加載時間，因?yàn)樵S多設(shè)計師只是隱藏了那些元素， 對優(yōu)化加載毫無好處。而非響應(yīng)式設(shè)計可以選擇“延遲加載”，這是一個選擇先加載最密集元素再到其他的技巧。
5. 響應(yīng)式設(shè)計其實(shí)是種妥協(xié)
可以說響應(yīng)式設(shè)計是設(shè)計師的主觀決定，他們認(rèn)為桌面顯示界面不再適用移動界面，然后覺得一定要做出相應(yīng)改變。而用戶如果看到更不適的界面后會發(fā)問，為什么要弄個這么不一樣又不是很好的顯示方式？這觸犯了usability 101第二條規(guī)則“不要讓用戶覺得他們無法控制局面”。
所以我的觀點(diǎn)是：這只是一種妥協(xié)，是設(shè)計師的主觀決定，用戶并沒有覺得多大的不適，特別是當(dāng)響應(yīng)式設(shè)計既要錢又要花時間的時候。
最后，我寫這篇文章有兩個原因，我覺得響應(yīng)式設(shè)計在很多情形下是沒必要的；在互聯(lián)網(wǎng)上明顯缺少對響應(yīng)式設(shè)計的爭論。我不否定響應(yīng)式設(shè)計理論本身，但事實(shí)是我見過的許多情形下它真的沒必要。很多人習(xí)慣在別人擁護(hù)時并認(rèn)為那是天經(jīng)地義的事，但你最好從一個開發(fā)者的角度來看看，這真的是你需要的嗎？
PS： 什么是響應(yīng)式設(shè)計？ 頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶使用筆記本還是iPad，頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。
粵公網(wǎng)安備 44010402000282號