使響應設計具有良好的用戶體驗所需要的東西遠遠不止媒體查詢這么簡單。如果你認為響應設計只是創建柔美的布局，那只能說明你不得要領。實際上，我們需要將固有的用戶體驗在越來越多的移動設備上進行實現。如果只是簡單地在每種設備上獨立地實現用戶體驗，從長遠來看是不可擴展的。創建自適應的用戶體驗是個明智的選擇，但實現起來是很具挑戰性的。

下面是一些在進行響應設計過程中應該避開的誤區：

1.         隱藏內容

因為采用響應設計的諸多網站共享同一個代碼庫，這樣很容易實現內容一致，而內容一致是個很不錯的方案。然而，也有例外，有許多響應網站都為了適應小屏幕設備而隱藏或刪除內容。

請遵守這一簡單的原則：不要讓稀客失望。用戶滿懷希望來訪問我們網站、享受我們的服務，滿足用戶的需求是我們的職責。桌面用戶所使用到的功能，移動用戶同樣也需要，而且一定要讓移動用戶可以正常地使用這些功能。所以，要盡最大努力，盡量使更多的用戶可以訪問你的網站、使用其功能。

另一點值得注意的是：帶有CSS的內容雖然被隱藏了，但還是會被加載。這是很影響性能的。這正好引入下一個應該避開的陷阱。

2.         內容膨脹

不應該在小屏幕設備上略去主要內容，而且你一直在努力實現完美的用戶體驗而從來不考慮網頁內容。貌似一切都很合理，不是嗎？其實不是，因為現在有太多的東西需要加載，這需要消耗時間。如果一個頁面用了5秒鐘還沒打開，74%的移動用戶將會離開（PDF），不幸的是：所有響應網站當中，只有3%的小屏幕版本比其相應的大屏版本更輕量級。這就意味著用戶要忍受后臺大量下載所帶來的時間開銷。

Barack Obama的響應網站上一般的頁面大小都在4MB以上。這在任何標準下都是不可接受的，更別說在EDGE、３G或是低速WiFi的聯網環境下。

對于一個面向普通用戶群（無論是何種種族、何種信條、何種膚色、何種宗教）的網站來說，這會導致很嚴重的訪問問題：

的確，其中一部分是RIM所需要的東西，但這些也的確是我們需要關注的。

進行web響應設計時最大的挑戰之一是：提供完整的用戶體驗時各因素能很好地協調，并且使所有的用戶都能得到很好的體驗。去掉程序中的冗余內容，遵循性能最佳實踐，不要以為默認連接是健壯的，想法探索先進技術（如conditional loading）使原始頁面大小盡量減小。

3.         忽略設備上下文約定

手機不是平板電腦、不是筆記本電腦、不是臺式機、也不是電視機。

每種設備都有自己唯一的外形尺寸、接口標準、限制和使用機會。為了讓用戶體驗更加自然，我們應該把所有這些因素都考慮在內。我并不是建議在瀏覽器中為每種平臺都創建各自的本地UI，但我們的確有必要留意一下用戶使用設備的習慣，比如：他們習慣于看什么樣式的圖標等等。瀏覽器中好的響應設計應該能夠避開沙箱效應，不管用戶如何使用也不管是何種設備上下文。 按照定義，web響應設計并不等同于移動設計，所以是否在設計中考慮上下文環境因素取決于我們自己。這就意味著，要使響應導航能夠跨上下文、設計能夠很好地適用于觸摸屏、避免讓移動用戶下載一些不必要的內容。

考慮到設備之間的差異如此之多，自然會理解折衷處理的必要性，這里只是提出一種融洽地處理上下文環境的思想。

4.         同一尺寸應用于所有設備

各種移動設備之間的差異有很多方面，不僅僅是屏幕大小的不同。由于新型設備不斷涌現，也就會滋生更多全新的用例、出現更多的使用模式、也會出現更多意想不到的情況。我們不應該僅僅因為創建響應布局就妄自菲薄。例如，我們有時會忘記手機可以定位、通話等等。這些設備上的瀏覽器有望在不久的將來提供更多的訪問設備的APIs，這樣，web的功能將進一步擴充。

我們應該充分發揮設備的硬件功能。處理約束為我們打下了很好的基礎，而后，我們可以利用漸近增強、特征檢測等技術使用戶體驗進一步地提高。

5.         依賴設備的分辨率

320px. 480px. 768px. 1024px. 各種各樣的分辨率，樣式實在太多了。

實質上，我們無法控制用戶的設備屏幕大小，也無法左右制造商生成何種設備。請相信我，他們正在嘗試生產所有的型號。

[[71726]]

永遠不要依賴于設備分辨率

另外，由于瀏覽器上書簽欄、chrome和Ask Jeeves工具欄的使用與否，會引起頁面高度不斷變化。但是，目前在移動web領域根本不會通過瀏覽器來衡量用戶體驗的好壞。我們通過Facebook、Twitter及其它應用業來訪問鏈接，所有這些應用都內嵌了自己的瀏覽器。當然，鏈接層次太多仍然是個問題，而你想要的是網頁加載速度越快越好，但是，在現有像素高度的情況下，鏈接層次和速度不可兼得，所以要學會放棄。

Jeremy Keith在其文章“Fanfare for the Common Breakpoint”中鏗鏘有力地指出“關鍵問題不是在斷點處發生了什么，而是在斷點之間發生了什么。”這就是說，我們設計的東西，無論尺寸大小，都應該是一個良好結合的整體。

讓設計本身來決定何處應該出現斷點。我很喜歡Stephen Hay的建議：“從小屏幕開始，然后不斷放大，直到圖像看起來不像樣時，插入斷點。”

在響應設計中，把斷點放置的決定權交給內容本身。我們的目標是，讓我們的設計不僅現在看起來美觀，在將來也一樣很好看。

 要不斷發展:

我們創建自適應的用戶體驗，這只是冰山一角。為了創建自適應的用戶體驗，我們應該無條件地避開這些陷阱（當然還有更多本文未提到的陷阱）。每天都有很多不同型號不同尺寸的設備問世，作為web開發人員，我們總會碰到這些設備。這的確有點令人生畏，但我們應該接受挑戰，把握機遇，盡量擴大我們的用戶群。

作者：Brad Frost，發表于2012年４月27日

原文鏈接：http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid