M-Day來臨，你的網站行動化了沒？

2015/4/21或可稱為「M-Day」，這一天是Google宣告網站是否行動化，將是影響行動搜尋結果的重要因素！這對終端使用者絕對是好事，因為終於要跟不斷「放大縮小」，閱讀網站非常吃力的日子說再見了～

2018/7月起，Google演算法更將把行動網頁的載入速度列為排名考量因素之一，但載入速度並不是行動版搜尋的唯一排名依據，如果某個較慢的網站相當符合用戶搜尋的關鍵字，排序仍會較高。而Google過去就曾在桌面搜尋推出類似載入速度規則，只是這次把這個演算機制延伸到手機版本上。

相關演算法內容更新可參考： Google修改手機搜尋演算法，網站速度過慢將影響排名

 

對於毫無防備的網站經營者，M-Day的來臨可能會摧毀他的行動搜尋排名，有80%的網路使用者都使用智慧手機上網，而根據搜尋行為分析，42%是汽車的搜尋，41%是居家花園的搜尋，38%是服裝與美容，這些搜尋都是從Google搜尋特定產品或服務，而非指定某品牌名稱，這就是為什麼你的企業網站非要行動化不可，如果沒有你可能就失去行動市場的競爭力。

 

 

行動搜尋也在2015年就已經超過桌上搜尋了，況且M-Day發表Google正式把網站行動化納入影響行動搜尋結果的重要因素，當你的網站沒有行動化別以為你只是給顧客看電腦版的網站而已，而是當他們不只看不到你的網站，反而還會去看你的競品網站，這樣你不僅只是流失網路生意而已，是嚴重打擊整體生意及品牌知名度。

 

M-Day發表不到兩個星期的時間內，世界各地的網站經營者爭先恐後的想讓自己的網站行動化，根據TechCrunch，前500強的企業裡，有一半以上的網站都沒有行動化，但像Apple、Verizon、Wal-Mart還有GE就都有提供好的行動體驗，特別是醫療保健網站，是非常需要行動版的。

 

 

如何確保Google認定你的網站是行動友好的？

你可能會想說所謂網站行動化，就是能在手機上順利瀏覽你的網站，提供良好的行動體驗，其實Google不一定這麼認為，所以最好的方法是利用Google的行動裝置相容性測試工具檢測你的網站，只要輸入你的網址，就能看到檢測的結果，並告訴你哪裡對行動不友善！但如果不友善也不用緊張，趕快調整Google建議修改的部分就可以了，不需要太花俏的程式碼。

是什麼讓網站有更好的行動體驗？

提供給顧客良好的行動體驗，你需要的是多螢網頁設計(響應式網頁設計)。這種網頁設計會自動根據訪問者的裝置來調整網站最佳瀏覽畫面，因為你的訪客有可能會從桌機、從各種尺寸的平板或智慧手機來，如果沒有特別為各種載具製作相對應的網站，這種情況下你可能就會流失部分客戶，所以無論是想掌握客群或是有利於SEO，選擇多螢網頁設計吧！

 

網站提供行動版體驗，真的有利於行動排名嗎？

根據我們自己的實驗，在2015年1月的時候，我們把官方網站改成多螢網頁設計，同時適用於手機、平板、電腦，在改版以後，無論是停留時間、跳出率、轉換率都大幅改善！

*停留時間：整體平均成長近2倍（PC成長1.89倍、手機成長1.88倍、平板成長1.91倍）

*跳出率：整體平均下降13.52%（PC下降16.18%、手機下降7.15%、平板下降12.44%)

*轉換率：整體平均上升3.44%（PC下降4.64%、手機下降0.88%、平板下降2.81%）

可能會有某些產業覺得我主要的客源都還是從電腦來的，因此還是不想重視行動族群，但其實網站有行動版已經是必然會發展的方向，未來沒有行動版的網站勢必會被淘汰，所以無論現在或以後，把行動版規劃進你的網站吧！

 

以下將給準備規劃行動版網站的網頁設計者幾個重要的提醒:

 

1.在著手建立行動版網站以前，優先確認要設計的內容、方向和網站類型

必須先確定的幾個方向:

• 從零開始的網頁設計－準備為某個產品或是品牌做一個全新的網頁，包括電腦版頁面及行動裝置頁面

如果是連電腦版頁面都還沒有的話，建議可以在建站時使用RWD響應式設計，同一個版本的網站就能同時顯示於電腦和行動版裝置。

• 重新設計網頁－打算從原有的舊網頁中取材，量身打造另一個電腦頁面及行動裝置頁面

原本已存在一個電腦版網站，想藉由推出行動版網站的同時也將電腦版做改版設計的話，同樣可以使用RWD響應式設計，使用舊有網站上的內容為素材並於新版網站完成後在舊有網站上做好網址轉址等工作，讓原始網站經營成果的流量可以順利進入新網站。

有關網站改版相關作法可參考: 網站改版，5個動作hold住你的排名

 

• 增設行動裝置版頁面－不改變原有的電腦版頁面，只需要新增設行動裝置版頁面

可採用AMP網頁設計方法，為原有網站增設行動版頁面。相關做法和內容可參考: Google 推出行動網站加速計畫 AMP

 

 

以上三種狀況個別需要不一樣的設計策略，是著手進行行動網站建立前必須優先釐清的。

 

2.設計行動版網站前，務必先預測網站流量

建議可以先使用Google Analytics或是其他測量網頁流量的分析工具， 對網站訪客做深入調查。觀察的資訊越詳細越好，例如訪客大部分是使用什麼行動裝置瀏覽你的網站，使用者的螢幕大小、輸入方式和網路速度等，掌握這些資訊後，在行動版的網頁設計上就有可以特別加強的項目設計。

(Google Analytics中可透過觀察維度的切換得知使用行動裝置瀏覽網站者的多種資訊，諸如螢幕大小、裝置型號、輸入方式等)

 

3.學習如何設計RWD響應式網站設計

承第二點所述，使用者使用的行動裝置種類可能非常多元，如果使用RWD(Responsive Web Design)網站設計，網站即會依照使用者的螢幕大小自動調整版面至適合的尺寸，相當方便。

 

4.網頁模板建議使用單欄式設計(Single-Column Layouts)

網頁模板採用單欄式設計的目的為方便使用者在有限的行動裝置畫面上閱讀並操作網頁，過多的欄位容易導致使用者誤觸，並且欄位變多個別欄位的字體大小就變得不易閱讀。如果一定得使用多欄為設計，即可參考RWD設計的使用技巧，將多欄(multi-column)的板位合併為單欄式設計。

 

5.善用折疊式目錄

網頁的資訊如果真的很多，可以使用重點式、主題式的呈現內容，將多欄的其他資料隱藏在這些大主題和重點之下，讓使用者可以輕鬆找到他想要瀏覽的主題進入，記得欄位也盡量使用直式設計，別讓使用者需要左右滑動才能瀏覽。

6.行動裝置上的按鈕需要顯眼易按，並且提供視覺反饋

行動裝置在點選上和電腦版有很大的不同，電腦使用滑鼠點擊，有左鍵右鍵等設計而行動裝置卻沒有，並且電腦版網頁可將滑鼠游標移至按鈕上方但並不需要點擊，但行動裝置為碰觸按鈕即為點擊。

視覺反饋的意思便是，在使用者點擊按鈕之後，若按鈕顏色產生變化告知使用者他成功點擊了，不僅有益於使用者體驗，也可以避免使用者重複點擊導致網頁不斷重新載入等待時間過長。

 

7.注意網站上使用的圖片大小和檔案大小

行動裝置不論在硬體的規格和顯示器的大小上都不如電腦，所以適合行動裝置瀏覽的圖片和適當的檔案大小都是必要的，圖片和檔案可進行壓縮以符合行動裝置的瀏覽需求，不僅可以提升網站進入速度、對使用者的瀏覽體驗提升也是有非常大的幫助。

 

8.測試、測試還是不斷的測試

網頁設計完成後，才是網站設計者考驗的開始，你有辦法確定你設計的行動版網站能夠在各個裝置上運作嗎?你絕對無法將所有行動裝置的版本都親自測試過。

所以必須使用測試軟體的協助，行動裝置相容性的測試可以使用Google提供的測試工具

 

相關操作方式可參考:Google 推出行動網站加速計畫 AMP

Mike Brittain的文章也提供相關測試行動版網頁的資料可供參考。

 

 

以上即是為您介紹的幾項規劃行動版網頁時需要注意的事項，希望您的網站也能藉由行動版網頁的建立帶來更多流量和業績。

 

圖片來源：Designed by Freepik