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