圖片來源：Pexels
行動上網已成為主流！該如何設計行動版網站？
行動版網站的配置，對於現在這個人手一機的時代越來越重要，規劃良好的行動網站結構，能讓手機或平板的使用者隨時瀏覽網站不受限，擁有更佳的使用體驗。
圖片來源：StatCounter
根據StatCounter統計，2016年10月全球行動上網用量首度超越桌機(桌機48.7%，手機與平板51.3%)，行動上網顯然已成主流，意味著網站內容的呈現也得優先考量行動裝置的瀏覽習慣和需求。
Google也於今年3月發佈公告：經過一年半的實驗和測試，Google已開始採用「行動優先索引」收集網站內容資料，也將以行動裝置條件作為網站評分依據。
〈Google官方部落格：Rolling out mobile-first indexing〉
一般來說，行動版網站有三種配置方式：RWD響應式網頁設計、動態服務和獨立網址。
RWD響應式網頁設計(Responsive Web Design)
相同網址，相同內容
網頁內容根據訪客的螢幕尺寸來調整畫面的呈現，讓訪客不需要透過縮放即可完整瀏覽網站內容，為Google最建議的行動網站配置方式。
優點：
- 維護容易，成本低
只需一個網站即可，降低網站的開發及維護成本。 - 利於SEO(搜尋最佳化)經營
在相同網址的情況下，能避免重複性頁面，以及分散搜尋排名的問題。
缺點：
- 網站不適合有太複雜的功能或介面
必須妥協桌機與手機之間的差異，無法設計過於複雜的網頁。 - 網站載入時間較長
相較於將多餘內容隱藏的純手機版網站，RWD載入的是完整電腦版的網站內容，因此網站載入的時間較長，但這問題可由開發人員優化後改善。
動態服務(Dynamic serving)
相同網址，不同內容
在相同網址的情況下，網站會依據訪客的裝置設備，給予不同的網頁內容，提供較佳的使用者體驗。
優點：
- 利於SEO(搜尋最佳化)經營
在相同網址的情況下，能避免重複性頁面，以及分散搜尋排名的問題。 - 提供較具差異性的網頁
針對不同裝置的客戶，提供不同版本的網頁，為用戶帶來較佳的使用體驗。
缺點：
- 維護成本較高
須開發及維護兩套獨立的html代碼、CSS、JavaScript，因此需較高的成本。 - 導入複雜
為避免錯誤的向行動版用戶提供桌機版頁面，須使用Vary HTTP標頭，提供信號給伺服器，以呈現與裝置相對應的網頁內容。
獨立網址(Separate URLs) = 大小網
不同網址，不同內容
依據訪客的裝置設備，自動轉址到適當的網址，或讓訪客自行選擇要點選到哪個版本的網站，訪客使用桌機和行動裝置能看到不同的網址及網站內容。
優點：
- 提供較具差異性的網頁
針對不同裝置的客戶，提供不同版本的網頁，為用戶帶來較佳的使用體驗。
缺點：
- 維護成本較高
因為使用不同的後台與獨立的資料庫來控制網站的資訊，桌機版和行動版須分開更新，管理成本相對較高。 - 重複性頁面問題
容易因技術上的問題，造成重複性頁面。 - 不利於SEO(搜尋最佳化)經營
除重複性頁面外，也容易造成分散流量及搜尋排名的問題。
三種行動版網站配置方式比較：
| 配置方法 | 網址保持不變嗎? | HTML保持不變嗎? |
| RWD響應式網頁設計 | v | v |
| 動態服務 | v | x |
| 獨立網址（大小網） | x | x |
在了解三種行動網站設計的優劣勢後，可依照自己網站的特性及條件，根據實際需求選擇最好的方案！