現(xiàn)在幾乎每個(gè)人都喜歡響應(yīng)式設(shè)計(jì)，而且可以是沒(méi)有原因的支持，這跟Flash剛出現(xiàn)那會(huì)火熱的局面有點(diǎn)相似。然而，響應(yīng)式設(shè)計(jì)帶來(lái)了表現(xiàn)力的問(wèn)題，這需要通過(guò)調(diào)整圖像、壓縮圖像、改變圖像大小等手段來(lái)解決。 然而，為了提高表現(xiàn)力，有的時(shí)候不得不增大文件的尺寸。瀏覽體驗(yàn)需要快速的載入，本文將講述一些為響應(yīng)式設(shè)計(jì)提速的方法。
為什么響應(yīng)式設(shè)計(jì)載入那么慢？
在所有的設(shè)備上，響應(yīng)式設(shè)計(jì)載入的HTML元素都相同。就算你的網(wǎng)站專供桌面或者專供平板，在其他設(shè)備上，載入的元素依然相同。這就意味著需要通過(guò)網(wǎng)絡(luò)傳遞所有的內(nèi)容，包括了圖像和腳本。 一項(xiàng)去年的調(diào)查表明，86%的響應(yīng)式網(wǎng)站會(huì)將一個(gè)完整的桌面頁(yè)傳送到手機(jī)中。如果我們能夠?qū)?shù)據(jù)進(jìn)行精簡(jiǎn)、提升瀏覽速度，那么響應(yīng)式設(shè)計(jì)將得到更好的推廣。 與此同時(shí)，響應(yīng)式設(shè)計(jì)提高了頁(yè)面大小，這也是一個(gè)亟待處理的問(wèn)題。因?yàn)檠芯堪l(fā)現(xiàn) ，如果3秒之內(nèi)無(wú)法載入頁(yè)面，57%的用戶會(huì)選擇離開(kāi)。 怎樣提高載入性能？ 對(duì)于那些已經(jīng)采用響應(yīng)式設(shè)計(jì)，現(xiàn)在想要進(jìn)行進(jìn)一步優(yōu)化的人來(lái)說(shuō)，Mobitest可以用來(lái)測(cè)量手持設(shè)備上網(wǎng)頁(yè)的載入性能，這樣就能發(fā)現(xiàn)問(wèn)題，從而解決問(wèn)題。當(dāng)然如果設(shè)計(jì)還在進(jìn)行或者計(jì)劃中，那么優(yōu)化起來(lái)就更方便了。只需要在設(shè)計(jì)過(guò)程中注意載入速度即可，這樣就不用事后亡羊補(bǔ)牢了。 為了提高表現(xiàn)力，我們需要減少頁(yè)面的資源的數(shù)量，縮小頁(yè)面的尺寸。并不需要可以的調(diào)整頁(yè)面的外觀，通過(guò)一些工具和手段也能實(shí)現(xiàn)”瘦身”。 首先要考慮的就是哪些元素是必要的，哪些是不必要的，去掉不必要的元素，這樣就能最小化HTTP請(qǐng)求，這樣用戶的等待加載的耗時(shí)也最少。這可以通過(guò)壓縮CSS和JS來(lái)實(shí)現(xiàn)，推薦一款叫做Compass的工具——開(kāi)源的CSS框架編寫(xiě)工具。 Javascript推薦一款工具叫UglifyJS，可以壓縮代碼。 有選擇的載入 這也是可以考慮采用的重要手段，非常適用于響應(yīng)式設(shè)計(jì)的提速，這樣就能確保手機(jī)用戶不會(huì)下載那些會(huì)降低載入速度的元素。有選擇性的載入，能夠阻攔各種內(nèi)容的載入，包括社交窗口、圖像、地圖，以及其他。再采用這種手段之前，最好對(duì)網(wǎng)站進(jìn)行全面的測(cè)試，先要了解是哪方面降低了網(wǎng)頁(yè)的載入速度，這樣對(duì)癥下藥，效果才能更好。 圖像 我們都知道圖像在網(wǎng)頁(yè)中占據(jù)了大量的字節(jié)。一般在手機(jī)上的圖像表現(xiàn)力要比桌面上的差。 如果網(wǎng)站內(nèi)容很多，便會(huì)影響到載入速度，因此就需要截?cái)嘁徊糠謨?nèi)容，這樣就能夠提高載入速度。盡管可以通過(guò)改變src和img元素來(lái)調(diào)整標(biāo)記來(lái)實(shí)現(xiàn)此功能，但采用PHP解決方案Adaptive Images無(wú)疑會(huì)更加輕松。該軟件會(huì)根據(jù)屏幕大小自動(dòng)做出調(diào)整，合理的縮放嵌入的HTML圖像,而不需要改動(dòng)標(biāo)記。主要結(jié)合了彈性圖片技術(shù)（Fluid Image)，能夠方便的解決問(wèn)題，而且節(jié)省載入時(shí)間。這種自適應(yīng)圖像只占用一個(gè)htaccess文件，一個(gè)php文件，以及一行Javascript代碼，能夠判斷訪問(wèn)用戶的設(shè)備屏幕尺寸。 文本 文本同樣也納入了”瘦身”范圍，在較小的屏幕上，文本的布局不當(dāng)可能會(huì)導(dǎo)致閱讀問(wèn)題。FitText能夠解決此問(wèn)題，是一款jQuery插件，自動(dòng)改變字體大小。FitText只能解決標(biāo)題問(wèn)題，段落文本的問(wèn)題無(wú)法解決。
為何要選擇響應(yīng)式設(shè)計(jì)？
跟任何新式的科技和產(chǎn)品，剛過(guò)出現(xiàn)時(shí)，往往問(wèn)題繁多，響應(yīng)式設(shè)計(jì)也一樣，但并不能忽視它的價(jià)值，不能忽視它將帶來(lái)的完美體驗(yàn)。通過(guò)響應(yīng)式設(shè)計(jì)，我們能為用戶提供更好的瀏覽體驗(yàn)。沒(méi)人會(huì)因?yàn)檫^(guò)去的方法簡(jiǎn)單，而采用復(fù)古的技術(shù)，我們需要?jiǎng)?chuàng)新，需要用創(chuàng)新解決問(wèn)題，并在創(chuàng)新的的同時(shí)不斷調(diào)整、修正，以達(dá)到最佳。 Google非常支持響應(yīng)式設(shè)計(jì)，他們的建議 使用響應(yīng)式設(shè)計(jì)，他們認(rèn)為響應(yīng)式設(shè)計(jì)師最適合手機(jī)的方式。在社交分享類網(wǎng)站上，響應(yīng)式設(shè)計(jì)也大展拳腳，很多手持設(shè)備上的體驗(yàn)已經(jīng)和桌面上的一致。
說(shuō)的再遠(yuǎn)一點(diǎn)，響應(yīng)式網(wǎng)站能夠提高工作效率，只需更少的工作人員，就能達(dá)到更好的工作效果。 價(jià)值所在 手機(jī)和平板變得越來(lái)越流行，意味著使用也越來(lái)越多，越來(lái)越多的人選擇它們，因?yàn)橛盟鼈兩暇W(wǎng)更方便。以iOS和Android為系統(tǒng)的平板電腦在數(shù)碼消費(fèi)市場(chǎng)大行其道，銷量飆升。
目前為止，響應(yīng)式設(shè)計(jì)雖然有諸多不便，但是利大于弊。盡管有些許的載入速度問(wèn)題，一份調(diào)查采訪了很多世界知名品牌，盡管響應(yīng)式設(shè)計(jì)有些載入問(wèn)題，但是能夠帶來(lái)訪問(wèn)量的大幅上漲。 響應(yīng)式設(shè)計(jì)平均提高了網(wǎng)站23%的手機(jī)訪問(wèn)量，降低了26%的跳出率（跳出率定義了只瀏覽了單個(gè)頁(yè)面的訪問(wèn)量占總訪問(wèn)量的比率。跳出率能夠反映出引導(dǎo)頁(yè)的質(zhì)量，如果引導(dǎo)頁(yè)好，用戶會(huì)繼續(xù)瀏覽其他頁(yè)面，而不是瀏覽單個(gè)頁(yè)面后就選擇離開(kāi)。）增加了7.5%的訪問(wèn)時(shí)長(zhǎng)。 O’Neill，流行沖浪服飾供應(yīng)商，在使用響應(yīng)式設(shè)計(jì)后，iPad和iPhone上的轉(zhuǎn)化率(網(wǎng)站轉(zhuǎn)換率=進(jìn)行了相應(yīng)的動(dòng)作的訪問(wèn)量/總訪問(wèn)量)提高了65.7%。在便攜設(shè)備上完成的交易額幾乎和桌面設(shè)備相同，利潤(rùn)幾乎增長(zhǎng)了一倍。
而Android設(shè)備由于其流行面廣，平臺(tái)支持廣泛，便攜設(shè)備上的轉(zhuǎn)化率的提升更明顯，并且能稍微帶動(dòng)桌面設(shè)備上的轉(zhuǎn)化率。
上面分析的僅僅是一個(gè)品牌的故事，從中我們可見(jiàn)響應(yīng)式設(shè)計(jì)的作用非常巨大，別忘了，前些年，響應(yīng)式設(shè)計(jì)對(duì)于社交媒體/社交應(yīng)用的推廣作用巨大。 如何在響應(yīng)式設(shè)計(jì)的同時(shí)保證頁(yè)面的載入速度，找到最完美的平衡點(diǎn)，這非常值得我們?nèi)パ芯?。面?duì)挑戰(zhàn)，我們必須勇敢面對(duì)，努力的優(yōu)化、改進(jìn)，如果因?yàn)閱?wèn)題而停滯不前，而選擇逃避，那么結(jié)局只有被淘汰。
67%的手機(jī)用戶有過(guò)用手機(jī)網(wǎng)購(gòu)的經(jīng)驗(yàn)，手機(jī)將會(huì)在網(wǎng)購(gòu)方面取代桌面。因此，更多的商機(jī)在移動(dòng)設(shè)備中，因此，我們需要提供更好的多響應(yīng)式設(shè)計(jì)。
雖然響應(yīng)式設(shè)計(jì)仍處于發(fā)展初期，但是毫無(wú)疑問(wèn)，市場(chǎng)需求會(huì)激發(fā)它的快速發(fā)展，因此我們需要多掌握一些它的基本規(guī)則，多了解一點(diǎn)響應(yīng)式設(shè)計(jì)。 響應(yīng)式設(shè)計(jì)的優(yōu)化，你采用什么辦法？一起來(lái)討論一下。
