跨屏站點的最佳實踐：Web Fundamentals

   傳統新聞媒體在面臨社交媒體的沖擊的同時，也遇到多屏、跨屏傳播的挑戰。這種挑戰從某種意義上來說，也是擴大傳播范圍、增強傳播效果的機遇。這種機遇就是同一篇新聞內容在互聯網技術的幫助下，既可以出現在智能手機上，也能夠在平板電腦上，還可以在普通PC，甚至是智能電視上看到。

廣義上來說，所謂“跨屏”，並不是像字面看起來的那樣僅僅是簡單把圖像轉移到另一個屏幕上，而是更大的一個范疇：內容轉移，包括圖像、資料、習慣使用的軟件等等，在很多特定情況下甚至不局限於單純的數據遷移層面，而是類似設備間無縫轉接的“同步”效果。比如，坐在車上用手機看新聞，突然看到一條有意思或者較長的內容，想標記下來一會兒放到桌面電腦上細細品味。

實現這樣的願景，需要新聞媒體在制作內容時要充分考慮到多屏、跨屏的傳播、閱讀需求。隨著網絡技術的不斷發展，除桌面計算機可以接入互聯網之外，平板電腦、智能手機、智能電視等其他設備均可訪問互聯網。在多設備時代，構建多屏體驗是一種必然的趨勢。在早前的一篇內容中，我們介紹過針對跨屏和移動化的趨勢，雲適配（-R/yunshipei）提供了一種解決方案。今天我們介紹另外一種實現多屏、跨屏的技術，來自谷歌的現代化網頁應用設計與開發指導手冊和最佳實踐（Web Fundamentals，-R/d2SY ），旨在幫助開發者做出體驗更好的跨設備的站點。

圖 谷歌的Web Fundamentals

    Web Fundamentals是一套針對目前Web開發的最佳實踐和指導原則。在進行多屏、跨屏的網頁應用設計之前，谷歌的開發小組和AnswerLab實驗室開展了關於網頁應用設計的研究（-R/Y2Sk ），試圖回答什麼才是好的網頁設計，尤其是對移動應用來說。這些研究發現已融入到Web Fundamentals的設計實踐中。除了指導與建議外，Web Fundamentals還包括以下方面的HTML、CSS 和 JavaScript 的樣例代碼（2）。

1.工具：選擇一個編輯器，建立開發工具，建立一個構建流程，使用Chrome DevTools調試，在設備上、模擬器上或者雲端進行調試。

2.內容布局：谷歌建議響應式的Web站點設計使用CSS3 Media Queries，不同的屏幕尺寸具有不同的CSS規則，響應式的Web設計模式--Fluid Layout、 Column Drop、Layout Shifte等，再加上一些導航和行為模式，如App、Tab頁、底部工具條、Navigation Drawer。

3.表單和用戶輸入：選擇適用於移動設備的表單、實時表單驗証、處理觸控和實現自定義的手勢。

4.圖片/音頻/視頻：關於使用< img>標簽、CSS背景、 SVG來處理圖標、圖像的性能問題、視頻處理、老平台兼容問題、可訪問性問題等等的建議。

5.性能優化：優化了關鍵的渲染路徑，使用了PageSpeed規則，通過消除不必要的下載內容優化了內容性能，優化了文本資源編碼和圖像，使用HTTP緩存等等。

6.設備傳感器和功能：關於訪問用戶位置、朝向和移動、打電話的建議。

圖 外觀、多屏布局、用戶輸入、音視頻等組件列表

除了以上手冊內容外，谷歌還提供了Web Starter Kit (WSK) ——一套樣例代碼和工具，用於創建自適應多種設備的網站。Web Starter Kit包括創建移動HTML頁、響應式布局的代碼，一個可視化組件風格指南和可選的gulp.js構建工具。

                                                                                                          (研究院 劉振興整理）