@MartinRGB 響應式設計是最近的流行詞，能夠打造多屏幕一致體驗。
現在幾乎每個人都喜歡響應式設計，而且可以是沒有原因的支持，這跟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%的手機用戶有過用手機網購的經驗，手機將會在網購方面取代桌面。因此，更多的商機在移動設備中，因此，我們需要提供更好的多響應式設計。
雖然響應式設計仍處于發展初期，但是毫無疑問，市場需求會激發它的快速發展，因此我們需要多掌握一些它的基本規則，多了解一點響應式設計。

響應式設計的優化，你采用什么辦法？一起來討論一下。
 
原文地址：https://medium.com/design-ux/9ecd34a1a0dc
優設網翻譯：MartinRGB

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量47萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：