重點整理
- RWD 是同一個網址、同一份內容，依螢幕寬度自動重排。
- Google 以手機版內容為主建立索引，手機版少了內容，Google 也可能看不到。
- 有 RWD 不等於好用：版面擠壞、點不到、字圖變形、載入太慢最常見。
- 用自己的手機、行動網路走一遍首頁、找電話、送表單，就能發現多數問題。
- 零星問題修補即可，整站是縮小的電腦版或架構太舊，改版比較划算。
文章目錄
一句話重點： RWD（響應式網頁設計）就是讓同一個網站依照螢幕寬度自動調整版面，無論用手機、平板還是電腦，都能正常瀏覽。但有 RWD 不代表手機版就好用。版面跑掉、按鈕太小不好點、文字或圖片變形、載入速度太慢，都是常見的問題。Google 主要依據手機版的內容來評估網站，因此手機版沒做好，影響的不只是客人的使用體驗，也可能影響搜尋表現。
RWD 是什麼？跟獨立手機版差在哪？
| 做法 | 怎麼運作 | 現況 |
|---|---|---|
| RWD 響應式 | 同一個網址、同一份內容，依螢幕寬度自動調整版面 | 目前最常見的做法 |
| 獨立手機版 | 手機使用另外一個網址，例如 m.example.com | 需要維護兩份內容，現在較少採用這種做法 |
| 只有電腦版 | 手機上看到的是縮小的電腦版，必須放大才能看清楚文字 | 舊網站常見，建議考慮改版 |
RWD 最大的好處，就是網站只需要維護一份內容，網址也不用分成電腦版和手機版，不管是分享連結還是搜尋，都比較單純。
Google 怎麼看你的手機版？
Google 目前主要依據手機版的內容來建立索引和排名，官方稱為行動版優先索引。
如果你的網站有些內容只在電腦版顯示，手機版卻少了相關說明或圖片，Google 就可能無法完整取得這些資訊。
已經是 RWD，為什麼客人還是覺得難用？
1. 版面被擠壞：手機上該換的排法沒換
電腦上原本並排三欄的卡片，到了手機上卻只是全部往下堆，每個元素都佔一行，結果一張卡片就要滑好幾個畫面才看得完。
好的手機版不是單純把電腦版縮小，而是要依照不同螢幕尺寸調整排版。例如，卡片可以改成左右滑動，或把相關資訊整理成一行，讓使用者更容易閱讀。
2. 看得到，卻點不到
按鈕太小、連結排得太近，手指稍微偏一點就容易按錯。
尤其是電話、LINE、詢價這類重要按鈕，手機版更要注意大小和間距，讓客人看得到，也能輕鬆點選。
3. 字和圖變形
文字太小，不放大根本看不清楚；表格超出螢幕，得一直左右滑；圖片裁切不當，把重要內容切掉；遇到太長的英文或網址，甚至把整個版面撐開。
這些問題不一定會讓網站完全無法使用，但會讓客人看得很吃力。
4. 太慢，客人還沒看到內容就走了
客人用手機瀏覽網站時，不一定有穩定的 Wi-Fi，行動網路的速度也可能比辦公室網路慢。
如果網站直接把電腦版使用的大圖、整套中文字型都讓手機下載，載入時間就可能拖得很長。想知道自己的網站速度有沒有問題，可以參考網站速度怎麼測。
老闆可以自己做的 5 分鐘手機檢查
拿出自己的手機，先關掉公司 Wi-Fi，改用行動網路，實際操作看看：
- 打開首頁：主要內容能不能在幾秒內顯示？第一眼看過去，能不能知道這家公司在做什麼？
- 找電話或 LINE：從首頁進去，要點幾下才能找到？按下按鈕後，能不能直接撥電話或開啟 LINE？
- 送出一次表單：欄位好不好填寫？送出後，有沒有清楚告訴你表單已經送出成功？
- 左右滑一下：整個頁面有沒有超出螢幕，出現不正常的左右捲動？
- 看一頁服務或商品：文字不用放大就能看清楚嗎？圖片的重要部分有沒有被裁掉？
如果方便，再拿另一支螢幕大小不同的手機，例如家人的手機，照著操作一次。你可能會發現，有些問題在自己的手機上完全看不出來。
為什麼「我自己看起來沒問題」還不夠？
你每天使用的手機、經常瀏覽的頁面，通常也是你最熟悉的操作環境。但客人使用的手機尺寸、瀏覽器各有不同，而且很多人都是第一次進到你的網站，根本不知道資訊放在哪裡。
所以檢查手機版時，別只看畫面有沒有跑掉。試著把自己當成第一次來的客人，從搜尋結果點進網站，看看能不能在一分鐘內找到想要的資訊。
手機版有問題，修補還是整個改版？
- 零星問題（某幾頁排版跑掉、按鈕太小）：通常局部修正就可以，不一定需要整站改版。
- 整站都是電腦版縮小、或架構太舊改不動：如果問題遍布整個網站，或舊架構已經很難調整，重新改版可能比較划算。
如果不確定自己的網站適合哪種方式，可以先用網站改版自我檢查 勾選目前遇到的問題，初步判斷修補或改版哪個比較合適。想進一步了解改版流程與費用，也可以參考網站改版怎麼做。
常見問題
怎麼知道我的網站是不是 RWD？
用電腦打開網站，試著把瀏覽器視窗慢慢縮窄。如果版面會跟著重新排列，通常就是 RWD；如果只是整個畫面跟著縮小，或出現明顯的左右捲軸，就可能沒有做好響應式設計。
我的客人多半用電腦，還需要做手機版嗎？
還是需要。Google 主要依據手機版的內容來評估網站，而且就算客人平常習慣用電腦，第一次接觸你的公司，也可能是在手機上看到搜尋結果，或點開別人分享的連結。
佈景主題本來就是 RWD，為什麼手機還是很難用？
因為佈景主題通常只處理基本的響應式排版，後續新增的內容、表格或外掛，不一定都有針對手機做好調整。即使使用 RWD 佈景主題，還是需要逐頁檢查實際的操作體驗。
舊網站可以改成 RWD 嗎？
可以，但要看原本的網站架構。如果系統太舊，調整版面的工作量可能已經接近重新製作。建議先評估現有網站的狀況，再決定要局部修改還是整站改版。
崴米的做法
我們在製作手機版網站時，不是直接把電腦版縮小，而是依照不同螢幕尺寸，調整版面配置、按鈕大小和元素位置，並以實際的手機尺寸逐頁檢查。
