Web響應式設計中應避免的八大誤區

開發一個帶有響應式交互設計的網站變得很是有意義，由於其能夠在不一樣的設備運行，所以，你能夠節約針對不一樣平臺開發不一樣網站的成本。可是，要作最大限度相應的網頁設計，有些誤區你應當避免。

不要優先爲桌面版設計

開發者一般會犯的一個常見錯誤是，但他們設計網站時優先考慮桌面版，由於在這些人嚴重，將基於桌面版的網站轉變爲針對其餘設備的響應式web設 計 是件很輕鬆愉快的事情。可是，這個發生在計劃規劃階段的錯誤自己會變成一個很是巨大的問題。甚至會形成返工，固然，大量的錯誤也會蔓延出來。

然而，基於移動設備開發網站看起來會消耗一些時間而且在剛開始會有些困難。這是由於它迫使你在包含什麼內容上作出取捨，而且以一種你不習慣的方 式 去思考。然而，這樣作會使得內容和設計總體上更優秀。粗略來說，你能夠首先嚐試在比較小的設備上。一旦你在手機上作出了不錯的設計，適配到更大的屏幕 上會 變得很輕鬆。

導航欄菜單的麻煩

當爲移動端進行設計時，導航欄設計的問題可能會成爲你的一個禍根，因此不得不避免產生麻煩。不想是固定寬度的設計，響應式設計的導航應當根據設備類型進行肯定（因此智能手機的導航菜單可能和平板電腦，固然還有桌面版的導航菜單互有差別）。

許多設計者會發覺他們本身被這樣一項任務搞的很崩潰——嘗試設計一個能夠適應全部屏幕的導航菜單。在不少狀況下，設計者奮力將水平列表菜單轉換爲垂直列表菜單，尤爲是在適配較小的手機屏幕時。然而，因爲該導航欄並非根據屏幕進行設計，這可能會致使一項不好的用戶體驗。

不該隱藏內容

響應式設計一般會有更少的空間展現圖片和內容，可是這並不意味着你的內容應當被忽略。你不得不採起一種方式從新安排內容，使其可以保證易讀性。 這 個比較容易實現，能夠經過建立導航連接而且使用錨，是用戶在一個頁面中能看到他們一直在尋找的內容。那些經過CSS佈局控制內容隱藏的應當明白，這些 內容 依然會被加載，所以，你經過爲用戶提供完整的觀看體驗也沒什麼大不了。簡單而言，用戶不該該因爲他們所使用的設備而遭受開發者的「懲罰」。

單獨的移動端網站地址

單獨爲移動端網站分配一個地址整個就是一個災難，這摧毀了咱們起初交互設計的目的，而且是能夠論證的。當用戶在訪問網站時，重定向到移動端版 本， 結果是不得不浪費了不少寶貴的時間。此外，這也能很是嚴重地影響到你的搜索排名。可是，理所固然，使用不一樣的URL也有許多優點。它能夠確保你可以 架構具 有更輕便頁面的移動端網站，而且可以在智能設備上表現更好。該站點也能照顧到在特定平臺上的性能和表現。不幸的是，具備單獨移動端網站地址的消極 影響遠大於積極影響。

糟糕的用戶體驗

你不能簡單的把桌面版的內容壓縮成移動版；這麼作將會影響你的用戶的體驗，用戶可能會拋棄你的產品。在手機的有限空間內建立一個友好的界面是十 分 重要的。你能夠採起一些措施，好比，使用一個下拉菜單代替桌面上的導航條，這樣會節省你的空間。若是你先設計的是移動端，那麼這一般不會是一個使人頭 疼的問題。

不要忽視跨情景的公約

當你在作一個響應式的設計，你不能只考慮臺式和移動手機設備，你還應該考慮到其它類型的設備。人們可能會經過內嵌瀏覽器的智能電視或機頂盒來訪 問 你的網站。在如今，甚至掌上電腦都有不一樣的類型。可是，這並不意味着你能夠爲全部的設備建立一個相同的用戶界面，你最好是爲不一樣的設備建立不一樣的網 站。你 所須要作的是建立一個響應導航和一個用戶容易理解的設計。建立的這個導航能夠清楚的保存設備的上下文環境。

不要忽視頁面的加載時間

隨着寬帶的普及，網頁開發者開始習慣在頁面上大量的使用相對來講較大的資源。然而，當咱們使用手機時，咱們的用戶使用的是較慢的2G和3G網絡。一樣的，那些保持minf國際的用戶，他們是按使用的帶寬量來付費的。

一個頁面在臺式機上很快的加載進來，可是，在手機上加載一個頁面會花費很長時間或者去使用額外的、昂貴的帶寬。更糟糕的是，當用戶被迫去等待頁面加載時，即便是幾秒鐘，他們會離開這個頁面，同時你就會失去了你的流量。

不要爲觸摸屏設備開發

今天大多數手持的設備使用的是觸摸屏，甚至是不少筆記本也開始使用觸摸屏了。所以，當你設計響應式設計時，很重要的一點是不要忽略掉處理觸摸的 重 要性。有如下兩個方面緣由：第一，可點擊項，好比按鈕要考慮到用戶的手指的大小（不要讓用戶縮放點擊）。第二，你要正確的處理觸摸事件。這麼作能夠克 服300ms的點擊事件延遲。

傾情推薦web開發工具WebStorm（最近打折促銷，最低3.5折）,及Bootstrap框架中文版用於web設計中！