萬維網(wǎng)不斷發(fā)展和演變，至今已經(jīng)有 27 年歷史。我們?nèi)绾握宫F(xiàn)內(nèi)容和給內(nèi)容添加樣式在萬維網(wǎng)發(fā)展的不同階段有不同的形式，最近新出現(xiàn)的形式是響應(yīng)式網(wǎng)頁 —— 一個(gè)網(wǎng)頁能夠適配多個(gè)瀏覽器和不同屏幕大小的設(shè)備。當(dāng)一個(gè)網(wǎng)站涉及到越來越多的“物聯(lián)網(wǎng)”（IoT）設(shè)備諸如樹莓派、智能手表、語音私人助理以及其他許多 —— 響應(yīng)式網(wǎng)頁的潛力面臨挑戰(zhàn)。

IoT 意味著更多五花八門的設(shè)備從網(wǎng)頁加載內(nèi)容。如果我們想要避免早期的移動(dòng)和 PC 桌面戰(zhàn)爭的歷史重演，我們就需要確保在這些新設(shè)備下，網(wǎng)頁仍然能夠像使用其他常用設(shè)備那樣可訪問和可用。我們最不愿意見到的事情是不得不為 IoT 設(shè)計(jì)一個(gè)版本的網(wǎng)頁，然后為移動(dòng)和 PC Web 設(shè)計(jì)另外一個(gè)版本。

許多開發(fā)者不太意識到潛在的眾多設(shè)備在未來很可能嘗試展現(xiàn)網(wǎng)頁內(nèi)容給用戶。

一些設(shè)備例如配有 2.4 英寸或者更大一些的微型顯示屏的樹莓派能使用 Wi-Fi、以太網(wǎng)甚至 3G/4G 網(wǎng)絡(luò)，使得它很有可能用來展現(xiàn)網(wǎng)頁內(nèi)容。這個(gè)內(nèi)容可能是來自萬維網(wǎng)的網(wǎng)站或者本地網(wǎng)頁例如嵌入式設(shè)備的說明書、基于網(wǎng)頁的設(shè)備控制頁面以及以網(wǎng)頁方式呈現(xiàn)的后臺(tái)系統(tǒng)儀表盤。

智能手表擁有更小的顯示屏，與傳統(tǒng)的顯示屏在可顯示顏色范圍和屏幕分辨率上有明顯的區(qū)別。雖然 Apple Watch 還沒有內(nèi)置 Web 瀏覽器，Android 上有一個(gè) Appfour 開發(fā)的 Android Wear 版的 Web 瀏覽器 ，而很有可能隨著時(shí)間的推移，更多智能手表的 Web 瀏覽器將問世（假設(shè)有人某天突然領(lǐng)悟了如何為手表設(shè)計(jì)一款易于使用的 Web 瀏覽器！）。至少，如果 Web 真正能在任何設(shè)備上做到適配和可用，我們就能為（大量手表瀏覽器問世的）這一天做好準(zhǔn)備。如果在將來，有人在他的智能手表上讀 email，當(dāng)他點(diǎn)擊郵件里的鏈接，會(huì)發(fā)生什么？一個(gè)簡單的 Web 瀏覽器出現(xiàn)在一個(gè)強(qiáng)大的智能手表上的那一天不會(huì)太遙遠(yuǎn)。

在計(jì)算機(jī)領(lǐng)域的一個(gè)新的趨勢是智能語音服務(wù)，例如 Apple 的 Siri、Amazon Echo 的 Alexa、Google Now 以及 Microsoft 的 Cortana。這些助理在家居生活中可以起到的作用包括控制開關(guān)燈、設(shè)置鬧鐘、調(diào)節(jié)空調(diào)溫度等等。這些服務(wù)響應(yīng)語音控制，對提問進(jìn)行在線數(shù)據(jù)檢索 —— 通常這涉及到匹配每個(gè)公司的數(shù)據(jù)庫信息來找到詳細(xì)答案，而這些答案數(shù)據(jù)本身來自于用戶自身對這些服務(wù)的使用。對于這一有趣的領(lǐng)域，我之前在 SitePoint 這里寫過如何上手建立你自己的簡單的人工智能助手的內(nèi)容，其中一部分在“Five Simple Ways to Build Artificial Intelligence in 2016 以及一系列文章關(guān)于 “How to Build Your Own AI Assistant Using Api.ai”。

隨著時(shí)間的推移，隨著人工智能和機(jī)器學(xué)習(xí)的改進(jìn)，這些智能助理可能會(huì)在網(wǎng)頁上尋找信息，將其中的一些內(nèi)容反饋給我們。

為了讓這成為可能，網(wǎng)頁需要保持可訪問性，讓機(jī)器人可讀取內(nèi)容，而不僅僅是將它視覺上展現(xiàn)出來。理想而言，網(wǎng)頁本該已經(jīng)被結(jié)構(gòu)化，以適合屏幕閱讀器閱讀，然而采用可訪問的標(biāo)簽常常是事后才有的想法。私人助理 AI 服務(wù)的出現(xiàn)，可能有助于改變這一現(xiàn)狀。

物聯(lián)網(wǎng)時(shí)代未來的計(jì)算機(jī)顯示，能夠包含一系列新的和非常神奇的可能性。想想一些設(shè)備例如智能鏡子、智能窗戶，智能汽車儀表盤 —— 這些變化將在我們的生活中隨處發(fā)生，但是 Web 在這些新設(shè)備上展現(xiàn)的效果如何？一系列新的設(shè)計(jì)決策將產(chǎn)生 —— 在鏡子/窗戶上顯示內(nèi)容，你可能需要有更多的顏色對比度。開發(fā)者開發(fā)鏡子/窗戶的顯示內(nèi)容是否需要考慮限制使用的顏色范圍？未來將迎來全新的（和令人興奮）的世界。

梅賽德斯·奔馳的儀表盤原型 （圖片來源： Mercedes Benz）

讓我們的 CSS 和標(biāo)記語言適用于未來

如果我們想擁有一個(gè)與新技術(shù)很好地相結(jié)合的 Web 未來，開發(fā)者需要密切關(guān)注幾個(gè)關(guān)鍵領(lǐng)域。

網(wǎng)頁需要適配到微型顯示器，在它之上保持相對可讀。CSS將是適配非常小的顯示分辨率的關(guān)鍵。CSS 是否能像處理移動(dòng)網(wǎng)站那樣處理微型屏幕？我們是否需要?jiǎng)?chuàng)建新的規(guī)則和標(biāo)準(zhǔn)來以更大的字體顯示文本？是否需要新的類似于 Flexbox 的標(biāo)準(zhǔn)來為微型屏幕調(diào)整布局？是否需要新的標(biāo)準(zhǔn)來給微型顯示器的菜單增加樣式？時(shí)間會(huì)說明一切，但是一些選擇了使用 Web 的開發(fā)者可能會(huì)成為這一領(lǐng)域的先驅(qū)，而社區(qū)將如何跟進(jìn)會(huì)是一件非常吸引人的事。

《picture》 元素讓我們能夠指定多張圖片來根據(jù)不同的分辨率和設(shè)備類型決定加載哪一張圖。這一規(guī)范將是確保在相對低功率的設(shè)備和慢速連接設(shè)備，以及非常小的分辨率無法顯示大圖的設(shè)備上平滑運(yùn)行網(wǎng)頁的關(guān)鍵。

一些低功率設(shè)備和個(gè)人輔助設(shè)備將讀取網(wǎng)頁內(nèi)容，但它們可能不需要運(yùn)行 JavaScirpt 或者不能像智能手機(jī)和平板電腦那樣處理 JavaScript。如果你的網(wǎng)站依賴 JavaScript 來拉取數(shù)據(jù)又沒有任何向后兼容，較新的 IoT 設(shè)備很可能不能訪問你的網(wǎng)站。確保網(wǎng)頁在沒有 JavaScript 的時(shí)候能工作依然是一件值得做的事情！

現(xiàn)有技術(shù)已經(jīng)能夠讓 Web 被那些殘障人士無障礙使用，他們一樣可以使用人工智能、私人助理和其他基于語音的技術(shù)。用 WAI-ARIA 和其他無障礙技術(shù)建立網(wǎng)站可能有助于減少未來的返工量，并且在當(dāng)下也對殘障人士非常有幫助。我們涵蓋了這個(gè)話題的一些細(xì)節(jié)內(nèi)容在 “How to Use ARIA Effectively with HTML5” 以及 “Avoiding Redundancy with WAI-ARIA in HTML Pages”。

基于鏡子和窗戶的顯示可能需要從設(shè)計(jì)上提高顏色對比度來確保它在浴室、天空和其他房間等有豐富背景色的場景下能夠清晰顯示。

顯示設(shè)備諸如智能鏡子可能顯示內(nèi)容的方式類似我們今天的操作系統(tǒng)里的 “高對比度模式”，這個(gè)模式反轉(zhuǎn)你的屏幕顏色來提高對比度。為了在這樣不同形式的顯示設(shè)備上顯示內(nèi)容，智能鏡子可能需要采用同樣的技術(shù)。如果你的網(wǎng)頁設(shè)計(jì)能夠在高對比度模式下很好地展現(xiàn)并且讓你的網(wǎng)站主題在這樣的模式下有強(qiáng)烈的色彩對比，那么這就不成為問題了。

我的藝術(shù)家對高對比度 SitePoint 的印象：Max Braun’s concept smart mirror

盡管臺(tái)式機(jī)和智能手表都能處理復(fù)雜的 DOM 結(jié)構(gòu)以及大量嵌套元素和 CSS transiTIons，但是 IoT 設(shè)備和可穿戴設(shè)備在處理復(fù)雜 DOM 時(shí)出問題是完全有可能的。保持一個(gè)簡潔的 DOM 元素結(jié)構(gòu)可能對提升這些新設(shè)備的性能比以往任何時(shí)候都重要。

在智能手機(jī)、桌面平板、智能電視和桌面操作系統(tǒng)上測試你的網(wǎng)站已經(jīng)相當(dāng)困難，因?yàn)槲锫?lián)網(wǎng)和其他技術(shù)不斷進(jìn)步（虛擬和增強(qiáng)現(xiàn)實(shí)也來了！），充分測試每一種設(shè)備變得越來越困難。采用 Web 標(biāo)準(zhǔn)、無障礙標(biāo)準(zhǔn)以及上面提到的思路將有助于讓網(wǎng)頁設(shè)計(jì)盡可能可用。

一定程度的遠(yuǎn)見將成為未來十年內(nèi)專業(yè)的 Web 開發(fā)人員的必要技能，因?yàn)樗麄冃枰诓粚?shí)際接觸每個(gè)具體設(shè)備來進(jìn)行測試的情況下，想象網(wǎng)頁設(shè)計(jì)將如何在一系列設(shè)備上展現(xiàn)。

響應(yīng)式網(wǎng)頁將不會(huì)是物聯(lián)網(wǎng)上唯一的基于 Web 的信息源。響應(yīng)式網(wǎng)頁將會(huì)有一個(gè)同伴，它與響應(yīng)式網(wǎng)頁同樣重要，我們之前討論過它 —— the Omnipresent API（通用的 API）。這將是 server 端等同于 Web 的重要性的技術(shù)，它能夠加快新技術(shù)的集成和適配，觸及 Web 瀏覽器自身達(dá)不到的領(lǐng)域。通用的 API 是指 API 能夠以平臺(tái)無關(guān)的方式，為一個(gè)應(yīng)用或服務(wù)提供功能或數(shù)據(jù)訪問。缺少了通用 API，響應(yīng)式網(wǎng)站就沒有了適應(yīng)性，也導(dǎo)致新技術(shù)的每一部分彼此分離，不能融合到一起。

響應(yīng)式 Web 和通用 API 都存在是至關(guān)重要的。我們的響應(yīng)式 Web 將由可以適用于各種技術(shù)的通用 API 來填充內(nèi)容。沒有 Web 瀏覽器的設(shè)備應(yīng)該有應(yīng)用軟件可以通過通用 API 來填充內(nèi)容。一旦一臺(tái)設(shè)備訪問了 Web 瀏覽器，內(nèi)容也應(yīng)該能夠通過響應(yīng)式 Web 來訪問。要了解通用 API 的更多內(nèi)容，可以讀一讀我的作品： “［The Era of the Omnipresent API］”（https://devdiner.com/opinion/the-era-of-the-omnipresent-api）。

我們前端開發(fā)實(shí)踐者可以不做上面這些改變來適應(yīng)物聯(lián)網(wǎng)和其他技術(shù)演變。然而，我相信如果我們不去改變，Web 技術(shù)將被限制于桌面應(yīng)用和少量移動(dòng)應(yīng)用，正如響應(yīng)式 Web 的真正潛力被移動(dòng) App 的盛行所阻礙。如果 Web 不適應(yīng)，我們可能會(huì)看到應(yīng)用軟件分割為可穿戴 App、IoT App、Alex App 等等，這些 App 成為孤島 —— 而不是分享 Web 的共同生態(tài)圈。