踏出第一步

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

一、為客戶提供便利性。

協助造訪您網站的使用者達成目標,包括透過閱讀您的網誌文章獲得樂趣、取得您餐廳的地址,或是查看您產品的相關評論。Walgreens 集團副總裁兼電子商務技術長 Abhi Dhar 表示:「我們在行動裝置上所做的一切努力都是為了讓客戶的生活更加便利。」

設計網站時,務必設想如何協助客戶更輕鬆地完成常見工作,從一開始產生工作概念、造訪您的網站,乃至最後完成工作,各個環節都需謹慎安排。

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

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

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

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

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

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

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

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

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

如需實際運用回應式網頁設計的詳細資訊,請參閱 Web Fundamentals 的開發人員內容。如果您需要針對手機、平板電腦和桌上型電腦所適用的網站分別衡量實作方法的優缺點,請參閱針對多螢幕客戶建立網站

新手應避免哪三大錯誤?

錯誤 1:忽略行動裝置客戶的需求。

提醒您,實用性是優質行動版網站的必要條件,其目的在於協助訪客完成工作,包括閱讀有趣的文章或查看您的店家位置資訊。切勿陷入迷思,只專注於建立徒具行動版格式的網站 (在行動裝置上看起來很美觀),因為這樣的網站時常不具備任何實用功能。相反地,您應該建立適合透過行動裝置瀏覽的網站 (也就是針對行動裝置客戶最常執行的工作進行最佳化,並為客戶提供真正實用功能的網站)。

錯誤 2:在不同於電腦版網站的網域、子網域或子目錄架設行動版網站。

雖然 Google 支援多種行動版網站設定,但建立個別的行動版網址會大幅增加維護和更新網站所需的工作量,並可能導致諸多技術性問題。您可以利用回應式網頁設計 (RWD) 來簡化工作,並以相同網址為電腦版和行動版使用者提供服務!Google 推薦您使用回應式網頁設計。

錯誤 3:閉門造車而不向外尋找靈感。

參考同領域的其他網站或競爭對手的網站,尋找靈感之餘,也觀摩他人在實務上的最佳做法。儘管您不是業界首位推出行動版網站的人,但您卻擁有學習前人經驗的優勢。 此外,The Mobile PlaybookGoogle’s Multi-Screen Success Stories 也能為您提供各種精采想法。

與開發人員合作時應該注意哪些事項?

與開發人員合作建立適合透過行動裝置瀏覽的網站時,只要按照下列步驟即可確保獲得理想結果。

一、要求查看開發人員的推薦信和行動版網站作品集。

詢問開發人員是否具有回應式網頁設計 (RWD) 相關經驗。如果您的網站只有供桌上型電腦瀏覽的版本,可詢問開發人員是否具有將電腦版網站轉換成回應式網站的經驗。查看開發人員所建立的其他網站。與開發人員的介紹人和之前的客戶進行訪談,瞭解對方與開發人員的合作經驗。您可以使用 Google 的 PageSpeed Insights 等工具,查看開發人員的作品集。PageSpeed Insights 會顯示拖慢網頁速度或有損網頁可用性的各項因素。

Web Fundamentals 已通過 PageSpeed Insights 針對行動裝置速度和使用者體驗的測試。

二、確認開發人員對您的行動客戶有一定程度的瞭解。

告知開發人員您的業務內容,以及您希望對方針對行動版網站上哪些最常見的工作進行最佳化。確保開發人員建立的網站能提供行動客戶需要的功能。

三、要求開發人員全力提升網站速度。

切勿讓使用者花費太多時間等待瀏覽器載入您的網頁。詢問開發人員是否瞭解 PageSpeed Insights (如上所述) 這項工具,以及是否熟悉可提升網頁載入速度的相關技術。您可以在合約中要求網頁的「轉譯作業」必須與競爭對手的網頁一樣快速 (依據 WebPagetest 的測試結果)。或者,如果這項要求的難度過高,您可以尋求開發人員的承諾,力求在 PageSpeed Insights 的測試結果中取得綠色勾號,亦即沒有任何問題標記為「應修正」(如果網頁測試結果沒有綠色勾號,那麼您和開發人員必須針對修正問題的成本和益處權衡利弊得失)。如需關於行動版網頁速度的詳細資訊,歡迎觀看影片「快速修正行動版網站效能」。

四、要求開發人員安裝網站分析工具。

安裝 Google Analytics (分析) 這類網站分析工具,可方便您收集網站效能的相關匯總資訊。

五、確認您和開發人員都瞭解 Google 網站管理員指南

這份指南內含豐富資訊,說明 Google 如何尋找、處理您的網站內容並予以排名。

六、確認您在合約中規定,開發人員必須在行動版網站首次上線後負責後續相關改善工作。

客戶的意見回饋和網站分析工具的資料相當寶貴,建議您收集並善用這些資料,據以改善網站效能。

建議您使用 Google AdWords 的行動裝置與多螢幕供應商建議清單。如需有關行動版網站實作方法的詳細資訊,請前往「行動版網站搜尋引擎最佳化」網頁參閱相關文件。

傳送您對下列選項的寶貴意見...

這個網頁