【五個(gè)非常重要的移動(dòng)Web內(nèi)容適應(yīng)設(shè)計(jì)理念】

英文原文：Mobile web content adaptation techniques

　　譯者：趙建光

　　如果你要構(gòu)建移動(dòng)網(wǎng)站，那末本文可以幫你選擇適合的技術(shù)方案。本文并沒(méi)有具體描寫(xiě)如何去開(kāi)發(fā)，只是介紹應(yīng)當(dāng)如何選擇正確的方法。在開(kāi)始之前我們有必要明確1下這次實(shí)踐的目標(biāo)。1般來(lái)講，想要構(gòu)建網(wǎng)站的人可分為兩大類(lèi)：

• 改造現(xiàn)有的網(wǎng)站，使其可以通過(guò)移動(dòng)裝備訪問(wèn)；
• 從頭開(kāi)始構(gòu)建全新的移動(dòng)網(wǎng)站。
  

　　這兩種目標(biāo)是截然不同的，所以相應(yīng)的技術(shù)方法也不同。前者的目標(biāo)可以歸結(jié)為：構(gòu)建1個(gè)無(wú)縫縮放的網(wǎng)站。這樣的網(wǎng)站可以在不同尺寸的屏幕上正常顯示，而網(wǎng)站原本的結(jié)構(gòu)、導(dǎo)航等則保持不變；后者的目標(biāo)是構(gòu)建1個(gè)全新的移動(dòng)網(wǎng)站，以滿(mǎn)足移動(dòng)用戶(hù)的需求（不管用戶(hù)是不是處于運(yùn)動(dòng)狀態(tài)），這需要不同的視圖設(shè)置和交互設(shè)計(jì)。

　　為了辨別現(xiàn)有的不同技術(shù)，本文使用了術(shù)語(yǔ)：“無(wú)縫縮放”和“內(nèi)容自適應(yīng)”。前者的意思是當(dāng)現(xiàn)有的網(wǎng)站面向不同分辨率的屏幕時(shí)具有更大的靈活性和適應(yīng)性；后者的意思是為移動(dòng)用戶(hù)量身定做。

　　內(nèi)容自適應(yīng)技術(shù)的演化

　　21世紀(jì)的頭 10 年里，移動(dòng) Web 和桌面 Web 之間的區(qū)分還是很明顯的。當(dāng)時(shí)只有1種技術(shù)可以實(shí)現(xiàn)不同裝備之間的內(nèi)容適應(yīng)――即在服務(wù)器端進(jìn)行內(nèi)容適應(yīng)。這就意味著服務(wù)器要對(duì)裝備進(jìn)行辨認(rèn)以切換內(nèi)容保證其正確顯示。

　　實(shí)際上，服務(wù)器真?zhèn)€內(nèi)容適應(yīng)技術(shù)很重要。如果沒(méi)有此技術(shù)，Web 上的內(nèi)容將沒(méi)法在裝備上正確顯示。但是，在近 5 年情況變得更加復(fù)雜了。各種手機(jī)、平板電腦的出現(xiàn)使得移動(dòng)閱讀器與桌面閱讀器之間的功能差異愈來(lái)愈小了。即便是最普通的功能手機(jī)也內(nèi)嵌了功能豐富的閱讀器。這就致使了3種結(jié)果：

• 移動(dòng)裝備和桌面裝備之間將不再有明顯區(qū)分。
• 既然這么多的裝備都具有了功能強(qiáng)大且支持 JavaScript 的閱讀器，也就有愈來(lái)愈多的新技術(shù)為這些新裝備提供內(nèi)容適應(yīng)服務(wù)。
• 有些人質(zhì)疑內(nèi)容適應(yīng)技術(shù)的必要性，理由是智能手機(jī)幾近可以顯示所有網(wǎng)站的內(nèi)容。
  

　　本文旨在介紹諸多內(nèi)容自適應(yīng)技術(shù)，說(shuō)明各技術(shù)的優(yōu)缺點(diǎn)，以供參考。

　　下表列出了現(xiàn)今的主流技術(shù)：

此表可能存在爭(zhēng)議，由于，為了簡(jiǎn)潔起見(jiàn)，1些復(fù)雜的及細(xì)微的特點(diǎn)在表中沒(méi)有表現(xiàn)出來(lái)。

　　1、響應(yīng)式設(shè)計(jì)

　　響應(yīng)式設(shè)計(jì)這個(gè)術(shù)語(yǔ)之所以如此流行是由于 Ethan Marcotte 于 2010 年 5 月份在超具影響力的網(wǎng)站A List Apart 上發(fā)表的1篇文章及其 2011 年發(fā)表的書(shū)籍《Responsive Web Design》中都極力推行該術(shù)語(yǔ)。Ethan 介紹了1系列的設(shè)計(jì)原則和技術(shù)，能夠保證網(wǎng)站在任何情況下都可以在移動(dòng)裝備上運(yùn)行。實(shí)際上，流暢的設(shè)計(jì)1直是資深 Web 開(kāi)發(fā)人員的尋求目標(biāo)，但是 Ethan 所介紹的是1套具體的技術(shù)，大多數(shù) Web 開(kāi)發(fā)者都可以在不使用其它新工具的情況下輕松實(shí)現(xiàn)這些技術(shù)，這就是該解決方案的誘人的地方。

　　上述的響應(yīng)式設(shè)計(jì)是基于以下3種技術(shù)的：

• 流體網(wǎng)格――確保底層頁(yè)面的網(wǎng)格可以很好地適應(yīng)于各種尺寸的屏幕。
• 響應(yīng)式圖象――圖象在可變網(wǎng)格中可以正確顯示。
• CSS media queries――所使用的 CSS 樣式可適用于不同分辨率、不同類(lèi)型的裝備。
  

　　這些技術(shù)使得1個(gè) HTML 頁(yè)面可以運(yùn)行于不同裝備，到達(dá)我們所期望的結(jié)果：采取這類(lèi)技術(shù)所構(gòu)建的網(wǎng)站可以很好地支持舊版本的閱讀器，可以在所有桌面閱讀器及大多數(shù)智能手機(jī)上運(yùn)行。Media Queries 上有很多這樣的例子。(注：Ethan 那本書(shū)的發(fā)行者 Jeffrey Zeldman 后來(lái)指出，響應(yīng)式設(shè)計(jì)不應(yīng)僅僅局限于 Ethan 所介紹的技術(shù)，而應(yīng)當(dāng)包括所有可以實(shí)現(xiàn)這1目標(biāo)的方法。)

　　響應(yīng)式設(shè)計(jì)這1術(shù)語(yǔ)只是該技術(shù)的標(biāo)簽。該技術(shù)包括了1整套的設(shè)計(jì)原則，以實(shí)現(xiàn)無(wú)縫縮放功能。可是，響應(yīng)式設(shè)計(jì)容易與移動(dòng) Web 相混淆，致使開(kāi)發(fā)者產(chǎn)生錯(cuò)覺(jué)，他們會(huì)以為只要使用了響應(yīng)式設(shè)計(jì)的網(wǎng)站就是對(duì)移動(dòng)用戶(hù)友好的網(wǎng)站，就完成了移動(dòng)網(wǎng)站的開(kāi)發(fā)。固然了，做1個(gè)反應(yīng)速度快的網(wǎng)站是好事，但缺少1個(gè)充分發(fā)揮移動(dòng)裝備本身功能的解決方案。

　　說(shuō)實(shí)話，Ethan 其實(shí)不提倡用這類(lèi)方法來(lái)構(gòu)建移動(dòng)網(wǎng)站，他有1個(gè)很明智的建議：要根據(jù)具體項(xiàng)目來(lái)選擇適合的方法。他在書(shū)中指出：“最重要的是，Web 響應(yīng)式設(shè)計(jì)不是用來(lái)代替移動(dòng)網(wǎng)站的。響應(yīng)式設(shè)計(jì)只是1個(gè)設(shè)計(jì)理念，1個(gè)前真?zhèn)€開(kāi)發(fā)策略。既然是開(kāi)發(fā)策略，這就意味著要根據(jù)具體項(xiàng)目來(lái)做出正確的評(píng)估。

　　作為1種實(shí)現(xiàn)移動(dòng)網(wǎng)站的方法，響應(yīng)式設(shè)計(jì)存在以下3個(gè)問(wèn)題：

• 只可以做到無(wú)縫縮放，而沒(méi)有實(shí)現(xiàn)內(nèi)容自適應(yīng)。從移動(dòng)領(lǐng)域的角度來(lái)看，這類(lèi)技術(shù)效力低下。（即便圖片在某移動(dòng)裝備上不能全屏查看或根本沒(méi)法顯示，也需要將全部圖片下載下來(lái)。）
• 由于響應(yīng)式設(shè)計(jì)理念中，HMTL 代碼是要傳遞到所有裝備中的（不管大小），這就使得它不能很好地支持低端裝備。波士頓環(huán)球報(bào)網(wǎng)站上大肆宣揚(yáng)：“所謂的響應(yīng)式設(shè)計(jì)杰作，在主流手機(jī)（如：Motorola RAZR、Nokia 6100）上卻不能很好地運(yùn)行，乃至根本沒(méi)法運(yùn)行。”
• 不能很好地處理實(shí)時(shí)數(shù)據(jù)，所以用戶(hù)體驗(yàn)不夠好。
  

　　響應(yīng)式設(shè)計(jì)雖然可以實(shí)現(xiàn)無(wú)縫縮放，但是所支持的用例很有限，其實(shí)不是1個(gè)很好的移動(dòng) Web 解決方案。

　　2、Mobile-First 響應(yīng)式設(shè)計(jì)

　　自從 Ethan 的文章及著作發(fā)表以來(lái)，許多人指出，如果將響應(yīng)式設(shè)計(jì)反過(guò)來(lái)用可能會(huì)更公道：如果你設(shè)計(jì)的網(wǎng)頁(yè)風(fēng)格默許就是對(duì)移動(dòng)用戶(hù)友好的，那末1些響應(yīng)式設(shè)計(jì)問(wèn)題也就不存在了。特別地，避免下載沒(méi)必要要的大圖片問(wèn)題就能夠由該方法來(lái)解決。目前，這類(lèi)技術(shù)的最好實(shí)踐是：首先為所有裝備提供適合的圖片，然后用這些圖片來(lái)代替大圖片。來(lái)自The Filament Group 的 Scott Jehl 已做到了這點(diǎn)。

　　Mobile-First 設(shè)計(jì)理念的另外一個(gè)優(yōu)點(diǎn)是：該設(shè)計(jì)理念可以作為1個(gè)楔子，使得設(shè)計(jì)人員找到了1個(gè)充分的理由來(lái)清除多年來(lái)在桌面網(wǎng)站上積累下來(lái)的沒(méi)必要要的混亂。由于依照 Mobile-First 的設(shè)計(jì)理念，這些混亂是必須要被剔除的。

　　Mobile-First 響應(yīng)式設(shè)計(jì)是對(duì)原有技術(shù)的重大革新，但也存在以下問(wèn)題：

• 只實(shí)現(xiàn)了無(wú)縫縮放，而沒(méi)有實(shí)現(xiàn)內(nèi)容自適應(yīng)。
• 桌面網(wǎng)站需要從頭開(kāi)始重新設(shè)計(jì)。或許你認(rèn)為這反倒是件好事。
  

　　總之，如果你的目標(biāo)是構(gòu)建移動(dòng)網(wǎng)站，Mobile-First 響應(yīng)式設(shè)計(jì)是唯1實(shí)用的響應(yīng)式設(shè)計(jì)理念，由于從低端裝備到桌面閱讀器都可使用該方案。

　　3、漸進(jìn)增強(qiáng)（PE）

　　漸進(jìn)增強(qiáng)（PE）是1個(gè)新近流行的有關(guān)內(nèi)容適應(yīng)方面的術(shù)語(yǔ)。最初是在約 10 年前由 Steven Champeon 和 Nick Finck 在他們的文章《Inclusive Web Design Future》中提出來(lái)的，該文章發(fā)表于SXSW。漸進(jìn)增強(qiáng)的核心思想是：在單1的網(wǎng)頁(yè)上實(shí)現(xiàn) JavaScript 增強(qiáng)邏輯，使其能夠服務(wù)于所有類(lèi)型的裝備。如果裝備過(guò)于簡(jiǎn)陋，則 JavaScript 可能得不到運(yùn)行或報(bào)錯(cuò)，因此用戶(hù)體驗(yàn)會(huì)很差；如果是智能裝備或桌面閱讀器，則 JavaScript 會(huì)逐步向頁(yè)面增加新的功能，充分發(fā)揮裝備的硬件功能。理論上講，分層是沒(méi)有上限的，可以逐步從功能手機(jī)閱讀器漸漸過(guò)度到臺(tái)式電腦閱讀器。

　　PE 的誘人的地方是很明顯的：它可以滿(mǎn)足所有類(lèi)型的裝備（包括低端裝備），由于它是故障安全的解決方案；高端裝備的功能又不會(huì)由于這個(gè)“最低限度共同點(diǎn)”而遭到限制。剛剛發(fā)布的 jQuery Mobile 庫(kù)就用到了 PE 解決方案，實(shí)際上，PE 將內(nèi)容適應(yīng)邏輯從服務(wù)器端移到了客戶(hù)端。這類(lèi)方案存在兩個(gè)問(wèn)題：

• 該技術(shù)的核心“漸進(jìn)增強(qiáng)”的履行是需要1定時(shí)間的，所需時(shí)間的長(zhǎng)短主要取決于裝備的硬件性能，固然也可能與網(wǎng)速有關(guān)。舉個(gè)例子，某些型號(hào)的黑莓手機(jī)理論上是支持 JavaScript 的，但實(shí)際上運(yùn)行速度太慢以致于沒(méi)有甚么實(shí)際用處。
• 和以往的技術(shù)1樣，該技術(shù)中多個(gè)用例共用同1個(gè)基本的 HTML 文件，這在功能上似乎很受限。
  

　　實(shí)際上，PE 技術(shù)的最好利用是消除移動(dòng)裝備之間的差異，而不是作為1個(gè)綜合的內(nèi)容適應(yīng)解決方案。

　　4、服務(wù)器端內(nèi)容適應(yīng)技術(shù)

　　服務(wù)器端內(nèi)容適應(yīng)技術(shù)早在 12 年前移動(dòng) Web 剛剛出現(xiàn)時(shí)就開(kāi)始使用了。該技術(shù)依賴(lài)于裝備檢測(cè)庫(kù)或依賴(lài)于安裝在 Web 服務(wù)器（或遠(yuǎn)程 Web 服務(wù)）上的數(shù)據(jù)庫(kù)，檢測(cè)訪問(wèn)網(wǎng)站的裝備并返回裝備的性能信息。服務(wù)器端可以根據(jù)這些信息對(duì)頁(yè)面進(jìn)行微調(diào)，使之很好的適應(yīng)裝備的性能。由于服務(wù)端內(nèi)容適應(yīng)技術(shù)中包括了裝備檢測(cè)技術(shù)，所以有時(shí)也被稱(chēng)為“閱讀器嗅探”。雖然也有很多反對(duì)者，但閱讀器嗅探確切很穩(wěn)定很精準(zhǔn)，據(jù)統(tǒng)計(jì)，該解決方案檢測(cè)裝備的精準(zhǔn)度到達(dá)了 99.5% 以上。

　　該技術(shù)的有效性不言自明：它依然是迄今為止最經(jīng)常使用的內(nèi)容適應(yīng)技術(shù)，幾近所有重視移動(dòng)用戶(hù)體驗(yàn)的知名互聯(lián)網(wǎng)公司都在使用該技術(shù)，包括 Google、Facebook、Amazon、Youtube、Ebay 和 Yahoo。你很難找到1個(gè)沒(méi)使用服務(wù)器端內(nèi)容適應(yīng)技術(shù)而又獲得成功的移動(dòng)網(wǎng)站。

　　但是，服務(wù)器端內(nèi)容適應(yīng)技術(shù)也不是沒(méi)有缺點(diǎn)。其缺點(diǎn)主要有以下兩點(diǎn)：

• 所用到的裝備檢測(cè)技術(shù)需要 Web 開(kāi)發(fā)者不斷進(jìn)行更新，并且大多數(shù)裝備檢測(cè)技術(shù)都是商業(yè)化的。
• 不能很好地使用閱讀器的實(shí)時(shí)數(shù)據(jù)（例如，GPS 定位或裝備當(dāng)前的方向）以幫助 Web 開(kāi)發(fā)者更好地服務(wù)于用戶(hù)。
  

　　目前，WURFL 和 DeviceAtlas 是裝備檢測(cè)方面的領(lǐng)軍產(chǎn)品，這兩款產(chǎn)品都是商業(yè)化的。

　　5、混合方法

　　最后要介紹的技術(shù)是混合方法，該方法把服務(wù)器端內(nèi)容適應(yīng)技術(shù)與漸進(jìn)增強(qiáng)技術(shù)結(jié)合在了1起。這類(lèi)技術(shù)的工作原理是，當(dāng)服務(wù)器收到客戶(hù)真?zhèn)€頁(yè)面要求時(shí)，服務(wù)器端首先向客戶(hù)端提交1個(gè)基于服務(wù)器端內(nèi)容適應(yīng)原則的初始頁(yè)面，然后由客戶(hù)真?zhèn)€ JavaScript 來(lái)捕獲裝備的性能信息并返回給服務(wù)器端，服務(wù)器端根據(jù)所捕獲的信息對(duì)發(fā)向該裝備的后續(xù)頁(yè)面進(jìn)行微調(diào)，使頁(yè)面更好地適應(yīng)當(dāng)裝備。

　　該技術(shù)首先是由 Bryan Rieger 和 Stephanie Rieger 發(fā)布的，他們?cè)?nbsp;yiibu.com 上很詳細(xì)地記錄了他們探索各種內(nèi)容適應(yīng)技術(shù)的曲折而漫長(zhǎng)的道路。有趣的是，他們?cè)趪L試該技術(shù)之前幾近已嘗試過(guò)了所有上文已介紹過(guò)的技術(shù)。

　　他們使用了裝備檢測(cè)技術(shù)和閱讀器屬性“隱性數(shù)據(jù)庫(kù)”，還使用了 modernizr-like JavaScript 腳本。在此不詳述細(xì)節(jié)，建議大家看看他們的介紹：“適應(yīng)：為何響應(yīng)式設(shè)計(jì)始于服務(wù)器端？”

　　這類(lèi)混合方法對(duì)用戶(hù)端和服務(wù)器端來(lái)講都是最適合的方式――既可以利用高速的服務(wù)器端內(nèi)容適應(yīng)，又可以利用來(lái)源于裝備本身的屬性來(lái)調(diào)劑頁(yè)面。用戶(hù)可以得到1個(gè)初始的合適當(dāng)前裝備的頁(yè)面，又不會(huì)有甚么性能開(kāi)消，并且后續(xù)頁(yè)面會(huì)根據(jù)此頁(yè)面自動(dòng)進(jìn)行調(diào)劑。但是，這類(lèi)方法也存在兩個(gè)缺點(diǎn)：

• 實(shí)現(xiàn)起來(lái)相對(duì)復(fù)雜，這點(diǎn) Riegers 兩位也悵然承認(rèn)。復(fù)雜性源于以下兩個(gè)因素：復(fù)雜性源于以下兩個(gè)因素：1）需要建立1個(gè)數(shù)據(jù)庫(kù)以保存閱讀器的屬性；2）需要寫(xiě) JavaScript 代碼，以實(shí)現(xiàn)從閱讀器中提取屬性并存入數(shù)據(jù)庫(kù)。
• 首次訪問(wèn)服務(wù)器時(shí)，在用戶(hù)得到有用信息之前，需要1個(gè)從閱讀器到服務(wù)器之間的來(lái)回時(shí)間的延遲開(kāi)消。在后續(xù)要求中可使用 cookies 來(lái)消除該延遲。
  

　　總結(jié)：

　　所有可用的技術(shù)都介紹過(guò)了，接下來(lái)你會(huì)如何選擇呢？固然，要視具體情況而定。筆者認(rèn)為，任何以“單個(gè) HTML 文檔來(lái)滿(mǎn)足所有裝備”為條件的技術(shù)，本是就是有缺點(diǎn)的，就猶如：大多數(shù)的電視內(nèi)容不是屢次播放的電影，大多數(shù)的網(wǎng)站也不是紙質(zhì)報(bào)紙的完善復(fù)制品。用戶(hù)對(duì)某些類(lèi)型的網(wǎng)站（例如博客）的交互需求是有限的，這樣單1的1套交互方案是可以同時(shí)滿(mǎn)足桌面與移動(dòng)用戶(hù)的。但是，在更1般的情況下，如果也讓桌面與移動(dòng)用戶(hù)共用同1套方案，最好的結(jié)果是：功能?chē)?yán)重受限； 最壞的結(jié)果是：根本沒(méi)法運(yùn)行。

　　正如1位 CTO 所說(shuō)：“客戶(hù)端功能檢測(cè)如何將1個(gè)航空公司的介紹性網(wǎng)站轉(zhuǎn)變成為移動(dòng)電子登機(jī)服務(wù)呢？漸進(jìn)增強(qiáng)理念是以‘所有用戶(hù)的需求都相同，只是界面布局不同’的假定為條件的。”

　　如果航空公司所構(gòu)建的移動(dòng)網(wǎng)站和桌面網(wǎng)站采取相同的基本模板，這樣真的可行嗎？如果你真的想提供1流的移動(dòng)用戶(hù)體驗(yàn)，那末響應(yīng)式設(shè)計(jì)和漸進(jìn)增強(qiáng)將得不到很好的體現(xiàn)。你在 Alexa 網(wǎng)站上快速看1眼就會(huì)知道，想要提供優(yōu)良的移動(dòng)用戶(hù)體驗(yàn)需要對(duì) HTML 進(jìn)行量身定做，而不是簡(jiǎn)單地調(diào)劑像素和 div 元素。

　　總之，如果你的網(wǎng)站只是運(yùn)行在1些高端移動(dòng)裝備上，并且你不會(huì)特地去照顧某些移動(dòng) Web 用戶(hù)，那末你可以采取響應(yīng)式設(shè)計(jì)方案，或 Mobile-First 響應(yīng)式設(shè)計(jì)方案。如果你的網(wǎng)站元素不太復(fù)雜，那末這兩種方案會(huì)很見(jiàn)效。

　　如果你想提供1個(gè)全新的移動(dòng)用戶(hù)體驗(yàn)設(shè)計(jì)或你想滿(mǎn)足所有的移動(dòng)裝備，那末你只能使用服務(wù)器端內(nèi)容適應(yīng)方案或混合方法。這也是所有知名互聯(lián)網(wǎng)公司都采取這類(lèi)方案的緣由。

　　上述觀點(diǎn)都是基于對(duì)新媒體的信仰：移動(dòng) Web 是1種新媒體，絕不是舊媒體的縮略版本；是1種功能強(qiáng)大的媒體，而不是功能弱小的媒體；是1種全新的 Web，而不是合成的雜牌 Web。只有這樣看待和使用該新媒體，它才能得到最公道、最成功的利用。

　　參考文章：

• Not a mobile web, merely a 320px-wide one
• There is no Mobile Web
• Responsive images part 1
• State of mobile web development, part 1/3: the problem
• State of mobile web development, part 2/3: progressive enhancement
• State of mobile web development, part 3/3: the mobile industry’s failings
• Benchmarking your device detection solutions

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)