五個非常重要的移動web內容適應設計理念整理
改造現有的網站，使其可以通過移動設備訪問;
從頭開始構建全新的移動網站。
這兩種目標是截然不同的，所以相應的技術方法也不同。前者的目標可以歸結為：構建一個無縫縮放的網站。這樣的網站可以在不同尺寸的屏幕上正常顯示，而網站原有的結構、導航、用例則保持不變;后者的目標是構建一個全新的移動網站，以滿足移動用戶的需求(無論用戶是否處于運動狀態)，這需要不同的視圖和交互設計。
為了區分現有的不同技術，本文使用了術語：“無縫縮放”和“內容自適應”。前者的意思是當現有的網站面向不同分辨率的屏幕時具有更大的靈活性、適應性(flexible);后者的意思是為移動用戶量身定做。
內容自適應技術的演變
21世紀的頭10年里，移動web和桌面web之間的區別還是很明顯的。當時只有一種技術可以實現不同設備之間的內容適應—即在服務器端進行內容適應。這就意味著服務器要對設備進行識別以切換內容保證其正確顯示。實際上，服務器端的內容適應技術很必要的，如果沒有此技術web上的內容將無法在設備上正確顯示。然而， 在近5年情況更加復雜了，各種手機、平板電腦的出現使得移動瀏覽器與桌面瀏覽器之間的功能差異越來越小了。即使是最普通的功能手機也內嵌了功能豐富的瀏覽器。這就導致了三種結果：
移動設備和桌面設備之間將不再有明顯區別—現在正在由最普通的Nokia 1100到桌面瀏覽器平滑過度。
既然這么多的設備都具有了功能強大且支持JavaScript的瀏覽器，也就有越來越多的新技術為這些新設備提供內容適應服務。
有些人質疑內容適應技術的必要性，理由是智能手機幾乎可以顯示所有網站的內容。
本文旨在介紹諸多內容自適應技術，說明各技術的優缺點，以供參考。
下表列出了當今的主流技術：
此表可能存在爭議，因為，為了簡潔起見，一些復雜的及細微的特征在表中沒有表現出來。
響應式設計
響應式設計這個術語之所以如此流行是因為Ethan Marcotte 于2010年5月份在超具影響力的網站A List Apart上發表的一篇文章及其2011年發表的書籍《Responsive Web Design》中都極力推廣該術語。Ethan介紹了一系列的設計原則和技術，能夠保證網站適應于任何情況，也可以在移動設備上運行。實際上，流暢的設計一直是資深web開發人員的追求目標，但是Ethan所介紹的是一套具體的技術，大多數web開發者都可以在不使用其它新工具的情況下輕松實現這些技術，這就是該解決方案的誘人之處。
上述的響應式設計是基于以下三種技術的：
流體網格—確保底層頁面的網格可以很好地適應于各種尺寸的屏幕。
響應式圖像—圖像在可變網格中可以正確顯示。
CSS media queries—所使用的CSS樣式可適用于不同分辨率、不同類型的設備。
這些技術使得一個HTML頁面可以運行于不同設備，可以達到我們所期望的結果：采用這種技術所構建的網站可以很好地支持舊版本的瀏覽器，可以在所有桌面瀏覽器及大多數智能手機上運行。mediaqueri.es.上有很多這樣的例子。
(注：Ethan那本書的發行者Jeffrey Zeldman后來指出，響應式設計不應僅僅局限于Marcotee所介紹的技術，而應該包含所有可以實現這一目標的方法。)
響應式設計這一術語只是該技術的標簽。該技術包含了一整套的設計原則，以實現無縫縮放功能。可是，響應式設計容易與移動web相混淆，導致開發者的錯覺，他們會以為只要使用了響應式設計的網站就是對移動用戶友好的，就完成了移動網站的開發。當然了，做一個反應速度快的網站是好的，但缺少一種充分發揮移動設備本身功能的解決方案。
說實話，Ethan并不提倡用這種方法來構建移動網站，他有一個很明智的建議：要根據具體項目來選擇合適的方法。他在書中指出：“最重要的是，web響應式設計不是用來代替移動網站的。響應式設計只是一個設計理念，一個前端的開發策略。既然是開發策略，這就意味著要根據具體項目來做出正確的評估。
作為一種實現移動網站的方法，響應式設計存在以下三個問題：
只可以做到無縫縮放，而沒有實現內容自適應。從移動領域來看，這種技術是低效的。(即使圖片在某移動設備上不能全屏查看或者根本無法顯示，也需要將整個圖片下載下來。)
由于響應式設計理念中，HMTL代碼是要傳遞到所有設備中的(無論大小)，這就使得它不能很好地支持低端設備。波士頓環球報網站上大肆宣揚：“所謂的響應式設計杰作，在主流手機(如：Motorola RAZR、Nokia 6100)上卻不能很好地運行，甚至根本無法運行。”
不能很好地處理實時數據，所以用戶體驗不夠好。
響應式設計雖然可以實現無縫縮放，但是所支持的用例很有限，并不是一個很好的移動web解決方案。
#p#
Mobile-first 響應式設計
自從Ethan的文章及著作發表以來，許多人指出，如果將響應式設計反過來用可能會更合理：如果你設計的網頁風格默認就是對移動用戶友好的，那么一些響應式設計問題也就不存在了。特別地， 避免下載不必要的大圖片問題就可以由該方法解決。目前，這種技術的最佳實踐是：首先為所有設備提供合適的圖片，然后用這些圖片來代替大圖片。來自The Filament Group的Scott Jehl已經做到了這點。
Mobile-first 設計理念的另一個優點是：該設計理念可以作為一個楔子，使得設計人員找到了一個充分的理由來清除多年來在桌面網站上積累下來的不必要的混亂。因為按照mobile-first設計理念，這些混亂是必須要剔除的。
Mobile-first響應式設計是對原有技術的重大革新，但也存在問題：
只實現了無縫縮放，而沒有實現內容自適應。
桌面網站需要從頭開始重新設計。也許你認為這反倒是件好事。
總之，如果你的目標是構建移動網站，mobile-first響應式設計是唯一實用的響應式設計理念，因為從低端設備到桌面瀏覽器都可以使用該方案。
漸進增強
漸進增強(PE)是一種新近流行的有關內容適應方面的術語。最初是在約10年前由Steven Champeon和Nick Finck在他們的文章《Inclusive Web Design Future》中提出來的，該文章發表于SXSW。漸進增強的核心思想是：在單一的網頁上實現JavaScript增強邏輯，使其能夠服務于所有類型的設備。如果設備過于簡陋，則JavaScript可能得不到運行或報錯，因此用戶體驗會很差;如果是智能設備或桌面瀏覽器，則JavaScript會逐漸向頁面增加新的功能，充分發揮設備的硬件功能。理論上講，分層是沒有上限的，可以逐漸從功能手機瀏覽器漸漸過度到臺式電腦瀏覽器。
PE的誘人之處是很明顯的：它可以滿足所有類型的設備—可以很好地滿足低端設備，因為它是故障安全的解決方案;高端設備的功能又不會因為這個“最低限度共同點”而受到限制。剛剛發布的jQuery Mobile庫就用到了PE解決方案，dotMobi公司是該庫的贊助商之一。實際上，PE將內容適應邏輯從服務器端移到了客戶端。這種方案存在兩個問題：
該技術的核心“漸進增強”的執行是需要一定時間的，所需時間的長短主要取決于設備的硬件性能，當然也可能與網速有關。舉個例子，某些型號的黑莓手機理論上是支持JavaScript的，但實際上運行速度太慢以至于沒有什么實際用途。
和以往的技術一樣，該技術中多個用例共用同一個基本的HTML文件，這在功能上似乎很受限。
實際上，PE技術的最佳應用是消除移動設備之間的差異，而不是作為一個綜合的內容適應解決方案。
服務器端內容適應技術
服務器端內容適應技術早在12年前移動web剛剛出現時就開始使用了。該技術依賴于設備檢測庫或依賴于安裝在web服務器(或遠程web服務)上的數據庫，檢測訪問網站的設備并返回設備的性能信息。服務器端可以根據這些信息對頁面進行微調，使之很好的適應設備的性能。由于服務端內容適應技術中包含了設備檢測技術，所以有時也稱為“瀏覽器嗅探”。盡管也有不少反對者，瀏覽器嗅探的確很穩定很精準，據統計，該解決方案檢測設備的精準度達到了99.5%以上。
該技術的有效性不言自明：它仍然是迄今為止最常用的內容適應技術，幾乎所有重視mobile presence的知名互聯網公司都在使用該技術，包括Google、Facebook、Amazon、Youtube、Ebay以及Yahoo。dotMobi公司在自己的goMobi服務上也使用了該技術。很難找到一個沒使用服務器端內容適應技術而又取得成功的移動網站。
然而，服務器端內容適應技術也不是沒有缺點。其缺點主要有以下兩點：
所用到的設備檢測技術需要web開發者不斷進行更新。并且大多數設備檢測技術都是商業化的。
不能很好地使用瀏覽器的實時數據(例如，GPS定位或者設備當前的方向)以幫助web開發者更好地服務于用戶。
目前，WURFL和DeviceAtlas是設備檢測方面的領軍產品，這兩款產品都是商業化的。
混合方式
最后要介紹的技術是混合方式，該方法把服務器端內容適應技術與漸進增強技術結合在了一起。這種技術的工作原理是，當服務器收到客戶端的頁面請求時，服務器端首先向客戶端提交一個基于服務器端內容適應原則的初始頁面，然后由客戶端的JavaScript來捕獲設備的性能信息并返回給服務器端，服務器端根據所捕獲的信息對發向該設備的后續頁面進行微調整，使頁面更好地適應該設備。該技術首先是由Bryan Rieger和Stephanie Rieger發布的，他們在yiibu.com上很詳細地記錄了他們探索各種內容適應技術的曲折而漫長的道路。有趣的是，他們在嘗試該技術之前幾乎已經嘗試過了所有上文已經介紹過的技術。
他們使用了設備檢測技術和瀏覽器屬性“隱性數據庫”，還使用了modernizr-like JavaScript腳本。在此不詳述細節，建議大家看看他們的介紹：“適應：為什么響應式設計始于服務器端?”
這種混合方式對兩端來說都是最合適的方式—既可以利用高速的服務器端內容適應，又可以利用來源于設備自身的屬性來調整頁面。用戶可以得到一個初始的適合當前設備的頁面，又不會有什么性能開銷，并且后續頁面會根據此頁面自動進行調整。但是，這種方法也存在兩個缺點：
實現起來相對復雜，這點Riegers兩位也欣然承認。復雜性源于以下兩個因素：1)需要建立一個數據庫以保存瀏覽器的屬性，2)需要寫JavaScript代碼，以實現從瀏覽器中提取屬性并存入數據庫。
首次訪問服務器時，在用戶正直得到有用信息之前，需要一個從瀏覽器到服務器之間的往返時間的延遲開銷。在后續請求中可以使用cookies來消除該延遲。
總結：
所有可用技術都介紹過了，你會如何選擇呢?當然，要視具體情況而定。筆者認為，任何以“單個HTML文檔來滿足所有設備”為前提的技術，在根本上就是有缺陷的，就如同：大多數的電視內容不是多次播放的電影，大多數的網站也不是紙質報紙的完美復制品。用戶對某些類型的網站(例如博客)的交互需求是有限的，這樣單一的一套交互是可以同時滿足桌面與移動用戶的。但是，在更一般的情況下，如果也讓桌面與移動用戶共用同一套用例，最好的結果是：功能嚴重受限;最壞的結果是：根本無法運行。正如James Pearce的所述：“客戶端功能檢測如何將一個航空公司的介紹性網站轉變成為移動電子登機服務呢?漸進增強理念是以‘所有用戶的需求都相同，只是界面布局不同’的假設為前提的。”
如果航空公司所構建的移動網站和桌面網站采用相同的基本模板，這樣真的可行嗎?如果你真的想提供一流的移動用戶體驗，那么響應式設計和漸進增強將得不到很好的體現。你在Alexa網站上快速看一眼就會知道，真正的移動用戶體驗需要對HTML進行量身定做，而不是簡單地調整像素和div元素。
總之，如果你的網站只是運行在一些高端移動設備上，并且你不會特意去照顧某些移動web用戶，那么你可以采用響應式設計方案，或者mobile-first響應式設計方案。如果你的網站用例不太復雜，那么這兩種方案會很奏效。
如果你想提供一個全新的移動用戶體驗設計或者你想滿足所有的移動設備，那么你只能使用服務器端內容適應方案或混合方式。這也是所有知名互聯網公司都采用這種方案的原因。
上述都是基于對新媒體的信仰：移動web是一種新媒體，絕不是舊媒體的縮略版本;是一種功能強大的媒體，而不是disabled媒體;是一種全新的web，而不是合成的雜牌web。只有這樣看待和使用該新媒體，它才能得到最合理、最成功的應用。
【編輯推薦】
