開始建立適合透過行動裝置瀏覽的網站

行動科技正在改變世界。在今天這個時代,任何時間都有人利用智慧型手機溝通聯繫及搜尋資訊。在許多國家/地區,智慧型手機的數量已超過個人電腦,因此建置適合透過行動裝置瀏覽的網站可說是經營線上業務的重要一環。

  1. 如果您不知道自己的網站是否適合透過行動裝置瀏覽,歡迎立即接受行動裝置相容性測試
  2. 如果您的網站是利用 Wordpress 這類內容管理軟體 (CMS) 所建立,請參閱我們的自訂網站軟體指南
  3. 如果您有足夠的技術打造適合透過行動裝置瀏覽的網站,請先選擇行動版網站配置

為什麼需要建立適合透過行動裝置瀏覽的網站?

不適合在行動裝置上瀏覽和使用的網站,與行動裝置友善版本相互比較

如果網站未採用行動裝置友善設計,可能造成行動裝置使用者在瀏覽和使用上的不便,例如閱讀網站內容時,必須自行撥動雙指或縮放螢幕才能瀏覽內容,因此在使用上甚感不便之餘,很可能就會放棄瀏覽您的網站。反觀適合透過行動裝置瀏覽的版本不僅容易閱讀,使用上也極為流暢方便。

在美國,有 94% 的智慧型手機使用者會透過手機搜尋當地資訊。 有趣的是,77% 的行動裝置搜尋都發生在使用者的住家或公司,而這些都是可能會有電腦的地方。

不論是在網誌發文表達自己支持某支球隊、為社區劇院建構專屬網站,還是向潛在客戶銷售產品,行動裝置都是執行業務不可或缺的利器。 因此,確保使用者透過行動裝置能輕鬆愉快瀏覽您的網站,才是經營事業的正確方向。

如何踏出第一步?

要讓網站適合透過行動裝置瀏覽,改造過程所涉及的工作會因您的開發人員資源、商業模式和專業技術而有所不同。舉例來說,如要重新設計電腦版網站以方便在行動裝置上使用,請參閱以下圖表:

電腦版網站應如何重新設計,才適合以行動裝置瀏覽

就基本的實作層面而言,在將既有的電腦版網站轉換成行動版本時,必須將電腦版網站現有的內容區段重新編排成適合透過行動裝置瀏覽的設計樣式。如要進一步瞭解實作行動版網站的技術資訊,請參閱行動版網站搜尋引擎最佳化 (SEO) 的配置選項

建立適合透過行動裝置瀏覽的網站時,必須掌握哪三大重點?

1. 為客戶提供便利性。

協助造訪您網站的使用者達成目標,包括透過閱讀您的網誌文章獲得樂趣、取得您餐廳的地址,或是查看您產品的相關評論。設計網站時,務必設想如何協助客戶更輕鬆地造訪您的網站與完成工作。

客戶在使用過程中可能採取的步驟概覽

大致評估客戶在使用過程中可能需要執行的步驟,確保他們可在行動裝置上輕鬆完成這些步驟。請盡可能精簡操作步驟,同時減少使用者的互動次數。在本範例中:(1) 客戶想購買燈具而上網搜尋,然後點擊了某個網站;(2) 瀏覽各式各樣的燈具;最後 (3) 購買了喜歡的燈具。

2. 依據行動裝置客戶完成常見工作的輕鬆程度來衡量您網站的效果。

看著行動裝置的使用者

建立行動版網站時須顧及優先順序,從您的客戶在行動版網站上最重要和最常見的任務入手。處理好這些任務至關重要,這也是衡量您的行動版網站是否能夠幫助客戶達到他們目標的重要指標。您可以依照幾項原則來設計網站,讓使用者更容易操作,比如注重介面的連貫性,以及在各類型平台上提供的一致的體驗。

MediaPost 的報導指出:「有 48% 的受訪者認為,便利性是行動版網站的第一要素,當使用者透過行動裝置購物時,行動版購物網站的便利程度是他們最優先的考量。」

3. 選擇適用於所有裝置的行動版網站範本、主題或設計 (例如使用回應式網頁設計)。

回應式網頁設計是指無論使用者透過何種裝置瀏覽網頁 (包括電腦、平板電腦或行動電話),該網頁一律會使用相同的網址和程式碼,只不過網頁的顯示效果會依據螢幕尺寸進行調整或「回應」。因此,Google 建議您使用回應式網頁設計,而非其他設計樣式。採用回應式網頁設計的優點之一,就是維護網站時只需要維護一個版本,不必維護兩個版本。舉例來說,您不必同時維護電腦版網站 (www.example.com) 和行動版網站 (m.example.com),只需擇一進行維護 (例如 www.example.com),即可兼顧電腦版和行動版網站訪客的使用需求。

兼顧電腦版和行動版網站訪客需求的網站

回應式網站會根據不同的螢幕尺寸調整顯示效果,但仍使用相同的網址和程式碼。上述三種裝置一律使用 www.example.com,而不是另外讓行動版網頁使用 m.example.com,平板電腦版網頁使用 t.example.com 等其他網址。

「由於 Baines & Ernst 採用回應式網頁設計,因此不必建立多個網站,就能為不同尺寸的螢幕提供最佳化的網站使用體驗。該公司發現,訪客每次造訪網站時瀏覽的網頁數量增加了 11%,行動版轉換率也成長了 51%」。

所謂的「轉換」,是指客戶執行您希望他們進行的操作,例如購買產品、撥打電話聯絡商家,或訂閱電子報。

如需實作回應式網頁設計的詳細資訊,請參閱網站基礎知識。如果您需要針對手機、平板電腦和電腦所適用的網站分別衡量實作方法的優缺點,請參閱針對多螢幕客戶建立網站

新手應避免哪三大錯誤?

  1. 忽略行動裝置客戶的需求。提醒您,實用性是優質行動版網站的必要條件,其目的在於協助訪客完成工作,包括閱讀有趣的文章或查看您的店家位置資訊。切勿陷入迷思,只專注於建立徒具行動版格式的網站,因為這樣的網站時常不具備任何實用功能。相反地,您應該建立適合透過行動裝置瀏覽的網站 (也就是針對行動裝置客戶最常執行的工作進行最佳化,並為客戶提供真正實用功能的網站)。
  2. 將行動版網站架設在不同於電腦版網站的網域、子網域或子目錄。雖然 Google 支援多種行動版網站設定,但建立多個不同的行動版網址會大幅增加維護和更新網站的工作量,且可能帶來諸多技術問題。您可以利用回應式網頁設計來簡化工作,並以相同網址為電腦版和行動版使用者提供服務。Google 推薦您使用回應式網頁設計。
  3. 閉門造車而不向外尋找靈感。參考同領域的其他網站或競爭對手的網站,尋找靈感之餘,也觀摩他人在實務上的最佳做法。儘管您不是業界首位推出行動版網站的人,但您卻擁有學習前人經驗的優勢。