• 推文

 如何打造跨螢幕網站

現今有 90% 的媒體互動都發生在智慧型手機、平板電腦、筆電和電視的多螢幕上；如果您能夠在各種平台和裝置上與使用者交流，與使用者間的關係將會更加緊密。以下提供各種訣竅，讓您迎頭趕上多螢幕時代潮流。
 

您的跨螢幕策略必須符合客戶和業務的需求；您提供的產品/服務、客戶的期望以及能夠在您的網站上達成哪些目的，這些環節都必須完美地搭配。

您也必須瞭解多螢幕使用者在您目前的網站上看到哪些內容，又有哪些需求；只要掌握這些資訊，您就能為自己的跨螢幕策略勾勒出一張嶄新的藍圖。例如，若資料顯示智慧型手機使用者會瀏覽您網站上的特定內容，您可以將這些內容放置在行動網站上的醒目位置；如果您網站某些部分的行動使用者跳出率 (也就是使用者剛到達網頁就迅速離開) 偏高時，您就應該在新版網站中修正這個問題。

以下提供幾個竅門，讓您的網站在充分顯現價值主張的同時，滿足所有跨螢幕使用者的期待：

• 為使用者打造熟悉的環境
  對於習慣使用電腦螢幕的使用者來說，他們會希望其他裝置的螢幕也能提供相同的基本內容和順暢的瀏覽體驗。為了兩全其美，最好的做法是一方面保留使用者熟悉的功能，另一方面打造適合行動裝置和平板電腦的使用環境。
• 全方位考慮使用者的需求
  設身處地想想不同裝置的使用者對網站的需求。以智慧型手機的行動使用者為例，他們可能想在網站上搜尋分店資訊或電話號碼，這些資訊在您的行動網站上容易找到嗎？如果使用者已經在您店裡挑選商品，想要同時上網查看相關評論，這時候，您的網站是不是能夠滿足他的需求？
• 充分發揮行動裝置的強大功能
  您可以跟自己的開發團隊研究，想想該怎麼做，才能透過不同裝置的特有功能彰顯您的價值主張。舉例來說，連鎖電影院可以根據使用者智慧型手機上的 GPS 位置，提供附近電影院的位置資訊和接下來的場次時間表；職業球隊則可以在網站上提供影片上傳功能，讓球迷直接上傳他們用手機錄下的比賽影片。只要您善加規劃，讓行動網站充分發揮行動裝置的功能，一定能獲得客戶的青睞！

您可以透過許多方式來建構適合在各種螢幕上瀏覽的網站；這個階段該考量的重點包括成本、所需時間、可用人力和硬體架構，以及客戶的需求。

無論您選用什麼架構，我們都強烈建議您遵照這個基本原則：將網站集中在同一個網域上 (例如 example.com)。說得更具體一點，如果您的電腦版網站位在 example.com，行動網站就不該在別的網域 (例如a.com/example) 上。

只要您以同一個網域為主，使用者自然而然會將您的品牌和網址劃上等號。我們接下來要根據這個原則，談談如何建立適合透過行動裝置瀏覽的網站，建議的做法有三項：回應式設計、動態放送以及設置行動專用網站。

「回應式網頁設計」(縮寫為 RWD) 是一種相當省事的設計技巧。在這種做法下，所有平台全部使用同一套 HTML 程式碼庫；也就是說，所有的瀏覽裝置都會從同一個網址讀取相同的程式碼，內容則會根據預先定義的中斷點和流體網格自行縮放，配合所用的螢幕大小。

「回應式網頁設計」需要您事先詳細規劃。一開始可能需要投入很高的成本，不過只要針對不同裝置訂出策略，後續維護工作可以省下許多人力。

優點：

• 透過一個網址連到所有內容：讓所有的內容使用同一個網址，方便使用者與您的內容互動、與他人分享以及建立連結，搜尋引擎也更容易找到您的內容並建立索引。
• 呈現完美流暢的使用者體驗：客製化呈現內容，且使行動裝置的功能仍可繼續使用。
• 顯示方向隨心所欲：採用「回應式網頁設計」的網頁，會隨著使用者旋轉裝置的方向而自動改變顯示方式。
• 無需重新導向：縮短載入時間，成效更加卓越。

缺點：

• 必須事先周詳規劃：這種設計會讓網站共用所有 HTML 架構，因此必須事先詳細規劃，才能為不同裝置和使用者族群提供真正專屬且順暢的體驗，並發揮網站最佳效能。

要避免的常見錯誤：

• 資料膨脹：不要讓行動使用者下載原尺寸、只適用於螢幕大且傳輸速度快的裝置的圖片。建議您減少 HTTP 請求的次數、將 CSS 和 JavaScript 縮小、優先載入可見內容，並暫緩載入其他一切內容。

適用對象：

這種做法適合重視網站環境一致、只與單一網站設計團隊合作的公司，且這個設計團隊必須有能力為所有的裝置進行整體規劃 (Starbucks.com、BostonGlobe.com 和 Time.com 等網站都採用這種做法)。 日後如果有新裝置出現，只要順勢擴大「回應式網頁設計」的範圍就好，而且單一網址也
 

這種方法可讓網頁伺服器偵測出訪客使用的裝置類型，並顯示專為該裝置設計的自訂網頁。您可以針對任何裝置 (包括手機、平板電腦和智慧電視等) 設計自訂網頁。

優點：

• 量身打造使用環境：每個使用者都可以查看專門針對其裝置而設計的內容及版型。
• 輕鬆進行變更：可以單獨針對特定螢幕大小調整內容或版面配置，不必更動其他版本。
• 載入速度更快：網站設計團隊可為每種裝置簡化內容，大幅提升載入速度。
• 只需單一網址：「動態放送」與「回應式設計」相同，可讓使用者透過一個網址連到所有內容。

缺點：

• 內容分歧：使用多個自訂網頁就表示有多組相同內容。除非您採用了高階的內容管理系統，否則要隨時更新不同裝置專用的網頁並不容易。

常見錯誤：

• 裝置偵測方法不夠完善：伺服器必須執行指令碼才能辨識所有的可用裝置，這個步驟有助於避免伺服器將行動專用網站傳送給平板電腦使用者之類的問題。您必須請網站管理員確認目錄運作正常，並隨時更新其中內容，以免偵測失敗或出現服務缺口。另一個常見錯誤則是伺服器採用了某個裝置螢幕方向 (通常是縱向)，但使用者事實上可能是以另一個方式 (也就是橫向) 瀏覽網頁。
• 使用體驗不一致：如果您有多個網站，而且這些網站外觀差異相當大，就很容易造成使用者混淆。為每個螢幕大小製作專屬內容固然重要，但不論採用何種格式，品牌的外觀和風格都必須易於辨識。

適用對象：

動態放送這個解決方案需要投入大量資源，因此較適合頻繁更動網站內容，而且時常需要只對特定裝置 (例如行動裝置) 調整顯示內容的公司行號。由於必須用到多種不同的網站程式碼組合，公司有必要聘請 IT 專家 (或請廠商代勞) 來進行管理，因為這些組合可能相當複雜。
 

第三種做法是建立獨立於原電腦網站之外的行動網站。當系統偵測到行動訪客時，會自動將他們重新導向到行動專用網站 (通常架設在子網域上，例如 m.yourname.com)。

只有行動使用者會看到行動專用網站；平板電腦、網路電視等其他裝置的使用者會看到原始的電腦版網站。

優點：

• 量身打造使用環境：您可以隨心所欲地為行動使用者另外建立行動網站。
• 容易變更：您可以只更改行動版網站的內容或架構，不會影響其他裝置上顯示的網站。

缺點：

• 需使用多個網址：在共用網頁的情況下，您必須謹慎處理行動網站與非行動網站間的重新導向和整合方式。另外，重新導向也會拖長網頁載入時間。
• 內容分歧：同時維護兩套不同的內容，資料管理工作可能會因此變得更複雜。

常見錯誤：

• 重新導向錯誤：當行動使用者連到深層電腦版網頁時，請務必確認系統不會將他們重新導向到通用的行動版首頁。此外，您也應該避免只有智慧型手機使用者會遇到的錯誤，預防系統將電腦版網址重新導向到不存在的行動版網址。
• 缺少註解：加入雙向註解有助於 Googlebot 發現您的內容，確保 Google 的演算法瞭解您的電腦版和行動版網頁間的關係，並以正確的方式處理。
• 使用環境不一致：請務必為智慧型手機網站打造與電腦版網站類似的環境，讓使用者一眼就能認出兩者是同個網站的不同版本；這樣能避免使用者混淆，並確保整體瀏覽過程順暢無礙。

適用對象：

這種做法適用於基於某些需求，必須將行動網站獨立出來管理的公司行號。舉例來說，有些公司所需的行動網站結構無法與「回應式網頁設計」相容，或是打算聘請另一家廠商來建立行動網站。建立行動專用網站相對來說並不難，費用通常也相當划算，非常適合只需基本網站功能的小型企業。