RWD 響應式網站是什麼？手機版一定要做嗎
先看一個現實
台灣使用者瀏覽網站，來自手機的比例早已超過電腦，某些行業甚至達到八成以上。而 Google 判斷網站內容時，是以手機版的呈現為主要依據。
所以「手機版一定要做嗎」這個問題，實務上已經不成立——沒有手機版的網站，在多數訪客眼中和搜尋引擎眼中，都是有問題的網站。
RWD 是什麼
RWD（Responsive Web Design，響應式網頁設計）是同一份網頁，依據螢幕寬度自動調整版面的做法。
例如電腦上是三欄並排，平板變成兩欄，手機變成單欄由上往下排列。內容是同一份，只是排列方式改變。
怎麼自己測試
用電腦開啟網站，把瀏覽器視窗慢慢縮窄。如果版面會跟著重新排列、文字不需要左右捲動就能閱讀，那就是 RWD。如果整個畫面只是等比例縮小、文字變得看不清楚，那就不是。
三種手機版的做法比較
| RWD 響應式 | 另做手機版網站 | 不做手機版 | |
|---|---|---|---|
| 網址 | 同一個 | 另一個（如 m.example.com） | 同一個 |
| 內容維護 | 改一次 | 要改兩次 | 改一次 |
| SEO | 權重集中 | 需處理重複內容 | 明顯不利 |
| 建置成本 | 中 | 高 | 低 |
| 目前主流 | 是 | 已少見 | 不建議 |
另做一個手機版網站是十年前的做法，現在幾乎不採用了——維護要做兩份、內容容易不同步、還要額外處理兩個網址的對應關係。
RWD 不是把電腦版縮小
這是最常見的誤解，也是很多「有做 RWD 但很難用」的網站的問題所在。真正的手機版設計要考慮：
- 手指不是滑鼠——按鈕要夠大、間距要夠，避免點錯
- 沒有滑鼠移過去的效果——依賴移過去才展開的選單，在手機上無法操作
- 資訊優先順序不同——電腦版可以並排的東西，手機上必須決定誰先誰後
- 表單要盡量簡短——手機打字很費力，欄位越多放棄率越高
- 電話號碼要能直接點擊撥出——對服務業來說這一項直接影響來電量
- 圖片不能太大——行動網路的速度與流量都要考慮
速度在手機上更重要
手機的網路條件與運算能力都不如電腦，同一個網站在手機上通常慢得多。而使用者對慢的容忍度很低——多數人在等待數秒後就會離開。
幾個最常見的拖慢原因：
- 圖片沒有壓縮——這是最大宗。直接把手機拍的原圖上傳，一張就好幾 MB
- 載入了過多的外掛與追蹤碼
- 字型檔案過多過大
- 首頁塞了大量輪播圖
其中圖片問題最容易改善，效果也最明顯。好的後台應該在上傳時自動壓縮，避免這個問題發生。
常見問答
已經有網站了，要改成 RWD 很麻煩嗎？
取決於原本的架構。如果原本是用表格排版的老式網頁，通常改造的成本會接近重做，這種情況建議直接重新設計。如果原本結構還算合理，調整樣式即可。
做了 RWD 排名就會上升嗎？
不會自動上升，但沒做會明顯不利。可以把它理解為及格門檻而非加分項目——做到只是回到起跑線，排名還是取決於內容品質。
需要另外做 App 嗎？
對絕大多數中小企業，答案是不需要。App 的開發與維護成本高出許多，而且使用者要願意安裝才有機會被看到。RWD 網站在瀏覽器就能開，門檻低得多。
除非有需要頻繁回訪、需要推播、或需要使用手機硬體功能的明確需求，否則先把網站做好比較實際。
要支援到多小的螢幕？
一般以主流手機的寬度為設計基準即可。過度追求支援極舊或極小的裝置，投入的成本與實際受益的人數不成比例。