為你的響應式設計提速

 　　響應式設計是最近的流行詞，能夠打造多屏幕一致體驗。

　　現在幾乎每個人都喜歡響應式設計，而且可以是沒有原因的支持，這跟Flash剛出現那會火熱的局面有點相似。然而，響應式設計帶來了表現力的問題，這需要通過調整圖像、壓縮圖像、改變圖像大小等手段來解決。

　　然而，為了提高表現力，有的時候不得不增大文件的尺寸。浏覽體驗需要快速的載入，本文將講述一些為響應式設計提速的方法。

　　為什麼響應式設計載入那麼慢?

　　在所有的設備上，響應式設計載入的HTML元素都相同。就算你的網站專供桌面或者專供平板，在其他設備上，載入的元素依然相同。這就意味著需要通過網絡傳遞所有的內容，包括了圖像和腳本。

　　一項去年的調查表明，86%的響應式網站會將一個完整的桌面頁傳送到手機中。如果我們能夠對數據進行精簡、提升浏覽速度，那麼響應式設計將得到更好的推廣。

　　與此同時，響應式設計提高了頁面大小，這也是一個亟待處理的問題。因為研究發現 ，如果3秒之內無法載入頁面，57%的用戶會選擇離開。

　　怎樣提高載入性能?

　　對於那些已經采用響應式設計，現在想要進行進一步優化的人來說，Mobitest可以用來測量手持設備上網頁的載入性能，這樣就能發現問題，從而解決問題。當然如果設計還在進行或者計劃中，那麼優化起來就更方便了。只需要在設計過程中注意載入速度即可，這樣就不用事後亡羊補牢了。

　　為了提高表現力，我們需要減少頁面的資源的數量，縮小頁面的尺寸。並不需要可以的調整頁面的外觀，通過一些工具和手段也能實現”瘦身”。

　　首先要考慮的就是哪些元素是必要的，哪些是不必要的，去掉不必要的元素，這樣就能最小化HTTP請求，這樣用戶的等待加載的耗時也最少。這可以通過壓縮CSS和JS來實現，推薦一款叫做Compass的工具——開源的CSS框架編寫工具。

　　JavaScript推薦一款工具叫UglifyJS，可以壓縮代碼。

　　有選擇的載入

　　這也是可以考慮采用的重要手段，非常適用於響應式設計的提速，這樣就能確保手機用戶不會下載那些會降低載入速度的元素。

　　有選擇性的載入，能夠阻攔各種內容的載入，包括社交窗口、圖像、地圖，以及其他。再采用這種手段之前，最好對網站進行全面的測試，先要了解是哪方面降低了網頁的載入速度，這樣對症下藥，效果才能更好。

　　圖像

　　我們都知道圖像在網頁中占據了大量的字節。一般在手機上的圖像表現力要比桌面上的差。

　　如果網站內容很多，便會影響到載入速度，因此就需要截斷一部分內容，這樣就能夠提高載入速度。盡管可以通過改變src和img元素來調整標記來實現此功能，但采用PHP解決方案Adaptive Images無疑會更加輕松。該軟件會根據屏幕大小自動做出調整，合理的縮放嵌入的HTML圖像,而不需要改動標記。主要結合了彈性圖片技術(Fluid Image)，能夠方便的解決問題，而且節省載入時間。這種自適應圖像只占用一個htaccess文件，一個php文件，以及一行Javascript代碼，能夠判斷訪問用戶的設備屏幕尺寸。

　　文本

　　文本同樣也納入了”瘦身”范圍，在較小的屏幕上，文本的布局不當可能會導致閱讀問題。FitText能夠解決此問題，是一款jQuery插件，自動改變字體大小。FitText只能解決標題問題，段落文本的問題無法解決。

　　為何要選擇響應式設計?

　　跟任何新式的科技和產品，剛過出現時，往往問題繁多，響應式設計也一樣，但並不能忽視它的價值，不能忽視它將帶來的完美體驗。通過響應式設計，我們能為用戶提供更好的浏覽體驗。沒人會因為過去的方法簡單，而采用復古的技術，我們需要創新，需要用創新解決問題，並在創新的的同時不斷調整、修正，以達到最佳。

　　Google非常支持響應式設計，他們的建議 使用響應式設計，他們認為響應式設計師最適合手機的方式。

　　在社交分享類網站上，響應式設計也大展拳腳，很多手持設備上的體驗已經和桌面上的一致。

　　說的再遠一點，響應式網站能夠提高工作效率，只需更少的工作人員，就能達到更好的工作效果。

　　價值所在

　　手機和平板變得越來越流行，意味著使用也越來越多，越來越多的人選擇它們，因為用它們上網更方便。以iOS和Android為系統的平板電腦在數碼消費市場大行其道，銷量飙升。

　　目前為止，響應式設計雖然有諸多不便，但是利大於弊。盡管有些許的載入速度問題，一份調查采訪了很多世界知名品牌，盡管響應式設計有些載入問題，但是能夠帶來訪問量的大幅上漲。

　　響應式設計平均提高了網站23%的手機訪問量，降低了26%的跳出率(跳出率定義了只浏覽了單個頁面的訪問量占總訪問量的比率。跳出率能夠反映出引導頁的質量，如果引導頁好，用戶會繼續浏覽其他頁面，而不是浏覽單個頁面後就選擇離開。)增加了7.5%的訪問時長。

　　O’Neill，流行沖浪服飾供應商，在使用響應式設計後，iPad和iPhone上的轉化率(網站轉換率=進行了相應的動作的訪問量/總訪問量)提高了65.7%。在便攜設備上完成的交易額幾乎和桌面設備相同，利潤幾乎增長了一倍。

　　而Android設備由於其流行面廣，平台支持廣泛，便攜設備上的轉化率的提升更明顯，並且能稍微帶動桌面設備上的轉化率。

　　上面分析的僅僅是一個品牌的故事，從中我們可見響應式設計的作用非常巨大，別忘了，前些年，響應式設計對於社交媒體/社交應用的推廣作用巨大。

　　如何在響應式設計的同時保證頁面的載入速度，找到最完美的平衡點，這非常值得我們去研究。面對挑戰，我們必須勇敢面對，努力的優化、改進，如果因為問題而停滯不前，而選擇逃避，那麼結局只有被淘汰。

　　67%的手機用戶有過用購的經驗，手機將會在網購方面取代桌面。因此，更多的商機在移動設備中，因此，我們需要提供更好的多響應式設計。

　　雖然響應式設計仍處於發展初期，但是毫無疑問，市場需求會激發它的快速發展，因此我們需要多掌握一些它的基本規則，多了解一點響應式設計。