2015-4-20 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( m.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
來(lái)源：莫貝網(wǎng)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
譯前言：2015年響應(yīng)式設(shè)計(jì)趨勢(shì)的延續(xù)，也將帶來(lái)更多的爭(zhēng)議和思考，此文所引論據(jù)較為客觀，點(diǎn)出了響應(yīng)式概念的初衷和近年來(lái)跨屏設(shè)計(jì)的狀況，并提供了解決思路和可參考的具體方法，原文下的評(píng)論也有諸多爭(zhēng)議，有興趣可以移步一覽。
你臉上掛著微笑心情愉悅地縮放著瀏覽器窗口時(shí)，認(rèn)為網(wǎng)站達(dá)成了移動(dòng)端友好體驗(yàn)的目標(biāo)。在探討之前我要提前推論：如果你只是把響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)定為終極目標(biāo)并且是唯一的移動(dòng)端方案，是在流失用戶(hù)，也許還有金錢(qián)。幸運(yùn)的是我們能夠修正這些錯(cuò)誤。
這篇文章的內(nèi)容將涉及移動(dòng)網(wǎng)頁(yè)與響應(yīng)式設(shè)計(jì)的關(guān)系，始于如何提供靈巧的響應(yīng)式設(shè)計(jì)，及移動(dòng)端的性能為何如此重要、響應(yīng)式設(shè)計(jì)何以不能視為網(wǎng)站的目標(biāo)，并止于技術(shù)本身的性能爭(zhēng)議，以便輔助理解問(wèn)題的真正所在。
2000年起，設(shè)計(jì)師和開(kāi)發(fā)者就已對(duì)移動(dòng)端存在的問(wèn)題過(guò)分簡(jiǎn)化，而現(xiàn)在有些人則認(rèn)為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是一切難題的銀彈[1]。我們需要正視的是，達(dá)到移動(dòng)網(wǎng)頁(yè)的輕快體驗(yàn)應(yīng)蓋過(guò)其他任何目標(biāo)。向所有移動(dòng)設(shè)備傳送一個(gè)快速可用并全兼容的體驗(yàn)是一個(gè)挑戰(zhàn)，在實(shí)施響應(yīng)式技術(shù)時(shí)也是如此。而在一開(kāi)始便關(guān)注性能將協(xié)助我們更易達(dá)成目標(biāo)。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)非常優(yōu)秀，但它不是銀彈。如果把它當(dāng)作移動(dòng)端的唯一法寶，那么也許會(huì)有性能問(wèn)題將對(duì)轉(zhuǎn)化率造成阻礙。現(xiàn)約有11%的網(wǎng)站是響應(yīng)式的并且這個(gè)數(shù)字每個(gè)月都在上升，討論它的時(shí)機(jī)到了。
根據(jù)Guy Podjarny的調(diào)查，72%的響應(yīng)式網(wǎng)站統(tǒng)一傳送相同數(shù)量的字節(jié)，而不依據(jù)屏幕尺寸區(qū)分處理，甚至在使用速度較慢的移動(dòng)網(wǎng)絡(luò)連接也是如此。但并非所有的用戶(hù)都會(huì)耐心等待網(wǎng)站的加載。
實(shí)際上只需對(duì)問(wèn)題有基本理解，我們就可以讓損失降到到。
我并不是說(shuō)不該讓設(shè)計(jì)做到響應(yīng)式，或者建議應(yīng)該采用一個(gè)m.*的子域名。事實(shí)上，社交分享已無(wú)所不在，不區(qū)分設(shè)備讓每一個(gè)文件指向同一個(gè)URL是明智的。但這并不意味著單一的URL應(yīng)該總是傳送同一文件，或者說(shuō)是所有的設(shè)備應(yīng)該加載同一個(gè)資源。
引用創(chuàng)造“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”術(shù)語(yǔ)的Ethan Marcotte的一句話(huà)：
最重要的是，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不是特意為移動(dòng)網(wǎng)站提供的一個(gè)替代解決方案。
（譯補(bǔ)Ethan Marcotte原文：“我認(rèn)為響應(yīng)式設(shè)計(jì)是設(shè)計(jì)哲學(xué)的一部分，也是前端開(kāi)發(fā)策略的一部分。而作為后者，應(yīng)依實(shí)際項(xiàng)目所需評(píng)估其可行性。”）
移動(dòng)端的性能保證與響應(yīng)式設(shè)計(jì)可以同時(shí)實(shí)現(xiàn)，只要用上一些其他技術(shù)。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)從不意味著去制造性能問(wèn)題，這也是我們無(wú)法歸罪于這項(xiàng)技術(shù)本身的原因，而許多人相信它能解決一切問(wèn)題才是錯(cuò)誤的根源。
讓設(shè)計(jì)響應(yīng)式化的重要性在于，我們需要處理從臺(tái)式機(jī)到手機(jī)的大區(qū)間viewport尺寸。但是只考慮屏幕尺寸低估了移動(dòng)設(shè)備，臺(tái)式機(jī)與手機(jī)的分界線(xiàn)正在變得模糊，不同類(lèi)型的設(shè)備也趨于提供多樣化功能。顯然我們已無(wú)法再只依賴(lài)于使用媒體查詢(xún)這一功能。
有些評(píng)論者稱(chēng)之為“負(fù)責(zé)任的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”，雖然其他人把它叫做現(xiàn)代化的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。撇開(kāi)兩種叫法語(yǔ)義上的差別，我們確實(shí)需要理解并意識(shí)到問(wèn)題所在。
不存在銀彈也沒(méi)有可以一勞永逸的方案，我們能做的是使用組合技巧提升現(xiàn)有的響應(yīng)式方案并且力求性能的最優(yōu)化：
display: none時(shí)進(jìn)行真機(jī)測(cè)試驗(yàn)證資源加載，而非依賴(lài)于桌面瀏覽器模擬；srcset）之前，使用JavaScript分發(fā)響應(yīng)式圖片；CSS媒體查詢(xún)無(wú)法讓設(shè)備區(qū)分加載和解析，這意味著移動(dòng)端的手機(jī)會(huì)下載和解析為更大屏幕提供的CSS。再者，蜂窩網(wǎng)絡(luò)下CSS的分區(qū)渲染浪費(fèi)的毫秒十分寶貴，有必要避免全依賴(lài)于此。
正如我們知道的，iPhone不會(huì)動(dòng)態(tài)轉(zhuǎn)換為iPad的尺寸，采用JavaScript 的matchMedia查詢(xún)方法替代CSS媒體查詢(xún)，則能夠保證不同設(shè)備顯示內(nèi)容的統(tǒng)一性并且只加載它們各自所需要的CSS。
使用特征檢測(cè)工具可以做到更好，如Modernizr可以構(gòu)建更智能的UI和功能定義，而不是只依賴(lài)于屏幕尺寸。
基于單HTML頁(yè)面為所有屏幕進(jìn)行響應(yīng)式設(shè)計(jì)時(shí)，為臺(tái)式電腦和智能手機(jī)傳送同樣的HTML結(jié)構(gòu)是糟糕的，原因再次回歸到移動(dòng)端的性能問(wèn)題。
即使服務(wù)器端存儲(chǔ)同一個(gè)文件，基于設(shè)備分組也可以實(shí)現(xiàn)對(duì)終端的按需發(fā)送。舉例來(lái)說(shuō)，為6英寸及更大尺寸的屏幕提供大的浮動(dòng)式菜單，而為小于6英寸的屏幕提供一個(gè)小的漢堡包菜單[2]。響應(yīng)式技術(shù)可以基于分組實(shí)現(xiàn)不同情境的適配，如橫豎屏模式的轉(zhuǎn)換、不同型號(hào)的iPhone（寬為320像素）、各式5英寸的安卓設(shè)備（寬為360像素）及平板（寬為400像素及以上）。
更智能的響應(yīng)式解決方案的最后一個(gè)選項(xiàng)是服務(wù)器，對(duì)移動(dòng)網(wǎng)頁(yè)來(lái)說(shuō)服務(wù)器端進(jìn)行特征檢測(cè)及定義并不新奇，市面上早有諸如WURFL和Device Atlas之類(lèi)的工具庫(kù)。
把響應(yīng)式設(shè)計(jì)與服務(wù)器端組件聯(lián)合同樣也有前例，已被知曉的有響應(yīng)式設(shè)計(jì)+服務(wù)器端組件(RESS)，或被稱(chēng)為自適應(yīng)設(shè)計(jì)，保障每個(gè)終端代碼簡(jiǎn)約性的同時(shí)，提高了響應(yīng)式的速度與可用性體驗(yàn)。
不幸的是，在過(guò)去幾年里這些技術(shù)沒(méi)有在社區(qū)里獲得太多的推動(dòng)，只需看看有多少為開(kāi)發(fā)者提供的博客或雜志將“RESS” 與“自適應(yīng)” 和“響應(yīng)式”相提并論便可一知。其一原因在于：我們是前端工程師，任何涉及后端的內(nèi)容都是個(gè)令人頭疼的難題。
一部分情況是前端設(shè)計(jì)人員可以控制的是服務(wù)器上的腳本；另一部分情況是有遠(yuǎn)程開(kāi)發(fā)團(tuán)隊(duì)管理，設(shè)計(jì)師并不想在每次需要調(diào)整UI時(shí)都與他們打交道，這種情形下的心情我能夠理解。
這也是為何在大項(xiàng)目里頭應(yīng)該考慮新的架構(gòu)層：一種不需要?jiǎng)佑煤蠖耍煌ㄟ^(guò)前端工程師就能夠?qū)?span style="width:auto;height:auto;float:none;" id="20_nwp">服務(wù)器端架構(gòu)進(jìn)行操作的方式。Node.js[3]是一種卓越的作為前后端之間流通架構(gòu)的平臺(tái)，這個(gè)架構(gòu)方式下，前端工程師可以基于內(nèi)部的流通性進(jìn)行調(diào)整而不需要涉及后端架構(gòu)，從而實(shí)現(xiàn)為所有設(shè)備提供輕快的響應(yīng)式和可用性體驗(yàn)。
對(duì)這篇文章你可能抱有一些置疑，接下來(lái)我們將對(duì)技術(shù)細(xì)節(jié)進(jìn)行重新審視以減輕你的疑慮。
響應(yīng)式設(shè)計(jì)通常會(huì)為所有設(shè)備傳送相同的HTML文件，再采取媒體查詢(xún)的方式加載不同的CSS和image文件，這一點(diǎn)有的人可能不太同意，但很多情況下都是如此實(shí)施的。
你也可能會(huì)認(rèn)為如今移動(dòng)網(wǎng)絡(luò)速度的提升已足夠?qū)崿F(xiàn)良好的體驗(yàn)，畢竟4G非常快，設(shè)備也運(yùn)行得更為流暢，那么在下結(jié)論之前我們來(lái)看一些數(shù)據(jù)吧。
4G網(wǎng)絡(luò)還沒(méi)有廣泛覆蓋，而即便是全世界范圍內(nèi)都能夠使用4G網(wǎng)絡(luò)，可能也會(huì)有一些超出預(yù)期的狀況。只論US地區(qū)的4G用戶(hù)數(shù)量約為22%，而其中的40%并非隨時(shí)處于4G連接狀態(tài)，除外地區(qū)則只有不到3%的手機(jī)使用4G連接。
移動(dòng)網(wǎng)絡(luò)速度受限于帶寬，3G可以達(dá)到5Mbps，4G可以達(dá)到50Mbps。但移動(dòng)網(wǎng)頁(yè)體驗(yàn)通常面臨的最重要的現(xiàn)狀是：消耗于接收大文件（如 YouTube視頻）的帶寬越多，大批量小文件的并行下載越不順暢，并會(huì)伴有確定性的高發(fā)延遲。延遲是設(shè)備對(duì)每個(gè)數(shù)據(jù)包的首字節(jié)發(fā)起請(qǐng)求接收的往返時(shí)間。
蜂窩網(wǎng)絡(luò)比其他連接方式延遲更多。雖然US的家庭DSL連接延遲為20~45ms，3G網(wǎng)絡(luò)
卻可能達(dá)到150~450ms，4G網(wǎng)絡(luò)則為100~180ms。這也就意味著蜂窩連接的延遲比家庭網(wǎng)絡(luò)要高出5~10倍。
尚有其他延遲方面的問(wèn)題如無(wú)線(xiàn)電廣播引起的變動(dòng)：當(dāng)手機(jī)進(jìn)入休眠狀態(tài)后打開(kāi)收音機(jī)頻率需要獲取更多數(shù)據(jù)而導(dǎo)致滯時(shí)；設(shè)備平均可用內(nèi)存越低也就意味著電池和CPU消耗越多。
一個(gè)實(shí)例：Keynote是一家提供性能解決方案的公司，發(fā)布了2014超級(jí)碗頂尖廣告的網(wǎng)頁(yè)性能數(shù)據(jù)。這份報(bào)告里陳述：在wired或Wi-Fi連接下加載時(shí)間為1~10s區(qū)間，而在蜂窩連接下加載時(shí)間為5~60s的區(qū)間。實(shí)在難以想象超級(jí)碗上投放的廣告是需要加載整整一分鐘的網(wǎng)頁(yè)。
同樣的報(bào)告顯示有43%的網(wǎng)站提供了移動(dòng)專(zhuān)屬版本，平均體積為862KB；50%實(shí)行響應(yīng)式方案的平均體積在3211KB（超出將近四倍）；另外7%對(duì)移動(dòng)設(shè)備提供的則是桌面版，這基本可以認(rèn)為響應(yīng)式網(wǎng)站比移動(dòng)專(zhuān)屬網(wǎng)站的體積更大。
當(dāng)然，響應(yīng)式網(wǎng)站可以有不一樣的表現(xiàn)，但不幸的是，這份報(bào)告之外的響應(yīng)式網(wǎng)站的表現(xiàn)也基本與超級(jí)碗廣告相似。
如果對(duì)移動(dòng)端網(wǎng)頁(yè)的性能仍存有疑慮，想想看基于云技術(shù)開(kāi)發(fā)瀏覽器的廠商正為用戶(hù)做的——包括Opera Mini、基于亞洲的UC瀏覽器（根據(jù)statcounter的統(tǒng)計(jì)，其市場(chǎng)占有率為11%），Amazon Fire的Silk瀏覽器和目前的 Google Chrome（通過(guò)選項(xiàng)設(shè)置）。
這些廠商在云端壓縮所有的網(wǎng)站和資源，隨后瀏覽器下載優(yōu)化過(guò)的版本到移動(dòng)端，而他們?nèi)绱俗龅睦碛墒钦J(rèn)識(shí)到了性能服務(wù)于用戶(hù)的意義。
網(wǎng)絡(luò)社區(qū)通常會(huì)低估移動(dòng)瀏覽器的重要性，我曾聽(tīng)到人們說(shuō)現(xiàn)今的移動(dòng)端網(wǎng)頁(yè)只有iOS的Safari和Android的Chrome瀏覽器，對(duì)響應(yīng)式設(shè)計(jì)，我們只需顧及320像素寬的viewport。但實(shí)際情況比這復(fù)雜得多。
如今有不下于10個(gè)瀏覽器的市場(chǎng)占有率超過(guò)1%，就算只需考慮iOS和Android的默認(rèn)瀏覽器也并不容易。大致情形來(lái)說(shuō)，在移動(dòng)端瀏覽網(wǎng)頁(yè)的用戶(hù)中，iOS占50%，Android占38%，Windows Phone占3%，Opera Mini占5%（包括各類(lèi)操作系統(tǒng)），剩余4%則為其他平臺(tái)。
而如今的Android平臺(tái)有64%的用戶(hù)使用自帶瀏覽器，這是一個(gè)與Google Chrome存在差異并且本身具有多個(gè)版本的瀏覽器。此外，的三星Galaxy中有一些設(shè)備所提供的Android瀏覽器是自定義引擎的版本。
根據(jù)viewport的尺寸，僅Android系統(tǒng)的智能手機(jī)，如今我們需要處理的像素寬度就包括320、360、400、540。那么我要建議的是，不要低估移動(dòng)端的網(wǎng)頁(yè)，并去了解它那些的特征。
在移動(dòng)設(shè)備中，我們把在1秒或是更少時(shí)間完成首屏內(nèi)容（即不需滾動(dòng)直接顯示的內(nèi)容）渲染的網(wǎng)站視作是快的。我知道1秒鐘看起來(lái)十分快速——特別是考慮到至少有一半的情形是要在蜂窩網(wǎng)絡(luò)下來(lái)達(dá)到的——但這已被證實(shí)是可能的。1秒響應(yīng)可保證用戶(hù)聚焦于內(nèi)容，從而提升轉(zhuǎn)化率及減少流失。
達(dá)到1秒響應(yīng)時(shí)間，首屏內(nèi)容需要在傳輸控制協(xié)議（TCP）的單次往返時(shí)間中完成——不能忽略的是普遍的3G網(wǎng)絡(luò)幾乎存在半秒的延遲。由于TCP被稱(chēng) 為“慢啟動(dòng)”，首次響應(yīng)不能超過(guò)14KB以避免二次打包。這意味著首屏內(nèi)容的HTML和CSS至少必須符合14KB的單次HTTP響應(yīng)。如果我們做到這 個(gè)，那么也就達(dá)成了1秒加載時(shí)間的感官體驗(yàn)。
這條規(guī)則并沒(méi)有被明確列出，且要視實(shí)際需要而有所調(diào)整。然而，由于移動(dòng)屏幕的首屏內(nèi)容顯示通常無(wú)法達(dá)到與桌面屏幕一致的效果，使用響應(yīng)式設(shè)計(jì)達(dá)到1秒的目標(biāo)是非常艱難的，但實(shí)現(xiàn)的難度是可以通過(guò)多種技術(shù)的結(jié)合降低的。
一個(gè)典型的響應(yīng)式設(shè)計(jì)是對(duì)所有設(shè)備發(fā)送單一的HTML文件：電視、桌面、平板、智能手機(jī)及其后的所有手機(jī)。這聽(tīng)起來(lái)很贊，但我們生活的世界有蜂窩網(wǎng)絡(luò)和其他的各種問(wèn)題。移動(dòng)設(shè)備下你的響應(yīng)式HTML可能會(huì)正確渲染，但它不夠快，本來(lái)它應(yīng)該是可以更快的，這也在影響你的轉(zhuǎn)化率。
一旦有display: none出現(xiàn)在CSS中，你的站點(diǎn)就會(huì)開(kāi)始變慢。一個(gè)從零開(kāi)始為語(yǔ)義設(shè)計(jì)的站點(diǎn)，響應(yīng)式的超載
會(huì)讓一切工作幾近化為無(wú)用；一個(gè)站點(diǎn)的HTML里包含的40個(gè)外部JavaScript里的絕大多數(shù)jQuery插件和功能庫(kù)都是為大屏服務(wù)的，響應(yīng)式超
載會(huì)讓一切崩潰。使用同一HTML，就等同于在所有設(shè)備加載同樣的外部資源。
這并不是說(shuō)不能做單一的響應(yīng)式設(shè)計(jì)，只是站點(diǎn)不會(huì)自行進(jìn)行優(yōu)化。如果你已經(jīng)留心到了性能，那么你的響應(yīng)式方案將會(huì)不同尋常。
我們來(lái)審視一番星巴克的站點(diǎn)，它的主頁(yè)是響應(yīng)式的并且在我們測(cè)算的三種viewport下（屏幕截圖見(jiàn)下）看起來(lái)都很贊。但查看結(jié)構(gòu)之后，我們發(fā)現(xiàn) 所有版本都加載33個(gè)外部JavaScript文件和6個(gè)CSS文件。使用3G延遲網(wǎng)絡(luò)的移動(dòng)設(shè)備需要加載到39個(gè)外部文件只為顯示這樣一個(gè)頁(yè)面么？
你可能會(huì)認(rèn)為，“啊，干嘛怪技術(shù)應(yīng)該怪實(shí)現(xiàn)”，這是對(duì)的。這篇文章并不是和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)作對(duì)，它駁斥的是瞄準(zhǔn)了響應(yīng)式卻實(shí)現(xiàn)得很糟糕，它駁斥的是以響應(yīng)式為目標(biāo)而不顧性能，正如星巴克一般。
若你的響應(yīng)式站點(diǎn)存在性能問(wèn)題，那根源可能是出于你所定的目標(biāo)。若為響應(yīng)式設(shè)計(jì)實(shí)施規(guī)劃，也必須為性能實(shí)施規(guī)劃。
媒體查詢(xún)有多種應(yīng)用方式，通常采用如下中的一種：
@media聲明；第一種情形中，只會(huì)產(chǎn)生一個(gè)CSS文件，故所有設(shè)備都會(huì)加載全平臺(tái)的CSS，數(shù)百個(gè)無(wú)用的選擇器都會(huì)被瀏覽器轉(zhuǎn)譯和解析。
你可能會(huì)認(rèn)為多樣的外部文件是更好的方式，因?yàn)闉g覽器會(huì)基于斷點(diǎn)加載不同的資源，這是我們?cè)诟鞣N博客、雜志、書(shū)和培訓(xùn)課程中得到的信息。
<link rel="stylesheet" href="desktop.css" media="(min-width: 801px)"> <link rel="stylesheet" href="tablet.css" media="(min-width: 401px) and (max-width: 800px)"><link rel="stylesheet" href="mobile.css" media="(max-width: 400px)">好吧，你完全錯(cuò)了。所有的瀏覽器會(huì)不分環(huán)境地把所有的外部CSS一并加載。下面的屏幕截圖顯示iPhone下載了所有頭部引用的CSS文件， 包括與它無(wú)關(guān)的。
為何瀏覽器會(huì)下載所有的CSS文件？現(xiàn)在假設(shè)有一個(gè)CSS文件是為豎屏提供的另一個(gè)則為橫屏提供。我們不希望瀏覽器在橫豎屏切換時(shí)飛快地切換 CSS，為防止其間出現(xiàn)頁(yè)面裸奔（無(wú)CSS的裸HTML頁(yè)），我們希望的是瀏覽器提前把所有文件都加載好。而這正是你基于屏幕尺寸定義媒體查詢(xún)會(huì)發(fā)生的一 切。
那么可以調(diào)整移動(dòng)瀏覽器的尺寸么？目前基本上不行，但廠商正在準(zhǔn)備推出可以像桌面瀏覽器一樣調(diào)整的移動(dòng)瀏覽器，這也是瀏覽器會(huì)不顧媒體查詢(xún)的寬度匹配規(guī)則不分情境加載所有聲明的CSS的原因。
尚沒(méi)有任何移動(dòng)設(shè)備具有可伸縮的viewport（目前為止），但某些情形下viewport會(huì)被重置：
onload添加了內(nèi)容導(dǎo)致偏移；在上述變動(dòng)下瀏覽器會(huì)最優(yōu)化加載可能會(huì)需要的所有資源。而不遠(yuǎn)的將來(lái)瀏覽器對(duì)此會(huì)更智能，但此時(shí)我們尚有問(wèn)題存留：我們傳送了比實(shí)際需要超出得多的資源，從而讓用戶(hù)遭受無(wú)妄之災(zāi)。
正如Lyza Danger Gardner在“當(dāng)我們談?wù)摗憫?yīng)式’時(shí)我們?cè)谡務(wù)撌裁础?/a>里所說(shuō)的，設(shè)計(jì)師為“響應(yīng)式”下的定義并不一致，從而會(huì)導(dǎo)致溝通誤差。
追本溯源來(lái)看，這個(gè)術(shù)語(yǔ)首次出現(xiàn)是在2010Ethan Marcotte的文章里，隨之而來(lái)是同名書(shū)籍。Ethan定義其為：以流體網(wǎng)格、彈性圖片和媒體查詢(xún)?nèi)N技術(shù)為多區(qū)間的設(shè)備屏幕提供最佳顯示體驗(yàn)。
這并沒(méi)有什么不對(duì)，問(wèn)題出現(xiàn)在我們只把它視之為站點(diǎn)效果，而沒(méi)有理解其背后更寬廣的更需要達(dá)成的目標(biāo)。
當(dāng)以響應(yīng)式設(shè)計(jì)效果為目標(biāo)，會(huì)變得容易迷失在觀念中。你 真正試著去解決的問(wèn)題是什么？響應(yīng)式化有問(wèn)題么？也許沒(méi)有。但你是否把“響應(yīng)式化”理解為“兼容移動(dòng)端”？如果是這樣，那你也許犯了一些錯(cuò)誤。
一個(gè)站點(diǎn)的終極目標(biāo)應(yīng)該是“服務(wù)用戶(hù)”，從而實(shí)現(xiàn)更多形式的轉(zhuǎn)化，不論是讓訪客傳播文字、提供信息還是產(chǎn)生消費(fèi)。沒(méi)有高性能的站點(diǎn)就沒(méi)有滿(mǎn)意的用戶(hù)。
性能在轉(zhuǎn)化上，尤其是移動(dòng)端方面的直接影響，已被多次證實(shí)。如果這是你第一次聽(tīng)聞，只要隨便翻閱一本 Steve Souders關(guān)于網(wǎng)頁(yè)性能優(yōu)化的專(zhuān)業(yè)書(shū)就可一知詳細(xì)。
知曉目標(biāo)，決定用何種工具和技術(shù)以最佳方式實(shí)現(xiàn)。這就是你分析在哪里、如何用響應(yīng)式方法時(shí)應(yīng)該做的。你使用響應(yīng)式設(shè)計(jì)——卻沒(méi)有領(lǐng)會(huì)它。
紐約時(shí)報(bào)在幾個(gè)月前以保持“符合你的預(yù)期”為目標(biāo)重新設(shè)計(jì)了網(wǎng)站，同時(shí)有上千家大型企業(yè)驕傲地推出了他們新的響應(yīng)式版的網(wǎng)站。
紐約時(shí)報(bào)以有別尋常的方式進(jìn)行響應(yīng)式設(shè)計(jì)，但有一些人對(duì)它并非基于相同HTML進(jìn)行適應(yīng)性布局而是采取專(zhuān)門(mén)的移動(dòng)站點(diǎn)抱以不滿(mǎn)，甚至有一篇文章冠以“新版的紐約時(shí)報(bào)WebApp缺失響應(yīng)式設(shè)計(jì)的核心”的標(biāo)題聲討。
沒(méi)有人說(shuō)過(guò)響應(yīng)式設(shè)計(jì)意味著使用同一HTML去適配所有屏幕尺寸，而這顯然已被當(dāng)作普遍定義。但這條規(guī)則并沒(méi)有在任何地方被明確規(guī)定，只是我們?cè)噲D簡(jiǎn)化問(wèn)題所造成的。
近幾個(gè)月內(nèi)，數(shù)家公司都在宣揚(yáng)著這樣的臺(tái)詞：“我們提供了一個(gè)新的響應(yīng)式版網(wǎng)站，讓移動(dòng)端轉(zhuǎn)化得到了100%的提升。”但轉(zhuǎn)化的提升確實(shí)是因?yàn)檎军c(diǎn)進(jìn)行了響應(yīng)式化么？還是用戶(hù)意識(shí)到了它是響應(yīng)式的而更愿意使用？
人們轉(zhuǎn)化更多僅是因?yàn)樵谝苿?dòng)設(shè)備上得到了更快更好的體驗(yàn)，而無(wú)關(guān)于采取了何種有別以往的方案（不論它是移動(dòng)端版本還是桌面版本的縮影）。以此說(shuō)來(lái)，響應(yīng)性沒(méi)有任何優(yōu)于采用傳統(tǒng)移動(dòng)方案實(shí)現(xiàn)的特別之處，而相同設(shè)計(jì)下的獨(dú)立移動(dòng)站點(diǎn)若輔以其他技術(shù)形成更明智的方案，也能夠達(dá)到相同的轉(zhuǎn)化甚至更佳。
“用戶(hù)才不鳥(niǎo)你的站點(diǎn)用上了什么響應(yīng)式” —— Brad Frost
Brad Frost相當(dāng)正確，用戶(hù)想要的是快速易用，他們并不老去調(diào)整瀏覽器窗口，也不需要理解“響應(yīng)式”的含義。
這是沉重的事實(shí)，也并非是所有網(wǎng)站都會(huì)面臨的狀況，但也好過(guò)總想著“我們做了響應(yīng)式兼容移動(dòng)端沒(méi)有后顧之憂(yōu)了。”某些時(shí)候，甚至不需要考慮情境地把響應(yīng)式設(shè)計(jì)稱(chēng)之為“性能破壞者”也是有利的，因?yàn)檫@將有助于讓人們關(guān)注到性能的重要性。
紐約時(shí)報(bào)是對(duì)的：以用戶(hù)為核心，而非工具或技術(shù)，甚或是當(dāng)作設(shè)計(jì)師們的狂歡。
詞匯譯注：
[1] 沒(méi)有任何一項(xiàng)技術(shù)或方法可使軟件工程的生產(chǎn)力在十年內(nèi)提高十倍。維基：沒(méi)有銀彈 ?
[2] 漢堡包菜單，以三道杠形式表示菜單入口。延伸閱讀：關(guān)于漢堡包圖標(biāo)的閑言碎語(yǔ) ?
[3] Node，使用Chrome V8引擎快速構(gòu)建可伸縮應(yīng)用程式的平臺(tái)。Node.js 究竟是什么？ ?
[4] 國(guó)內(nèi)外蜂窩網(wǎng)絡(luò)連接的狀況有所差異。藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gyxygd.cn