五個(gè)非常重要(yào / yāo)的(de)移動Web内容适應設計理念

2021-08-01

英文原文：Mobile web content adaptation techniques

譯者：趙建光

如果你要(yào / yāo)構建移動網站，那麽本文可以(yǐ)幫你選擇合适的(de)技術方案。本文并沒有具體描述如何去開發，隻是(shì)介紹應該如何選擇正确的(de)方法。在(zài)開始之(zhī)前我們有必要(yào / yāo)明确一(yī / yì ／yí)下這(zhè)次實踐的(de)目标。一(yī / yì ／yí)般來(lái)說(shuō)，想要(yào / yāo)構建網站的(de)人(rén)可分爲(wéi / wèi)兩大(dà)類：

改造現有的(de)網站，使其可以(yǐ)通過移動設備訪問；
從頭開始構建全新的(de)移動網站。

這(zhè)兩種目标是(shì)截然不(bù)同的(de)，所以(yǐ)相應的(de)技術方法也(yě)不(bù)同。前者的(de)目标可以(yǐ)歸結爲(wéi / wèi)：構建一(yī / yì ／yí)個(gè)無縫縮放的(de)網站。這(zhè)樣的(de)網站可以(yǐ)在(zài)不(bù)同尺寸的(de)屏幕上(shàng)正常顯示，而(ér)網站原有的(de)結構、導航等則保持不(bù)變；後者的(de)目标是(shì)構建一(yī / yì ／yí)個(gè)全新的(de)移動網站，以(yǐ)滿足移動用戶的(de)需求（無論用戶是(shì)否處于(yú)運動狀态），這(zhè)需要(yào / yāo)不(bù)同的(de)視圖設置和(hé / huò)交互設計。

爲(wéi / wèi)了(le／liǎo)區分現有的(de)不(bù)同技術，本文使用了(le／liǎo)術語：“無縫縮放”和(hé / huò)“内容自适應”。前者的(de)意思是(shì)當現有的(de)網站面向不(bù)同分辨率的(de)屏幕時(shí)具有更大(dà)的(de)靈活性和(hé / huò)适應性；後者的(de)意思是(shì)爲(wéi / wèi)移動用戶量身定做。

内容自适應技術的(de)演變

21世紀的(de)頭 10 年裏，移動 Web 和(hé / huò)桌面 Web 之(zhī)間的(de)區别還是(shì)很明顯的(de)。當時(shí)隻有一(yī / yì ／yí)種技術可以(yǐ)實現不(bù)同設備之(zhī)間的(de)内容适應——即在(zài)服務器端進行内容适應。這(zhè)就(jiù)意味着服務器要(yào / yāo)對設備進行識别以(yǐ)切換内容保證其正确顯示。

實際上(shàng)，服務器端的(de)内容适應技術很重要(yào / yāo)。如果沒有此技術，Web 上(shàng)的(de)内容将無法在(zài)設備上(shàng)正确顯示。然而(ér)，在(zài)近 5 年情況變得更加複雜了(le／liǎo)。各種手機、平闆電腦的(de)出(chū)現使得移動浏覽器與桌面浏覽器之(zhī)間的(de)功能差異越來(lái)越小了(le／liǎo)。即使是(shì)最普通的(de)功能手機也(yě)内嵌了(le／liǎo)功能豐富的(de)浏覽器。這(zhè)就(jiù)導緻了(le／liǎo)三種結果：

移動設備和(hé / huò)桌面設備之(zhī)間将不(bù)再有明顯區别。
既然這(zhè)麽多的(de)設備都具有了(le／liǎo)功能強大(dà)且支持 JavaScript 的(de)浏覽器，也(yě)就(jiù)有越來(lái)越多的(de)新技術爲(wéi / wèi)這(zhè)些新設備提供内容适應服務。
有些人(rén)質疑内容适應技術的(de)必要(yào / yāo)性，理由是(shì)智能手機幾乎可以(yǐ)顯示所有網站的(de)内容。

本文旨在(zài)介紹諸多内容自适應技術，說(shuō)明各技術的(de)優缺點，以(yǐ)供參考。

下表列出(chū)了(le／liǎo)當今的(de)主流技術：

此表可能存在(zài)争議，因爲(wéi / wèi)，爲(wéi / wèi)了(le／liǎo)簡潔起見，一(yī / yì ／yí)些複雜的(de)及細微的(de)特征在(zài)表中沒有表現出(chū)來(lái)。

1、響應式設計

響應式設計這(zhè)個(gè)術語之(zhī)所以(yǐ)如此流行是(shì)因爲(wéi / wèi) Ethan Marcotte 于(yú) 2010 年 5 月份在(zài)超具影響力的(de)網站A List Apart 上(shàng)發表的(de)一(yī / yì ／yí)篇文章及其 2011 年發表的(de)書籍《Responsive Web Design》中都極力推廣該術語。Ethan 介紹了(le／liǎo)一(yī / yì ／yí)系列的(de)設計原則和(hé / huò)技術，能夠保證網站在(zài)任何情況下都可以(yǐ)在(zài)移動設備上(shàng)運行。實際上(shàng)，流暢的(de)設計一(yī / yì ／yí)直是(shì)資深 Web 開發人(rén)員的(de)追求目标，但是(shì) Ethan 所介紹的(de)是(shì)一(yī / yì ／yí)套具體的(de)技術，大(dà)多數 Web 開發者都可以(yǐ)在(zài)不(bù)使用其它新工具的(de)情況下輕松實現這(zhè)些技術，這(zhè)就(jiù)是(shì)該解決方案的(de)誘人(rén)之(zhī)處。

上(shàng)述的(de)響應式設計是(shì)基于(yú)以(yǐ)下三種技術的(de)：

流體網格——确保底層頁面的(de)網格可以(yǐ)很好地(dì / de)适應于(yú)各種尺寸的(de)屏幕。
響應式圖像——圖像在(zài)可變網格中可以(yǐ)正确顯示。
CSS media queries——所使用的(de) CSS 樣式可适用于(yú)不(bù)同分辨率、不(bù)同類型的(de)設備。

這(zhè)些技術使得一(yī / yì ／yí)個(gè) HTML 頁面可以(yǐ)運行于(yú)不(bù)同設備，達到(dào)我們所期望的(de)結果：采用這(zhè)種技術所構建的(de)網站可以(yǐ)很好地(dì / de)支持舊版本的(de)浏覽器，可以(yǐ)在(zài)所有桌面浏覽器及大(dà)多數智能手機上(shàng)運行。Media Queries 上(shàng)有很多這(zhè)樣的(de)例子(zǐ)。(注：Ethan 那本書的(de)發行者 Jeffrey Zeldman 後來(lái)指出(chū)，響應式設計不(bù)應僅僅局限于(yú) Ethan 所介紹的(de)技術，而(ér)應該包含所有可以(yǐ)實現這(zhè)一(yī / yì ／yí)目标的(de)方法。)

響應式設計這(zhè)一(yī / yì ／yí)術語隻是(shì)該技術的(de)标簽。該技術包含了(le／liǎo)一(yī / yì ／yí)整套的(de)設計原則，以(yǐ)實現無縫縮放功能。可是(shì)，響應式設計容易與移動 Web 相混淆，導緻開發者産生錯覺，他(tā)們會以(yǐ)爲(wéi / wèi)隻要(yào / yāo)使用了(le／liǎo)響應式設計的(de)網站就(jiù)是(shì)對移動用戶友好的(de)網站，就(jiù)完成了(le／liǎo)移動網站的(de)開發。當然了(le／liǎo)，做一(yī / yì ／yí)個(gè)反應速度快的(de)網站是(shì)好事，但缺少一(yī / yì ／yí)個(gè)充分發揮移動設備本身功能的(de)解決方案。

說(shuō)實話，Ethan 并不(bù)提倡用這(zhè)種方法來(lái)構建移動網站，他(tā)有一(yī / yì ／yí)個(gè)很明智的(de)建議：要(yào / yāo)根據具體項目來(lái)選擇合适的(de)方法。他(tā)在(zài)書中指出(chū)：“最重要(yào / yāo)的(de)是(shì)，Web 響應式設計不(bù)是(shì)用來(lái)代替移動網站的(de)。響應式設計隻是(shì)一(yī / yì ／yí)個(gè)設計理念，一(yī / yì ／yí)個(gè)前端的(de)開發策略。既然是(shì)開發策略，這(zhè)就(jiù)意味着要(yào / yāo)根據具體項目來(lái)做出(chū)正确的(de)評估。

作爲(wéi / wèi)一(yī / yì ／yí)種實現移動網站的(de)方法，響應式設計存在(zài)以(yǐ)下三個(gè)問題：

隻可以(yǐ)做到(dào)無縫縮放，而(ér)沒有實現内容自适應。從移動領域的(de)角度來(lái)看，這(zhè)種技術效率低下。（即使圖片在(zài)某移動設備上(shàng)不(bù)能全屏查看或者根本無法顯示，也(yě)需要(yào / yāo)将整個(gè)圖片下載下來(lái)。）
由于(yú)響應式設計理念中，HMTL 代碼是(shì)要(yào / yāo)傳遞到(dào)所有設備中的(de)（無論大(dà)小），這(zhè)就(jiù)使得它不(bù)能很好地(dì / de)支持低端設備。波士頓環球報網站上(shàng)大(dà)肆宣揚：“所謂的(de)響應式設計傑作，在(zài)主流手機（如：Motorola RAZR、Nokia 6100）上(shàng)卻不(bù)能很好地(dì / de)運行，甚至根本無法運行。”
不(bù)能很好地(dì / de)處理實時(shí)數據，所以(yǐ)用戶體驗不(bù)夠好。

響應式設計雖然可以(yǐ)實現無縫縮放，但是(shì)所支持的(de)用例很有限，并不(bù)是(shì)一(yī / yì ／yí)個(gè)很好的(de)移動 Web 解決方案。

2、Mobile-First 響應式設計

自從 Ethan 的(de)文章及著作發表以(yǐ)來(lái)，許多人(rén)指出(chū)，如果将響應式設計反過來(lái)用可能會更合理：如果你設計的(de)網頁風格默認就(jiù)是(shì)對移動用戶友好的(de)，那麽一(yī / yì ／yí)些響應式設計問題也(yě)就(jiù)不(bù)存在(zài)了(le／liǎo)。特别地(dì / de)，避免下載不(bù)必要(yào / yāo)的(de)大(dà)圖片問題就(jiù)可以(yǐ)由該方法來(lái)解決。目前，這(zhè)種技術的(de)最佳實踐是(shì)：首先爲(wéi / wèi)所有設備提供合适的(de)圖片，然後用這(zhè)些圖片來(lái)代替大(dà)圖片。來(lái)自 The Filament Group 的(de) Scott Jehl 已經做到(dào)了(le／liǎo)這(zhè)點。

Mobile-First 設計理念的(de)另一(yī / yì ／yí)個(gè)優點是(shì)：該設計理念可以(yǐ)作爲(wéi / wèi)一(yī / yì ／yí)個(gè)楔子(zǐ)，使得設計人(rén)員找到(dào)了(le／liǎo)一(yī / yì ／yí)個(gè)充分的(de)理由來(lái)清除多年來(lái)在(zài)桌面網站上(shàng)積累下來(lái)的(de)不(bù)必要(yào / yāo)的(de)混亂。因爲(wéi / wèi)按照 Mobile-First 的(de)設計理念，這(zhè)些混亂是(shì)必須要(yào / yāo)被剔除的(de)。

Mobile-First 響應式設計是(shì)對原有技術的(de)重大(dà)革新，但也(yě)存在(zài)以(yǐ)下問題：

隻實現了(le／liǎo)無縫縮放，而(ér)沒有實現内容自适應。
桌面網站需要(yào / yāo)從頭開始重新設計。也(yě)許你認爲(wéi / wèi)這(zhè)反倒是(shì)件好事。

總之(zhī)，如果你的(de)目标是(shì)構建移動網站，Mobile-First 響應式設計是(shì)唯一(yī / yì ／yí)實用的(de)響應式設計理念，因爲(wéi / wèi)從低端設備到(dào)桌面浏覽器都可以(yǐ)使用該方案。

3、漸進增強（PE）

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

PE 的(de)誘人(rén)之(zhī)處是(shì)很明顯的(de)：它可以(yǐ)滿足所有類型的(de)設備（包括低端設備），因爲(wéi / wèi)它是(shì)故障安全的(de)解決方案；高端設備的(de)功能又不(bù)會因爲(wéi / wèi)這(zhè)個(gè)“最低限度共同點”而(ér)受到(dào)限制。剛剛發布的(de) jQuery Mobile 庫就(jiù)用到(dào)了(le／liǎo) PE 解決方案，實際上(shàng)，PE 将内容适應邏輯從服務器端移到(dào)了(le／liǎo)客戶端。這(zhè)種方案存在(zài)兩個(gè)問題：

該技術的(de)核心“漸進增強”的(de)執行是(shì)需要(yào / yāo)一(yī / yì ／yí)定時(shí)間的(de)，所需時(shí)間的(de)長短主要(yào / yāo)取決于(yú)設備的(de)硬件性能，當然也(yě)可能與網速有關。舉個(gè)例子(zǐ)，某些型号的(de)黑莓手機理論上(shàng)是(shì)支持 JavaScript 的(de)，但實際上(shàng)運行速度太慢以(yǐ)至于(yú)沒有什麽實際用途。
和(hé / huò)以(yǐ)往的(de)技術一(yī / yì ／yí)樣，該技術中多個(gè)用例共用同一(yī / yì ／yí)個(gè)基本的(de) HTML 文件，這(zhè)在(zài)功能上(shàng)似乎很受限。

實際上(shàng)，PE 技術的(de)最佳應用是(shì)消除移動設備之(zhī)間的(de)差異，而(ér)不(bù)是(shì)作爲(wéi / wèi)一(yī / yì ／yí)個(gè)綜合的(de)内容适應解決方案。

4、服務器端内容适應技術

服務器端内容适應技術早在(zài) 12 年前移動 Web 剛剛出(chū)現時(shí)就(jiù)開始使用了(le／liǎo)。該技術依賴于(yú)設備檢測庫或依賴于(yú)安裝在(zài) Web 服務器（或遠程 Web 服務）上(shàng)的(de)數據庫，檢測訪問網站的(de)設備并返回設備的(de)性能信息。服務器端可以(yǐ)根據這(zhè)些信息對頁面進行微調，使之(zhī)很好的(de)适應設備的(de)性能。由于(yú)服務端内容适應技術中包含了(le／liǎo)設備檢測技術，所以(yǐ)有時(shí)也(yě)被稱爲(wéi / wèi)“浏覽器嗅探”。盡管也(yě)有不(bù)少反對者，但浏覽器嗅探确實很穩定很精準，據統計，該解決方案檢測設備的(de)精準度達到(dào)了(le／liǎo) 99.5% 以(yǐ)上(shàng)。

該技術的(de)有效性不(bù)言自明：它仍然是(shì)迄今爲(wéi / wèi)止最常用的(de)内容适應技術，幾乎所有重視移動用戶體驗的(de)知名互聯網公司都在(zài)使用該技術，包括 Google、Facebook、Amazon、Youtube、Ebay 以(yǐ)及 Yahoo。你很難找到(dào)一(yī / yì ／yí)個(gè)沒使用服務器端内容适應技術而(ér)又取得成功的(de)移動網站。

然而(ér)，服務器端内容适應技術也(yě)不(bù)是(shì)沒有缺點。其缺點主要(yào / yāo)有以(yǐ)下兩點：

所用到(dào)的(de)設備檢測技術需要(yào / yāo) Web 開發者不(bù)斷進行更新，并且大(dà)多數設備檢測技術都是(shì)商業化的(de)。
不(bù)能很好地(dì / de)使用浏覽器的(de)實時(shí)數據（例如，GPS 定位或者設備當前的(de)方向）以(yǐ)幫助 Web 開發者更好地(dì / de)服務于(yú)用戶。

目前，WURFL 和(hé / huò) DeviceAtlas 是(shì)設備檢測方面的(de)領軍産品，這(zhè)兩款産品都是(shì)商業化的(de)。

5、混合方法

最後要(yào / yāo)介紹的(de)技術是(shì)混合方法，該方法把服務器端内容适應技術與漸進增強技術結合在(zài)了(le／liǎo)一(yī / yì ／yí)起。這(zhè)種技術的(de)工作原理是(shì)，當服務器收到(dào)客戶端的(de)頁面請求時(shí)，服務器端首先向客戶端提交一(yī / yì ／yí)個(gè)基于(yú)服務器端内容适應原則的(de)初始頁面，然後由客戶端的(de) JavaScript 來(lái)捕獲設備的(de)性能信息并返回給服務器端，服務器端根據所捕獲的(de)信息對發向該設備的(de)後續頁面進行微調，使頁面更好地(dì / de)适應該設備。

該技術首先是(shì)由 Bryan Rieger 和(hé / huò) Stephanie Rieger 發布的(de)，他(tā)們在(zài) yiibu.com 上(shàng)很詳細地(dì / de)記錄了(le／liǎo)他(tā)們探索各種内容适應技術的(de)曲折而(ér)漫長的(de)道(dào)路。有趣的(de)是(shì)，他(tā)們在(zài)嘗試該技術之(zhī)前幾乎已經嘗試過了(le／liǎo)所有上(shàng)文已經介紹過的(de)技術。

他(tā)們使用了(le／liǎo)設備檢測技術和(hé / huò)浏覽器屬性“隐性數據庫”，還使用了(le／liǎo) modernizr-like JavaScript 腳本。在(zài)此不(bù)詳述細節，建議大(dà)家看看他(tā)們的(de)介紹：“适應：爲(wéi / wèi)什麽響應式設計始于(yú)服務器端？”

這(zhè)種混合方法對用戶端和(hé / huò)服務器端來(lái)說(shuō)都是(shì)最合适的(de)方式——既可以(yǐ)利用高速的(de)服務器端内容适應，又可以(yǐ)利用來(lái)源于(yú)設備自身的(de)屬性來(lái)調整頁面。用戶可以(yǐ)得到(dào)一(yī / yì ／yí)個(gè)初始的(de)适合當前設備的(de)頁面，又不(bù)會有什麽性能開銷，并且後續頁面會根據此頁面自動進行調整。但是(shì)，這(zhè)種方法也(yě)存在(zài)兩個(gè)缺點：

實現起來(lái)相對複雜，這(zhè)點 Riegers 兩位也(yě)欣然承認。複雜性源于(yú)以(yǐ)下兩個(gè)因素：複雜性源于(yú)以(yǐ)下兩個(gè)因素：1）需要(yào / yāo)建立一(yī / yì ／yí)個(gè)數據庫以(yǐ)保存浏覽器的(de)屬性；2）需要(yào / yāo)寫 JavaScript 代碼，以(yǐ)實現從浏覽器中提取屬性并存入數據庫。
首次訪問服務器時(shí)，在(zài)用戶得到(dào)有用信息之(zhī)前，需要(yào / yāo)一(yī / yì ／yí)個(gè)從浏覽器到(dào)服務器之(zhī)間的(de)往返時(shí)間的(de)延遲開銷。在(zài)後續請求中可以(yǐ)使用 cookies 來(lái)消除該延遲。

總結：

所有可用的(de)技術都介紹過了(le／liǎo)，接下來(lái)你會如何選擇呢？當然，要(yào / yāo)視具體情況而(ér)定。筆者認爲(wéi / wèi)，任何以(yǐ)“單個(gè) HTML 文檔來(lái)滿足所有設備”爲(wéi / wèi)前提的(de)技術，本是(shì)就(jiù)是(shì)有缺陷的(de)，就(jiù)如同：大(dà)多數的(de)電視内容不(bù)是(shì)多次播放的(de)電影，大(dà)多數的(de)網站也(yě)不(bù)是(shì)紙質報紙的(de)完美複制品。用戶對某些類型的(de)網站（例如博客）的(de)交互需求是(shì)有限的(de)，這(zhè)樣單一(yī / yì ／yí)的(de)一(yī / yì ／yí)套交互方案是(shì)可以(yǐ)同時(shí)滿足桌面與移動用戶的(de)。但是(shì)，在(zài)更一(yī / yì ／yí)般的(de)情況下，如果也(yě)讓桌面與移動用戶共用同一(yī / yì ／yí)套方案，最好的(de)結果是(shì)：功能嚴重受限；最壞的(de)結果是(shì)：根本無法運行。

正如一(yī / yì ／yí)位 CTO 所說(shuō)：“客戶端功能檢測如何将一(yī / yì ／yí)個(gè)航空公司的(de)介紹性網站轉變成爲(wéi / wèi)移動電子(zǐ)登機服務呢？漸進增強理念是(shì)以(yǐ)‘所有用戶的(de)需求都相同，隻是(shì)界面布局不(bù)同’的(de)假設爲(wéi / wèi)前提的(de)。”

如果航空公司所構建的(de)移動網站和(hé / huò)桌面網站采用相同的(de)基本模闆，這(zhè)樣真的(de)可行嗎？如果你真的(de)想提供一(yī / yì ／yí)流的(de)移動用戶體驗，那麽響應式設計和(hé / huò)漸進增強将得不(bù)到(dào)很好的(de)體現。你在(zài) Alexa 網站上(shàng)快速看一(yī / yì ／yí)眼就(jiù)會知道(dào)，想要(yào / yāo)提供優質的(de)移動用戶體驗需要(yào / yāo)對 HTML 進行量身定做，而(ér)不(bù)是(shì)簡單地(dì / de)調整像素和(hé / huò) div 元素。

總之(zhī)，如果你的(de)網站隻是(shì)運行在(zài)一(yī / yì ／yí)些高端移動設備上(shàng)，并且你不(bù)會特意去照顧某些移動 Web 用戶，那麽你可以(yǐ)采用響應式設計方案，或者 Mobile-First 響應式設計方案。如果你的(de)網站元素不(bù)太複雜，那麽這(zhè)兩種方案會很奏效。

如果你想提供一(yī / yì ／yí)個(gè)全新的(de)移動用戶體驗設計或者你想滿足所有的(de)移動設備，那麽你隻能使用服務器端内容适應方案或混合方法。這(zhè)也(yě)是(shì)所有知名互聯網公司都采用這(zhè)種方案的(de)原因。

上(shàng)述觀點都是(shì)基于(yú)對新媒體的(de)信仰：移動 Web 是(shì)一(yī / yì ／yí)種新媒體，絕不(bù)是(shì)舊媒體的(de)縮略版本；是(shì)一(yī / yì ／yí)種功能強大(dà)的(de)媒體，而(ér)不(bù)是(shì)功能弱小的(de)媒體；是(shì)一(yī / yì ／yí)種全新的(de) Web，而(ér)不(bù)是(shì)合成的(de)雜牌 Web。隻有這(zhè)樣看待和(hé / huò)使用該新媒體，它才能得到(dào)最合理、最成功的(de)應用。

參考文章：

來(lái)源：cnblogs