如何打造跨螢幕網站

現今有 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 的演算法瞭解您的電腦版和行動版網頁間的關係,並以正確的方式處理。
  • 使用環境不一致:請務必為智慧型手機網站打造與電腦版網站類似的環境,讓使用者一眼就能認出兩者是同個網站的不同版本;這樣能避免使用者混淆,並確保整體瀏覽過程順暢無礙。

適用對象:

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

打造完美體驗

除了基本設定和架構外,版面配置內容速度是良好的行動使用環境不可或缺的三大要件。確保這三個環節的健全完善,正是吸引使用者並將他們轉為忠實客戶的最佳方法。

版面配置設計

  • 易於觸控:對人類的手指而言,建議的最小觸擊目標大小為 48 dp (密度獨立像素),而且目標之間至少應間隔 8 dp。觸擊目標過小容易導致點擊錯誤,帶給行動使用者負面觀感。
  • 選用合適字體:字體大小必須至少有 12 像素,比這更小的文字閱讀起來很吃力。另外,請務必選擇清晰易讀的字型,並且盡可能避免使用圖形文字。
  • 設定合適寬度:網路使用者大多習慣上下捲動網頁;網頁設計成左右捲動的話,操作起來可能不太順暢,對小螢幕裝置的使用者而言很不方便。
  • 避免使用滑鼠懸停功能:在電腦螢幕上,滑鼠懸停功能是讓使用者發現隱藏內容的絕佳方式,但這個功能需要滑鼠才能奏效。在平板電腦或智慧型手機等觸控螢幕上,使用者的手指並不能像滑鼠一樣懸停在內容上,因此請避免使用滑鼠懸停功能,並改用按鈕,讓使用者只要輕點按鈕就能顯示深層選單。
  • 不要使用彈出式視窗:不論是在電腦版網站或行動網站上,彈出式視窗都會造成使用者反感。與其使用插頁廣告來提高應用程式下載量,不如直接將提示內容嵌入網站內。
  • 使用附有清楚說明的按鈕:不要讓使用者搞不清楚按下按鈕後會連到哪個網頁。按鈕一定要標示清楚,並使用導航標記和清楚的類別名稱 (例如「步驟 2:付款」),讓使用者順利瀏覽網頁。

內容

  • 不要塞給使用者過多內容:對行動網站而言,內容過多不一定是好事。請把內容簡化,不要一字不漏地在行動版網頁上塞進電腦版網頁的內容。
  • 在自訂內容的同時保持內容完整:從行動裝置和平板電腦使用者的立場出發,他們一定會期望行動網頁能夠提供與電腦網頁相同的核心功能 (例如看影片或購買文具用品),因此請務必保留核心內容,並根據行動裝置螢幕的特性加以調整,讓內容流暢地在這類螢幕上顯示。
  • 清楚顯示主要功能:請務必確保使用者都能輕鬆使用網站中所有的主要功能。以零售商為例,產品搜尋和購物車 (以及「店家搜尋器」之類行動裝置適用的工具) 等功能,應該要放置在網頁中央的顯眼位置。另外,您也應該提供完整版網站的連結,方便行動使用者切換瀏覽。
  • 仔細檢查媒體檔案:舉例來說,許多行動裝置都無法播放 Flash 影片,因此,請務必確認跨螢幕網站上提供的媒體檔案都能在相對應的螢幕上播放。
  • 簡化結帳過程:在行動裝置上進行繁雜的步驟 (例如填寫冗長的表格,以及用手指輸入地址等資料) 是十分困難的事。為了提升轉換率,您必須盡量簡化付款程序。您可以使用 Google Wallet Instant Buy 之類的服務,在雲端自動產生所有的付款和運送詳情,方便客戶快速完成結帳程序。

速度

這裡的重點只有一個,那就是加快速度!加快網站速度是確保使用者滿意度的不二法門,尤其是在行動裝置上:使用者隨時隨地都會瀏覽網站,而數據網路的傳輸速度可能會很慢。提高速度通常可以提升訪客的參與度、增加訪客在您網站上停留的時間,進而帶來更多轉換。提高速度不但有助於提升網站在 Google 搜尋上的排名,許多公司行號在投注心力改善網頁執行速度後,收益也跟著連帶成長。

以下是您該避免的常見錯誤:

  • HTTP 請求數量過多:雖然行動使用者上網想做的事和電腦使用者一樣,但行動裝置的處理能力畢竟有限,網路頻寬可能也不穩定。為了加快行動網頁的執行速度,請務必刪減網頁中會增加 HTTP 請求的元素。
  • 圖片超載:隨著智慧型手機的顯示效能日益強大,您或許會想使用尺寸最大的圖片,讓智慧型手機自動依照螢幕縮小尺寸,但這並不是最好的做法。為了避免浪費時間和耗損處理能力,我們建議您為不同的裝置分別提供合適的圖片大小。
  • 檔案超載:請想想 JavaScript 程式碼片段和 CSS 樣式是否對行動使用者有幫助,因為 JavaScript 程式碼或 CSS 樣式過多可能會拖慢網頁執行速度。建議您盡量壓縮程式碼、全面重新編排 CSS,並確保瀏覽器能夠快取素材資源,避免系統在訪客每一次載入網頁時重新擷取。

如果想進一步瞭解相關詳情,以及有哪些工具能協助您提高網站效能,請前往 developers.google.com/speed 查閱 Google「提高網頁速度」(Make the Web Faster) 頁面上的內容。

自我評估成效

追蹤分析報表以及對內容和流程執行 A/B 測試非常重要,這兩項做法有助於您回答與您的網站和策略相關的問題,包括:

  • 誰是您的行動訪客?(您可以從行動報表中找到答案)
  • 訪客想尋找什麼資訊?(查看訪客瀏覽的內容和網站搜尋查詢就能得知)
  • 訪客是否順利地找到了所需資訊?(查看跳出率和平均網頁停留時間就能見分曉)
  • 行動使用者是否有較喜愛的廣告活動或網頁?(查看廣告活動在行動裝置和電腦上獲得的轉換次數)
  • 網站結構是否方便透過行動裝置瀏覽?(製作站內搜尋、目標流程、瀏覽頁數和網站速度報表)
  • 網站載入速度是否夠快,能夠有效留住使用者?(測試網站速度)
  • 網站是否方便用手持裝置瀏覽?(建議查看到達網頁跳出率)
  • 電腦版網站的號召圖文在行動網站上也一樣有效嗎?(查看來自行動裝置和電腦的轉換次數,並使用回應式點擊追蹤)

與電腦版網站一樣,建議您持續對您的行動版網站進行測試、分析和調整,使其適合新型裝置並符合新的使用者瀏覽習慣。

白皮書為多螢幕世代消費者打造網站

白皮書:為多螢幕世代消費者打造網站

瞭解多螢幕網站的特色、打造優質使用者體驗的訣竅,以及避免常見錯誤的方法。下載白皮書全文