英文原文：Mobile web content adaptation techniques
譯者：趙建光
如果你要構建移動(dòng)網(wǎng)站，那么本文可以幫你選擇合適的技術(shù)方案。本文并沒(méi)有具體描述如何去開(kāi)發(fā)，只是介紹應該如何選擇正確的方法。在開(kāi)始之前我們有必要明確一下這次實(shí)踐的目標。一般來(lái)說(shuō)，想要構建網(wǎng)站的人可分為兩大類(lèi)：
這兩種目標是截然不同的，所以相應的技術(shù)方法也不同。前者的目標可以歸結為：構建一個(gè)無(wú)縫縮放的網(wǎng)站。這樣的網(wǎng)站可以在不同尺寸的屏幕上正常顯示，而網(wǎng)站原有的結構、導航等則保持不變；后者的目標是構建一個(gè)全新的移動(dòng)網(wǎng)站，以滿(mǎn)足移動(dòng)用戶(hù)的需求（無(wú)論用戶(hù)是否處于運動(dòng)狀態(tài)），這需要不同的視圖設置和交互設計。
為了區分現有的不同技術(shù)，本文使用了術(shù)語(yǔ)：“無(wú)縫縮放”和“內容自適應”。前者的意思是當現有的網(wǎng)站面向不同分辨率的屏幕時(shí)具有更大的靈活性和適應性；后者的意思是為移動(dòng)用戶(hù)量身定做。
內容自適應技術(shù)的演變
21世紀的頭 10 年里，移動(dòng) Web 和桌面 Web 之間的區別還是很明顯的。當時(shí)只有一種技術(shù)可以實(shí)現不同設備之間的內容適應——即在服務(wù)器端進(jìn)行內容適應。這就意味著(zhù)服務(wù)器要對設備進(jìn)行識別以切換內容保證其正確顯示。
實(shí)際上，服務(wù)器端的內容適應技術(shù)很重要。如果沒(méi)有此技術(shù)，Web 上的內容將無(wú)法在設備上正確顯示。然而，在近 5 年情況變得更加復雜了。各種手機、平板電腦的出現使得移動(dòng)瀏覽器與桌面瀏覽器之間的功能差異越來(lái)越小了。即使是最普通的功能手機也內嵌了功能豐富的瀏覽器。這就導致了三種結果：
本文旨在介紹諸多內容自適應技術(shù)，說(shuō)明各技術(shù)的優(yōu)缺點(diǎn)，以供參考。
下表列出了當今的主流技術(shù)：
此表可能存在爭議，因為，為了簡(jiǎn)潔起見(jiàn)，一些復雜的及細微的特征在表中沒(méi)有表現出來(lái)。
1、響應式設計
響應式設計這個(gè)術(shù)語(yǔ)之所以如此流行是因為 Ethan Marcotte 于 2010 年 5 月份在超具影響力的網(wǎng)站A List Apart 上發(fā)表的一篇文章及其 2011 年發(fā)表的書(shū)籍《Responsive Web Design》中都極力推廣該術(shù)語(yǔ)。Ethan 介紹了一系列的設計原則和技術(shù)，能夠保證網(wǎng)站在任何情況下都可以在移動(dòng)設備上運行。實(shí)際上，流暢的設計一直是資深 Web 開(kāi)發(fā)人員的追求目標，但是 Ethan 所介紹的是一套具體的技術(shù)，大多數 Web 開(kāi)發(fā)者都可以在不使用其它新工具的情況下輕松實(shí)現這些技術(shù)，這就是該解決方案的誘人之處。
上述的響應式設計是基于以下三種技術(shù)的：
這些技術(shù)使得一個(gè) HTML 頁(yè)面可以運行于不同設備，達到我們所期望的結果：采用這種技術(shù)所構建的網(wǎng)站可以很好地支持舊版本的瀏覽器，可以在所有桌面瀏覽器及大多數智能手機上運行。Media Queries 上有很多這樣的例子。(注：Ethan 那本書(shū)的發(fā)行者 Jeffrey Zeldman 后來(lái)指出，響應式設計不應僅僅局限于 Ethan 所介紹的技術(shù)，而應該包含所有可以實(shí)現這一目標的方法。)
響應式設計這一術(shù)語(yǔ)只是該技術(shù)的標簽。該技術(shù)包含了一整套的設計原則，以實(shí)現無(wú)縫縮放功能?？墒?，響應式設計容易與移動(dòng) Web 相混淆，導致開(kāi)發(fā)者產(chǎn)生錯覺(jué)，他們會(huì )以為只要使用了響應式設計的網(wǎng)站就是對移動(dòng)用戶(hù)友好的網(wǎng)站，就完成了移動(dòng)網(wǎng)站的開(kāi)發(fā)。當然了，做一個(gè)反應速度快的網(wǎng)站是好事，但缺少一個(gè)充分發(fā)揮移動(dòng)設備本身功能的解決方案。
說(shuō)實(shí)話(huà)，Ethan 并不提倡用這種方法來(lái)構建移動(dòng)網(wǎng)站，他有一個(gè)很明智的建議：要根據具體項目來(lái)選擇合適的方法。他在書(shū)中指出：“最重要的是，Web 響應式設計不是用來(lái)代替移動(dòng)網(wǎng)站的。響應式設計只是一個(gè)設計理念，一個(gè)前端的開(kāi)發(fā)策略。既然是開(kāi)發(fā)策略，這就意味著(zhù)要根據具體項目來(lái)做出正確的評估。
作為一種實(shí)現移動(dòng)網(wǎng)站的方法，響應式設計存在以下三個(gè)問(wèn)題：
響應式設計雖然可以實(shí)現無(wú)縫縮放，但是所支持的用例很有限，并不是一個(gè)很好的移動(dòng) Web 解決方案。
2、Mobile-First 響應式設計
自從 Ethan 的文章及著(zhù)作發(fā)表以來(lái)，許多人指出，如果將響應式設計反過(guò)來(lái)用可能會(huì )更合理：如果你設計的網(wǎng)頁(yè)風(fēng)格默認就是對移動(dòng)用戶(hù)友好的，那么一些響應式設計問(wèn)題也就不存在了。特別地，避免下載不必要的大圖片問(wèn)題就可以由該方法來(lái)解決。目前，這種技術(shù)的最佳實(shí)踐是：首先為所有設備提供合適的圖片，然后用這些圖片來(lái)代替大圖片。來(lái)自 The Filament Group 的 Scott Jehl 已經(jīng)做到了這點(diǎn)。
Mobile-First 設計理念的另一個(gè)優(yōu)點(diǎn)是：該設計理念可以作為一個(gè)楔子，使得設計人員找到了一個(gè)充分的理由來(lái)清除多年來(lái)在桌面網(wǎng)站上積累下來(lái)的不必要的混亂。因為按照 Mobile-First 的設計理念，這些混亂是必須要被剔除的。
Mobile-First 響應式設計是對原有技術(shù)的重大革新，但也存在以下問(wèn)題：
總之，如果你的目標是構建移動(dòng)網(wǎng)站，Mobile-First 響應式設計是唯一實(shí)用的響應式設計理念，因為從低端設備到桌面瀏覽器都可以使用該方案。
3、漸進(jìn)增強（PE）
漸進(jìn)增強（PE）是一個(gè)新近流行的有關(guān)內容適應方面的術(shù)語(yǔ)。最初是在約 10 年前由 Steven Champeon 和 Nick Finck 在他們的文章《Inclusive Web Design Future》中提出來(lái)的，該文章發(fā)表于 SXSW。漸進(jìn)增強的核心思想是：在單一的網(wǎng)頁(yè)上實(shí)現 JavaScript 增強邏輯，使其能夠服務(wù)于所有類(lèi)型的設備。如果設備過(guò)于簡(jiǎn)陋，則 JavaScript 可能得不到運行或報錯，因此用戶(hù)體驗會(huì )很差；如果是智能設備或桌面瀏覽器，則 JavaScript 會(huì )逐漸向頁(yè)面增加新的功能，充分發(fā)揮設備的硬件功能。理論上講，分層是沒(méi)有上限的，可以逐漸從功能手機瀏覽器漸漸過(guò)度到臺式電腦瀏覽器。
PE 的誘人之處是很明顯的：它可以滿(mǎn)足所有類(lèi)型的設備（包括低端設備），因為它是故障安全的解決方案；高端設備的功能又不會(huì )因為這個(gè)“最低限度共同點(diǎn)”而受到限制。剛剛發(fā)布的 jQuery Mobile 庫就用到了 PE 解決方案，實(shí)際上，PE 將內容適應邏輯從服務(wù)器端移到了客戶(hù)端。這種方案存在兩個(gè)問(wèn)題：
實(shí)際上，PE 技術(shù)的最佳應用是消除移動(dòng)設備之間的差異，而不是作為一個(gè)綜合的內容適應解決方案。
4、服務(wù)器端內容適應技術(shù)
服務(wù)器端內容適應技術(shù)早在 12 年前移動(dòng) Web 剛剛出現時(shí)就開(kāi)始使用了。該技術(shù)依賴(lài)于設備檢測庫或依賴(lài)于安裝在 Web 服務(wù)器（或遠程 Web 服務(wù)）上的數據庫，檢測訪(fǎng)問(wèn)網(wǎng)站的設備并返回設備的性能信息。服務(wù)器端可以根據這些信息對頁(yè)面進(jìn)行微調，使之很好的適應設備的性能。由于服務(wù)端內容適應技術(shù)中包含了設備檢測技術(shù)，所以有時(shí)也被稱(chēng)為“瀏覽器嗅探”。盡管也有不少反對者，但瀏覽器嗅探確實(shí)很穩定很精準，據統計，該解決方案檢測設備的精準度達到了 99.5% 以上。
該技術(shù)的有效性不言自明：它仍然是迄今為止最常用的內容適應技術(shù)，幾乎所有重視移動(dòng)用戶(hù)體驗的知名互聯(lián)網(wǎng)公司都在使用該技術(shù)，包括 Google、Facebook、Amazon、Youtube、Ebay 以及 Yahoo。你很難找到一個(gè)沒(méi)使用服務(wù)器端內容適應技術(shù)而又取得成功的移動(dòng)網(wǎng)站。
然而，服務(wù)器端內容適應技術(shù)也不是沒(méi)有缺點(diǎn)。其缺點(diǎn)主要有以下兩點(diǎn)：
目前，WURFL 和 DeviceAtlas 是設備檢測方面的領(lǐng)軍產(chǎn)品，這兩款產(chǎn)品都是商業(yè)化的。
5、混合方法
最后要介紹的技術(shù)是混合方法，該方法把服務(wù)器端內容適應技術(shù)與漸進(jìn)增強技術(shù)結合在了一起。這種技術(shù)的工作原理是，當服務(wù)器收到客戶(hù)端的頁(yè)面請求時(shí)，服務(wù)器端首先向客戶(hù)端提交一個(gè)基于服務(wù)器端內容適應原則的初始頁(yè)面，然后由客戶(hù)端的 JavaScript 來(lái)捕獲設備的性能信息并返回給服務(wù)器端，服務(wù)器端根據所捕獲的信息對發(fā)向該設備的后續頁(yè)面進(jìn)行微調，使頁(yè)面更好地適應該設備。
該技術(shù)首先是由 Bryan Rieger 和 Stephanie Rieger 發(fā)布的，他們在 yiibu.com 上很詳細地記錄了他們探索各種內容適應技術(shù)的曲折而漫長(cháng)的道路。有趣的是，他們在嘗試該技術(shù)之前幾乎已經(jīng)嘗試過(guò)了所有上文已經(jīng)介紹過(guò)的技術(shù)。
他們使用了設備檢測技術(shù)和瀏覽器屬性“隱性數據庫”，還使用了 modernizr-like JavaScript 腳本。在此不詳述細節，建議大家看看他們的介紹：“適應：為什么響應式設計始于服務(wù)器端？”
這種混合方法對用戶(hù)端和服務(wù)器端來(lái)說(shuō)都是最合適的方式——既可以利用高速的服務(wù)器端內容適應，又可以利用來(lái)源于設備自身的屬性來(lái)調整頁(yè)面。用戶(hù)可以得到一個(gè)初始的適合當前設備的頁(yè)面，又不會(huì )有什么性能開(kāi)銷(xiāo)，并且后續頁(yè)面會(huì )根據此頁(yè)面自動(dòng)進(jìn)行調整。但是，這種方法也存在兩個(gè)缺點(diǎn)：
總結：
所有可用的技術(shù)都介紹過(guò)了，接下來(lái)你會(huì )如何選擇呢？當然，要視具體情況而定。筆者認為，任何以“單個(gè) HTML 文檔來(lái)滿(mǎn)足所有設備”為前提的技術(shù)，本是就是有缺陷的，就如同：大多數的電視內容不是多次播放的電影，大多數的網(wǎng)站也不是紙質(zhì)報紙的完美復制品。用戶(hù)對某些類(lèi)型的網(wǎng)站（例如博客）的交互需求是有限的，這樣單一的一套交互方案是可以同時(shí)滿(mǎn)足桌面與移動(dòng)用戶(hù)的。但是，在更一般的情況下，如果也讓桌面與移動(dòng)用戶(hù)共用同一套方案，最好的結果是：功能?chē)乐厥芟蓿?最壞的結果是：根本無(wú)法運行。
正如一位 CTO 所說(shuō)：“客戶(hù)端功能檢測如何將一個(gè)航空公司的介紹性網(wǎng)站轉變成為移動(dòng)電子登機服務(wù)呢？漸進(jìn)增強理念是以‘所有用戶(hù)的需求都相同，只是界面布局不同’的假設為前提的?！?/p>
如果航空公司所構建的移動(dòng)網(wǎng)站和桌面網(wǎng)站采用相同的基本模板，這樣真的可行嗎？如果你真的想提供一流的移動(dòng)用戶(hù)體驗，那么響應式設計和漸進(jìn)增強將得不到很好的體現。你在 Alexa 網(wǎng)站上快速看一眼就會(huì )知道，想要提供優(yōu)質(zhì)的移動(dòng)用戶(hù)體驗需要對 HTML 進(jìn)行量身定做，而不是簡(jiǎn)單地調整像素和 div 元素。
總之，如果你的網(wǎng)站只是運行在一些高端移動(dòng)設備上，并且你不會(huì )特意去照顧某些移動(dòng) Web 用戶(hù)，那么你可以采用響應式設計方案，或者 Mobile-First 響應式設計方案。如果你的網(wǎng)站元素不太復雜，那么這兩種方案會(huì )很奏效。
如果你想提供一個(gè)全新的移動(dòng)用戶(hù)體驗設計或者你想滿(mǎn)足所有的移動(dòng)設備，那么你只能使用服務(wù)器端內容適應方案或混合方法。這也是所有知名互聯(lián)網(wǎng)公司都采用這種方案的原因。
上述觀(guān)點(diǎn)都是基于對新媒體的信仰：移動(dòng) Web 是一種新媒體，絕不是舊媒體的縮略版本；是一種功能強大的媒體，而不是功能弱小的媒體；是一種全新的 Web，而不是合成的雜牌 Web。只有這樣看待和使用該新媒體，它才能得到最合理、最成功的應用。
聯(lián)系客服
