五個非常重要的移動Web内容适應設計理念

2021-08-01

英文原文：Mobile web content adaptation techniques

譯者：趙建光

如果你要構建移動網站，那麼(me)本文可以幫你選擇合适的技術方案。本文并沒(méi)有具體描述如何去開(kāi)發(fā)，隻是介紹應該如何選擇正确的方法。在開(kāi)始之前我們有必要明确一下這(zhè)次實踐的目标。一般來說(shuō)，想要構建網站的人可分爲兩(liǎng)大類：

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

這(zhè)兩(liǎng)種(zhǒng)目标是截然不同的，所以相應的技術方法也不同。前者的目标可以歸結爲：構建一個無縫縮放的網站。這(zhè)樣的網站可以在不同尺寸的屏幕上正常顯示，而網站原有的結構、導航等則保持不變；後(hòu)者的目标是構建一個全新的移動網站，以滿足移動用戶的需求（無論用戶是否處于運動狀态），這(zhè)需要不同的視圖設置和交互設計。

爲了區分現有的不同技術，本文使用了術語：“無縫縮放”和“内容自适應”。前者的意思是當現有的網站面(miàn)向(xiàng)不同分辨率的屏幕時(shí)具有更大的靈活性和适應性；後(hòu)者的意思是爲移動用戶量身定做。

内容自适應技術的演變

21世紀的頭 10 年裡(lǐ)，移動 Web 和桌面(miàn) Web 之間的區别還(hái)是很明顯的。當時(shí)隻有一種(zhǒng)技術可以實現不同設備之間的内容适應——即在服務器端進(jìn)行内容适應。這(zhè)就(jiù)意味著(zhe)服務器要對(duì)設備進(jìn)行識别以切換内容保證其正确顯示。

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

移動設備和桌面(miàn)設備之間將(jiāng)不再有明顯區别。
既然這(zhè)麼(me)多的設備都(dōu)具有了功能(néng)強大且支持 JavaScript 的浏覽器，也就(jiù)有越來越多的新技術爲這(zhè)些新設備提供内容适應服務。
有些人質疑内容适應技術的必要性，理由是智能(néng)手機幾乎可以顯示所有網站的内容。

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

下表列出了當今的主流技術：

此表可能(néng)存在争議，因爲，爲了簡潔起(qǐ)見，一些複雜的及細微的特征在表中沒(méi)有表現出來。

1、響應式設計

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

上述的響應式設計是基于以下三種(zhǒng)技術的：

流體網格——确保底層頁面(miàn)的網格可以很好(hǎo)地适應于各種(zhǒng)尺寸的屏幕。
響應式圖像——圖像在可變網格中可以正确顯示。
CSS media queries——所使用的 CSS 樣式可适用于不同分辨率、不同類型的設備。

這(zhè)些技術使得一個 HTML 頁面(miàn)可以運行于不同設備，達到我們所期望的結果：采用這(zhè)種(zhǒng)技術所構建的網站可以很好(hǎo)地支持舊版本的浏覽器，可以在所有桌面(miàn)浏覽器及大多數智能(néng)手機上運行。Media Queries 上有很多這(zhè)樣的例子。(注：Ethan 那本書的發(fā)行者 Jeffrey Zeldman 後(hòu)來指出，響應式設計不應僅僅局限于 Ethan 所介紹的技術，而應該包含所有可以實現這(zhè)一目标的方法。)

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

說(shuō)實話，Ethan 并不提倡用這(zhè)種(zhǒng)方法來構建移動網站，他有一個很明智的建議：要根據具體項目來選擇合适的方法。他在書中指出：“最重要的是，Web 響應式設計不是用來代替移動網站的。響應式設計隻是一個設計理念，一個前端的開(kāi)發(fā)策略。既然是開(kāi)發(fā)策略，這(zhè)就(jiù)意味著(zhe)要根據具體項目來做出正确的評估。

作爲一種(zhǒng)實現移動網站的方法，響應式設計存在以下三個問題：

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

響應式設計雖然可以實現無縫縮放，但是所支持的用例很有限，并不是一個很好(hǎo)的移動 Web 解決方案。

2、Mobile-First 響應式設計

自從 Ethan 的文章及著作發(fā)表以來，許多人指出，如果將(jiāng)響應式設計反過(guò)來用可能(néng)會(huì)更合理：如果你設計的網頁風格默認就(jiù)是對(duì)移動用戶友好(hǎo)的，那麼(me)一些響應式設計問題也就(jiù)不存在了。特别地，避免下載不必要的大圖片問題就(jiù)可以由該方法來解決。目前，這(zhè)種(zhǒng)技術的最佳實踐是：首先爲所有設備提供合适的圖片，然後(hòu)用這(zhè)些圖片來代替大圖片。來自 The Filament Group 的 Scott Jehl 已經(jīng)做到了這(zhè)點。

Mobile-First 設計理念的另一個優點是：該設計理念可以作爲一個楔子，使得設計人員找到了一個充分的理由來清除多年來在桌面(miàn)網站上積累下來的不必要的混亂。因爲按照 Mobile-First 的設計理念，這(zhè)些混亂是必須要被剔除的。

Mobile-First 響應式設計是對(duì)原有技術的重大革新，但也存在以下問題：

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

總之，如果你的目标是構建移動網站，Mobile-First 響應式設計是唯一實用的響應式設計理念，因爲從低端設備到桌面(miàn)浏覽器都(dōu)可以使用該方案。

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

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

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

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

實際上，PE 技術的最佳應用是消除移動設備之間的差異，而不是作爲一個綜合的内容适應解決方案。

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

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

該技術的有效性不言自明：它仍然是迄今爲止最常用的内容适應技術，幾乎所有重視移動用戶體驗的知名互聯網公司都(dōu)在使用該技術，包括 Google、Facebook、Amazon、Youtube、Ebay 以及 Yahoo。你很難找到一個沒(méi)使用服務器端内容适應技術而又取得成(chéng)功的移動網站。

然而，服務器端内容适應技術也不是沒(méi)有缺點。其缺點主要有以下兩(liǎng)點：

所用到的設備檢測技術需要 Web 開(kāi)發(fā)者不斷進(jìn)行更新，并且大多數設備檢測技術都(dōu)是商業化的。
不能(néng)很好(hǎo)地使用浏覽器的實時(shí)數據（例如，GPS 定位或者設備當前的方向(xiàng)）以幫助 Web 開(kāi)發(fā)者更好(hǎo)地服務于用戶。

目前，WURFL 和 DeviceAtlas 是設備檢測方面(miàn)的領軍産品，這(zhè)兩(liǎng)款産品都(dōu)是商業化的。

5、混合方法

最後(hòu)要介紹的技術是混合方法，該方法把服務器端内容适應技術與漸進(jìn)增強技術結合在了一起(qǐ)。這(zhè)種(zhǒng)技術的工作原理是，當服務器收到客戶端的頁面(miàn)請求時(shí)，服務器端首先向(xiàng)客戶端提交一個基于服務器端内容适應原則的初始頁面(miàn)，然後(hòu)由客戶端的 JavaScript 來捕獲設備的性能(néng)信息并返回給服務器端，服務器端根據所捕獲的信息對(duì)發(fā)向(xiàng)該設備的後(hòu)續頁面(miàn)進(jìn)行微調，使頁面(miàn)更好(hǎo)地适應該設備。

該技術首先是由 Bryan Rieger 和 Stephanie Rieger 發(fā)布的，他們在 yiibu.com 上很詳細地記錄了他們探索各種(zhǒng)内容适應技術的曲折而漫長(cháng)的道(dào)路。有趣的是，他們在嘗試該技術之前幾乎已經(jīng)嘗試過(guò)了所有上文已經(jīng)介紹過(guò)的技術。

他們使用了設備檢測技術和浏覽器屬性“隐性數據庫”，還(hái)使用了 modernizr-like JavaScript 腳本。在此不詳述細節，建議大家看看他們的介紹：“适應：爲什麼(me)響應式設計始于服務器端？”

這(zhè)種(zhǒng)混合方法對(duì)用戶端和服務器端來說(shuō)都(dōu)是最合适的方式——既可以利用高速的服務器端内容适應，又可以利用來源于設備自身的屬性來調整頁面(miàn)。用戶可以得到一個初始的适合當前設備的頁面(miàn)，又不會(huì)有什麼(me)性能(néng)開(kāi)銷，并且後(hòu)續頁面(miàn)會(huì)根據此頁面(miàn)自動進(jìn)行調整。但是，這(zhè)種(zhǒng)方法也存在兩(liǎng)個缺點：

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

總結：

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

正如一位 CTO 所說(shuō)：“客戶端功能(néng)檢測如何將(jiāng)一個航空公司的介紹性網站轉變成(chéng)爲移動電子登機服務呢？漸進(jìn)增強理念是以‘所有用戶的需求都(dōu)相同，隻是界面(miàn)布局不同’的假設爲前提的。”

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

總之，如果你的網站隻是運行在一些高端移動設備上，并且你不會(huì)特意去照顧某些移動 Web 用戶，那麼(me)你可以采用響應式設計方案，或者 Mobile-First 響應式設計方案。如果你的網站元素不太複雜，那麼(me)這(zhè)兩(liǎng)種(zhǒng)方案會(huì)很奏效。

如果你想提供一個全新的移動用戶體驗設計或者你想滿足所有的移動設備，那麼(me)你隻能(néng)使用服務器端内容适應方案或混合方法。這(zhè)也是所有知名互聯網公司都(dōu)采用這(zhè)種(zhǒng)方案的原因。

上述觀點都(dōu)是基于對(duì)新媒體的信仰：移動 Web 是一種(zhǒng)新媒體，絕不是舊媒體的縮略版本；是一種(zhǒng)功能(néng)強大的媒體，而不是功能(néng)弱小的媒體；是一種(zhǒng)全新的 Web，而不是合成(chéng)的雜牌 Web。隻有這(zhè)樣看待和使用該新媒體，它才能(néng)得到最合理、最成(chéng)功的應用。

參考文章：

來源：cnblogs