在過去的5年里，移動流量的份額增長了20%，今天響應式網站設計已經被認為是理所當然的了。到2020年，您可以通過手機訪問任何網站，它會很好用。大多數用戶如果看到一個網站在他們的智能手機或平板電腦上表現不佳，就會離開該網站。如果沒有針對移動設備進行優化，谷歌將降低該網站在搜索結果中的排名。

因此，響應式網站的設計需要一種特殊的方法，不同于靜態網站的開發。設計師使用響應式網站設計，設計首先由用戶的設備（智能手機、平板電腦或電腦）決定，然后根據設備的屏幕大小顯示。

一方面，創建響應式網站設計簡化了網站的開發和維護，代碼和SEO將是相同的所有設備。另一方面，響應式站點不僅僅是拉伸整個站點以適應屏幕，而是調整頁面上的每個元素。響應式網站設計不能100%控制內容和風格，因為設計師永遠不知道用戶設備的大小。在設計響應式網站設計時，有抱負的設計師會犯一些常見的錯誤，而有經驗的專業人員不得不做出妥協。

當響應式網站設計是不友好時

速度慢

響應式網站設計通常意味著移動用戶的加載時間很長，在適應設備屏幕之前，網站的全桌面版本必須加載。所有的內容都會自動加載，即使是那些不會顯示給手機用戶的內容。

此外，盡管移動設備被廣泛采用，無線互聯網的速度仍然很慢。再加上大量的圖片和視頻，這使得在移動設備上使用該網站非常困難。

裁剪功能

有了響應式網站設計，網站在不同設備上的體驗會有很大的不同。通常，設計師會刪去他們認為在移動設備上沒有必要的功能。但是這樣的決定打破了用戶的期望，特別是當他們已經有使用擴展版網站的經驗。他們來到這個網站尋求解決問題的方法，并希望無論使用什么設備，都能獲得相同的功能。

另一個折衷方案是在“請求桌面”網站的移動版上增加一個按鈕，以照顧用戶并讓他們選擇為幌子。但說實話，在設計移動版本并負責用戶如何接收設備上的內容時，我感覺自己很懶。

尷尬的可用性

響應式網站設計意味著相同的內容被優化為正確的屏幕大小，但是內容體驗需要是特定于設備的。

有時候設計師對網站移動版本的內容和界面不夠重視，或者沒有參與跨平臺測試。因此，用戶被迫無休止地滾動冗長的頁面，在導航菜單的層次結構中下滑，在不舒服的表格中導航，僅僅因為這些內容以與桌面版本相同的方式呈現。

修正響應式網站設計中的錯誤

真正的適應性

考慮如何在移動設備上最大化網站內容。列、導航、表格和表單會是什么樣子？簡單地縮小尺寸不是一個好主意，需要一種更深思熟慮的方法。

當用戶使用不同設備時，首先考慮用戶的需求和情境。在頁面上突出行動呼吁，建立一個簡短和方便的路徑，讓用戶成功地達到他們的目標。

導航和屏幕

當然，移動設備上的導航不同于桌面屏幕上的導航。移動設備上的導航需要簡化，這樣用戶就可以快速訪問他們需要的信息。要做到這一點，您可以嘗試使用標簽，以避免將桌面導航隱藏在漢堡包菜單后面。

用戶習慣了手勢。他們喜歡翻動卡片，拖放列表項，縮放圖片。只要有可能，盡量為導航設計觸控手勢支持，使操作更直觀。

移動設備（智能手機、平板電腦和筆記本電腦）激增的另一方面是對寬屏設計的關注逐漸減少。但是桌面電腦仍然很流行，為它們正確地顯示網站頁面仍然是設計師的工作。

不要忘記寬屏。在大屏幕上，用戶可能會注意到設計師的錯誤，比如背景圖片的寬度固定，兩邊有間隙，字體太小，文字的列數過窄。

無論用戶的設備有多大，都必須最大限度地利用空間。

負載優化

圖片占了很大一部分，最多占頁面重量的50%。加快您的網站速度最簡單的方法是優化您的圖片。只要有可能，為界面創建矢量圖形，并使用Sketch的內置工具和第三方服務優化光柵圖形。還可以聯系開發人員，討論如何使用代碼準備圖像進行進一步優化。讓圖像逐漸加載，而不破壞布局。

排版和布局

當縮小屏幕的寬度時，減小文本的大小是值得的。但是如果您把字體做得太小，它就會變得難以閱讀。如果您把它加得太多，用戶就不會想要滾動瀏覽很長的文本行。為了獲得最佳的可讀性，每行理想的字符數應該在60-70左右，字體大小為16px，也就是8-10個單詞。

素描鏡使它很容易檢查如何布局將看，生活在一個移動設備上。這個應用程序將幫助您找到舒適的閱讀和頁面內容的簡單導航之間的中間地帶。

表格和形式

電子表格和形狀對于設計人員來說也是一個頭疼的問題，當他們為移動設備設計時。

在更小的屏幕上顯示表數據有不同的方法。他們可以添加水平滾動，完全重新設計數據，或者將行變成卡片。數據可以被重新安排，折疊成列表，停靠在屏幕的邊緣。您選擇的解決方案類型主要取決于您擁有的數據類型。

表單也應該易于通過電話填寫。而不是一長串的字段，適合在一個屏幕上臺式電腦，最好是做一個循序漸進的向導界面和使用移動模式：上面的標題字段，顯示錯誤在提交表單之前，做分頁如果分頁的形式，等等。

為用戶而不是平臺設計

創建一個有用的響應式網站設計的最好方法是同時設計手機和平板電腦版本。為用戶而不是設備設計。用戶可以在智能手機和電腦上用不同的方式解決他們的問題。但是，無論平臺如何，您都需要同樣注意為用戶設計體驗。