到(dao)2014年，會(hui)有更多的人用(yong)移動設(she)備代替PC端訪問互聯網，所以打造易訪問的移動端成了Web開發者最關注的問題之一。因此響應式設(she)計應運而生，但(dan)從(cong)我個人的角度看(kan)，它(ta)并不值(zhi)得(de)大力追捧，為什(shen)么(me)？
響應式(shi)(shi)設(she)(she)(she)計(ji)不(bu)(bu)是(shi)萬能(neng)的(de)(de)。我自己過(guo)去也(ye)是(shi)一個(ge)響應式(shi)(shi)設(she)(she)(she)計(ji)的(de)(de)粉絲，發現很(hen)多Web應用不(bu)(bu)能(neng)很(hen)好(hao)的(de)(de)在移動屏幕(mu)上顯示，Google地圖就(jiu)是(shi)一個(ge)很(hen)好(hao)的(de)(de)例子。包含很(hen)多圖片的(de)(de)網(wang)站也(ye)適合響應式(shi)(shi)設(she)(she)(she)計(ji)，但以(yi)文本為主的(de)(de)網(wang)頁(ye)和博客就(jiu)不(bu)(bu)是(shi)了，甚至于我覺得對這種(zhong)Web網(wang)站實(shi)施響應式(shi)(shi)設(she)(she)(she)計(ji)只是(shi)浪費時間(jian)。
1. “響應式設計”達不到用戶期望
Usability 101 規則的第一(yi)條就是“滿足用(yong)(yong)戶期(qi)望(wang)”。以博客為例子，它(ta)被廣泛接受(shou)的設計方式是： 從上往(wang)下、內容和圖片各放(fang)一(yi)邊、提供邊欄(lan)，這個已在數百(bai)萬博客中(zhong)被應用(yong)(yong)，因為它(ta)達到了(le)用(yong)(yong)戶的期(qi)望(wang)。
但若你訪問經過(guo)響應(ying)式設計的移動(dong)網頁，一(yi)般邊(bian)(bian)欄會(hui)消失(shi)，或者(zhe)會(hui)跳到最(zui)(zui)頂部或者(zhe)最(zui)(zui)底部， 反正不是(shi)你期望(wang)的地方。以(yi)Cats Who Code 為例(li)，下面(mian)(mian)(mian)是(shi)桌(zhuo)面(mian)(mian)(mian)顯示，有頂部的導航、邊(bian)(bian)欄（包括最(zui)(zui)近Post），小廣告(gao)欄和搜(sou)索(suo)框。下面(mian)(mian)(mian)是(shi)iPhone的界面(mian)(mian)(mian)：
可看出導航和邊(bian)欄(lan)消失了，繼續往(wang)下(xia)拖的時候我終于找到了邊(bian)欄(lan)，你可能(neng)會覺得這(zhe)只是(shi)個(ge)個(ge)例， 但事實是(shi)這(zhe)是(shi)一個(ge)典型的響應式設(she)計，我們(men)想看到的是(shi)以不犧牲桌(zhuo)面元素為前提(ti)的移動界面顯(xian)示，顯(xian)然(ran)這(zhe)不是(shi)。
2. 花錢多 耗時長
一般(ban)來說，響(xiang)應(ying)式(shi)設(she)(she)計(ji)(ji)比(bi)(bi)非響(xiang)應(ying)式(shi)設(she)(she)計(ji)(ji)要(yao)花更(geng)(geng)多的錢。如果有人Damn地爭論(lun)響(xiang)應(ying)式(shi)設(she)(she)計(ji)(ji)比(bi)(bi)建立(li)一個額(e)外的移(yi)動版面更(geng)(geng)便(bian)宜，我同意(yi)，但你知道比(bi)(bi)響(xiang)應(ying)式(shi)設(she)(she)計(ji)(ji)更(geng)(geng)便(bian)宜的是什(shen)么(me)嗎？什(shen)么(me)都不用！
此外你(ni)要想(xiang)想(xiang)這花了(le)你(ni)多少(shao)時間，從響應(ying)式設計(ji)里面(mian)你(ni)得到了(le)多少(shao)投資回報，獲(huo)得了(le)什么(me)？
3. 非響應式設計表現也不賴
看我(wo)自己的博客在Mac上顯示效果：
看它在我的iPhone上：
在iPhone4英寸的(de)屏幕上(shang)，讀起來感覺很(hen)(hen)好。如(ru)果文字太小了(le)，那就(jiu)雙擊放大(da)吧，待(dai)會看(kan)完了(le)又縮回來并不是(shi)(shi)什么難(nan)事。 而且好笑的(de)是(shi)(shi)，現在的(de)手(shou)機(ji)界面(mian)就(jiu)是(shi)(shi)為了(le)非(fei)響應式設(she)計準備(bei)的(de)， 且大(da)部分手(shou)機(ji)表現得很(hen)(hen)好。如(ru)果你非(fei)要(yao)揪出(chu)一(yi)些意外的(de)話，去(qu)看(kan)看(kan)那些網(wang)頁的(de)桌面(mian)版(ban)，設(she)計也同樣很(hen)(hen)差。
4. 對加載時間沒好處
我們知道移動設(she)備操作時(shi)(shi)是(shi)(shi)基(ji)于(yu)互聯(lian)網(wang)子寬(kuan)帶的聯(lian)網(wang)速度(du)，所(suo)以網(wang)頁要確保最少的負荷來減少加(jia)載(zai)時(shi)(shi)間(jian)，很多(duo)響應式(shi)設(she)計并未真正減少加(jia)載(zai)時(shi)(shi)間(jian)，因為許多(duo)設(she)計師只是(shi)(shi)隱(yin)藏了那些(xie)元素(su)， 對優化加(jia)載(zai)毫無好(hao)處。而非(fei)響應式(shi)設(she)計可以選(xuan)擇(ze)“延遲加(jia)載(zai)”，這是(shi)(shi)一個選(xuan)擇(ze)先加(jia)載(zai)最密集元素(su)再到其(qi)他的技巧。
5. 響應式設計其實是種妥協
可(ke)以說響應式設(she)計(ji)是(shi)設(she)計(ji)師的主(zhu)觀決定，他(ta)們(men)認為(wei)(wei)桌面(mian)顯(xian)示界(jie)面(mian)不(bu)(bu)(bu)再適用移(yi)動界(jie)面(mian)，然后(hou)覺得(de)一定要做出(chu)相應改變(bian)。而用戶如果(guo)看到更不(bu)(bu)(bu)適的界(jie)面(mian)后(hou)會(hui)發(fa)問，為(wei)(wei)什么要弄(nong)個這么不(bu)(bu)(bu)一樣又不(bu)(bu)(bu)是(shi)很好的顯(xian)示方式？這觸(chu)犯(fan)了usability 101第二條規則(ze)“不(bu)(bu)(bu)要讓用戶覺得(de)他(ta)們(men)無法控制局面(mian)”。
所以我的(de)觀(guan)點是(shi)(shi)：這只是(shi)(shi)一種妥協(xie)，是(shi)(shi)設計師的(de)主觀(guan)決(jue)定，用(yong)戶(hu)并沒有(you)覺(jue)得多大的(de)不適，特別是(shi)(shi)當(dang)響應式設計既要(yao)錢又要(yao)花(hua)時間的(de)時候。
最后(hou)，我寫這篇文章(zhang)有兩個原因，我覺(jue)得響應式(shi)設計在(zai)很多情(qing)形(xing)下(xia)是(shi)沒必(bi)要(yao)的(de)(de)(de)(de)；在(zai)互(hu)聯網上(shang)明顯缺(que)少對響應式(shi)設計的(de)(de)(de)(de)爭論(lun)。我不否定響應式(shi)設計理論(lun)本身，但(dan)事(shi)(shi)實是(shi)我見過的(de)(de)(de)(de)許多情(qing)形(xing)下(xia)它(ta)真(zhen)的(de)(de)(de)(de)沒必(bi)要(yao)。很多人習慣(guan)在(zai)別人擁護時并認為那是(shi)天經(jing)地義的(de)(de)(de)(de)事(shi)(shi)，但(dan)你最好從一(yi)個開發者(zhe)的(de)(de)(de)(de)角(jiao)度來(lai)看(kan)看(kan)，這真(zhen)的(de)(de)(de)(de)是(shi)你需要(yao)的(de)(de)(de)(de)嗎？
PS： 什么是響應式設計？ 頁面的設計(ji)與開發(fa)應(ying)當根據用戶(hu)行為以及設備環境(系(xi)統平臺、屏(ping)幕(mu)尺(chi)寸、屏(ping)幕(mu)定向(xiang)等(deng))進行相(xiang)應(ying)的響應(ying)和調整。具體的實(shi)踐方式由(you)多方面組成(cheng)，包括彈性網(wang)格和布局、圖片(pian)、CSS media query的使用等(deng)。無(wu)論用戶(hu)使用筆記(ji)本(ben)還是iPad，頁面都應(ying)該能夠(gou)自動切換(huan)分辨率、圖片(pian)尺(chi)寸及相(xiang)關腳(jiao)本(ben)功(gong)能等(deng)，以適應(ying)不(bu)同設備。
