響應式 Web 設計應該避免的錯誤

英文原文：Mistakes to Avoid With Responsive Web Design By Ramya Raju

當下，尤爲是幾乎人人都有一臺智能手機或者平板電腦的時候，開發手機端用戶體驗友好的網站的重要性不言而喻。其結果是，企業全部者會由於這樣的交互 網站設計可以給不一樣平臺下（桌面端到手機端到平板電腦）的用戶帶來不通常的體驗而去觸碰交互式web設計這一想法。開發一個帶有響應式交互設計的網站變得 很是有意義，由於其能夠在不一樣的設備運行，所以，你能夠節約針對不一樣平臺開發不一樣網站的成本。

可是，要作最大限度相應的網頁設計，有些錯誤你應當避免。

不要優先爲桌面版設計

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

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

導航欄菜單的麻煩

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

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

不該隱藏內容

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

單獨的移動端網站地址

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

糟糕的用戶體驗

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

不要忽視跨情景的公約

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

不要忽視頁面的加載時間

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

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

不要爲觸摸屏設備開發

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

總結和討論

因爲疏忽，上述這些錯誤不免會發生。設法去避免它們，就要確保你的響應式設計能在全部的設備類型上正常工做。

Will： 「不要先在桌面端作設計」，老實說來，僅僅是個意見，我不會過多嚴肅的對待；

Den McHenry ：你說的可能沒錯，但在這篇文章中的例子看來，這確實是個正確的選擇。

Will： 文章標題是「響應式Web設計應該避免的錯誤」，「不要先爲桌面端作設計」是給出了一個例子。這裏有兩個天然段來解釋爲什麼不先爲桌面端作設計，或者說是擴 大了對響應式web設計的無知。爲何首先在桌面端設計是錯誤的呢？建議多是錯誤的，盲目跟風而不是明白本身爲何這樣作是更大的錯誤。

Den McHenry： 我理解你這種對趨勢的下意識反應，可是手機先的設計原則並不像扁平化設計或者其餘的設計。這是事實，基於大量的證據，當這種觀點被聽衆所得到時，它更關注 於什麼是最重要的，而且提供了針對跨設備的最好的經驗。若要將兩種既定的方式進行類比，桌面先是優雅退化，而移動端先則是漸進加強。在第一種狀況下，您創 建您想要的網站，並決定須要移除什麼或如何作出改變已適應其不能匹配的設備。在第二種狀況下，您的構建則徹底像蓋房子從地基開始，爲各類視圖考慮最佳的經 驗。這並非說你不能在真正的設計（如需求，構建，測試，迭代）開始前和在構建中完成桌面端的理想設計，可是針對適應性和可用性而言，作減法相比作加法確 實會產生更多的錯誤從而增長時間成本。想象一下一個汽車製造商首先構建一個昂貴的模型，而後將組件作的更適配。想象一下一個建築設計師先設計一個房子，然 後規劃房間來知足你的需求。你失去告終構完整性和具備凝聚力的設計，同時在每一個階段引入新的 bug。老實說來，上文中關於首先在桌面進行開發的缺陷已經寫的很是清楚了，我不明白你的意思，看起來有點無腦黑的感受。

Will： 很差意思，我不接受你的觀點。你的類比並無道理，由於在web開發中，你實際上是能夠很是容易的減小空間適配更小的空間。此外，手機端首先怎麼避免這些問 題呢？你主觀上強迫減小了這些狀況的展現。我以爲如今手機終端作設計和在經驗豐富的桌面端作設計都是可行的，可是可能缺少比較好的用戶體驗。這就是爲何 我以爲X先是愚蠢的。重點在於用戶體驗，而非「先爲手機終端開發」。說到這，順便說一句，你的意見比文章更有指導性。乾的不錯。全部的文章都會說「這會導 致返工和大量的錯誤」，可是開發者不該該在沒有理解緣由的狀況下盲目的跟隨這寫建議。