LINE 免費諮詢

行動優先與 RWD 響應式設計：手機版網站從規劃到上線的實戰指南

網站設計 閱讀約 10 分鐘網軍行銷編輯部
行動優先與 RWD 響應式設計：手機版網站從規劃到上線的實戰指南｜網軍行銷
文章目錄

很多老闆檢查自家官網的方式，是坐在辦公室用大螢幕打開首頁，覺得版面漂亮就放心了。但實際上，你的客人多半是在捷運上、等餐時、睡前滑手機時第一次看到你的網站。RWD 響應式設計做得好不好，決定的是這些人會不會繼續往下看，還是三秒內按返回鍵去看競爭對手。

這篇文章整理 Google Search Central、web.dev 與 Nielsen Norman Group（NN/g）的官方文件與研究，說明「行動優先」到底要優先什麼、RWD 的技術重點有哪些，以及台灣中小企業官網在手機版最常踩的坑。看完你會知道下次跟設計師或接案廠商開會時，該問哪些問題。

Google 已經全面用手機版內容來索引網站

先講對 SEO 影響最直接的事。Google Search Central 部落格在 2023 年 10 月宣布，行動版優先索引（mobile-first indexing）已全面完成：凡是能在行動裝置上正常運作的網站，主要都由智慧型手機版的 Googlebot 來爬取。2024 年 6 月的後續公告更進一步說明，2024 年 7 月 5 日之後，剩下的網站也會改由智慧型手機 Googlebot 爬取與索引，在行動裝置上完全無法存取內容的網站，將無法被索引。

換句話說，Google 是用「手機看到的版本」來理解你的網站。依 Google 的行動版優先索引最佳做法文件，有幾件事特別重要：

  • 主要內容要一致：手機版的主要內容應與桌機版相當。把內容收在摺疊區塊（accordion）或分頁標籤裡是可以的，但不要因為版面小就直接刪掉。
  • 標題與中繼資料一致：title、meta description、頁面標題（H1、H2）在兩個版本要相同。
  • 結構化資料一致：桌機版有的結構化資料，手機版也要有。
  • 圖片要有相同的替代文字，且使用穩定的圖片網址。
  • 不要讓主要內容需要點擊或滑動才載入，也不要在手機版封鎖 CSS、JavaScript 或圖片資源。

Google 在同一份文件中明確建議：響應式設計是最容易建置與維護的做法。相較於另外架一個 m. 開頭的手機網站，RWD 只有一組網址、一份內容，不會有兩邊內容不同步、轉址設錯的問題。這也是我們在企業官網設計完整指南裡建議新官網一律採用 RWD 的原因。

行動優先是「先想清楚什麼最重要」，不是「先畫手機版」

「行動優先（mobile-first）」常被誤解成一種畫圖順序：先畫手機稿、再畫桌機稿。真正的意義其實是內容的取捨順序。手機螢幕寬度遠小於桌機，放不下所有東西，逼你回答一個問題：訪客打開這一頁，最需要先看到什麼？

以一家台中的室內設計公司為例，桌機版首頁可能同時放了作品輪播、得獎紀錄、設計師介紹、部落格文章與合作建商 Logo。改用行動優先思考時，排序可能變成：

  1. 一句話說清楚「做什麼、服務哪裡」（例如：台中老屋翻新與住宅設計）
  2. 2–3 張代表作品
  3. 明顯的「預約丈量」與「加 LINE 諮詢」按鈕
  4. 客戶評價
  5. 其他延伸內容

這個排序回頭套用到桌機版，通常也會讓桌機版更清楚。所以行動優先的好處不只在手機，而是迫使團隊做出內容的優先順序。

但「行動優先」不等於「只有行動版」

NN/g 有一篇文章特別提醒「Mobile First Is NOT Mobile Only」。他們在一項 179 位受試者、6 個網站（其中 5 個為響應式設計）的研究中發現，受試者在手機上使用導覽選單的比例反而比桌機高；研究者認為原因不是手機版做得特別好，而是桌機版直接沿用了手機版的設計，例如在大螢幕上仍把選單藏在漢堡圖示裡、用放大鏡圖示取代搜尋框。

結論是：內容與功能要跨裝置一致，但介面要依裝置調整。手機上合理的漢堡選單，放到 27 吋螢幕上就是浪費空間、降低可發現性。導覽設計的細節，可以參考導覽列與選單設計一文。

RWD 的四個技術基本功

以下是 web.dev〈Responsive web design basics〉整理的核心做法，交給工程師時可以當成驗收清單。

1. 正確設定 viewport

頁面 head 裡要有 viewport 設定（width=device-width, initial-scale=1）。少了它，手機瀏覽器會用大約 980 像素的桌機寬度來排版，再整頁縮小，字就小到看不清楚。web.dev 也提醒，不要用 maximum-scale、user-scalable=no 這類設定禁止使用者縮放，這會對視力不佳的使用者造成無障礙問題。

2. 內容不能超出螢幕、不能橫向捲動

圖片設定最大寬度 100%，同時保留 width、height 屬性，讓瀏覽器先預留空間，避免圖片載入後把文字往下擠。這個「版面位移」正是 Core Web Vitals 裡 CLS 指標在量測的事，詳細可看 Core Web Vitals 改善指南。版面則改用 Flexbox、CSS Grid 這類彈性排版，不要寫死固定像素寬度。

3. 斷點依內容決定，不依機型決定

很多規格書會寫「iPhone 一種、iPad 一種、電腦一種」。web.dev 的建議剛好相反：不要依裝置類別、品牌或作業系統來訂斷點。正確做法是從小螢幕開始設計，把視窗慢慢拉寬，在版面開始「看起來不對」的位置加上斷點。手機型號每年都在變，依內容訂斷點才不會一換新機就跑版。

web.dev 也提到，閱讀舒適的行寬大約是英文 70–80 個字元。中文沒有完全對應的數字，但原則相同：大螢幕上文章欄寬不要無限延伸，一行字太長，眼睛換行時容易看錯行。

4. 依輸入方式調整，而不只是依寬度

同樣是 1024 像素寬，可能是平板（手指點）也可能是小筆電（滑鼠點）。CSS 的 hover、pointer 媒體查詢可以判斷裝置是否支援滑鼠懸停。這很重要，因為觸控螢幕沒有「滑過去」這個動作，只靠 hover 才會展開的選單，在手機上就等於不存在。

手指不是滑鼠：觸控目標尺寸

手機版最常聽到的抱怨是「按不到」或「按錯」。幾份權威文件對觸控目標的建議如下：

來源建議備註
web.dev〈Accessible tap targets〉約 48 × 48 像素，目標之間約 8 像素間距48 像素約等於 9 公釐，接近指腹大小
W3C WCAG 2.2 成功準則 2.5.8至少 24 × 24 CSS 像素（AA 級）有間距、行內連結等例外
Smashing Magazine 按鈕設計指南觸控目標至少 10 × 10 公釐引用 MIT Touch Lab 對指腹尺寸的研究

WCAG 的 24 像素是無障礙的「最低門檻」，web.dev 的 48 像素則是比較舒適的設計目標。實務上，主要按鈕（撥打電話、加 LINE、送出表單）我們建議以 48 像素為準；頁尾密密麻麻的文字連結，至少確保彼此有足夠間距。

台灣官網手機版最常見的 7 個錯誤

以下是我們接手改版專案時最常看到的問題，你可以拿自己的手機逐項檢查：

  • 電話號碼不能點：手機版的電話應該是可直接撥號的連結，地址最好能直接開啟 Google 地圖。
  • 浮動按鈕擋住內容：右下角同時疊了 LINE、Messenger、回到頂端、Cookie 提示，正文反而被蓋住。
  • 表格與價目表跑出螢幕：寬表格在手機上應改成卡片式或可水平捲動的容器，而不是讓整頁橫向捲動。
  • 字太小：內文在手機上建議至少 16 像素，iOS 的 Safari 對小於 16 像素的輸入欄位還會在點擊時自動放大頁面。
  • 桌機的大圖直接塞給手機：一張 3 MB 的橫幅圖，在行動網路下要載很久。應依螢幕提供不同尺寸的圖片。
  • 彈出視窗一進站就蓋滿螢幕：使用者還沒看到內容就要先找關閉按鈕。
  • 表單在手機上很難填：欄位太多、鍵盤類型不對（輸入電話卻跳出英文鍵盤），可參考表單設計指南。

怎麼測試 RWD 才算數？

  1. 用真機測：Chrome 開發者工具的裝置模擬很方便，但不會模擬手指大小與真實網速。至少要用一支 iPhone、一支 Android 手機實際操作。
  2. 用行動網路測：關掉 Wi-Fi，用 4G 打開首頁和主要服務頁，感受實際載入速度。
  3. 橫直向都轉一次：特別是有影片與圖庫的頁面。
  4. 放大到 200%：確認文字放大後版面不會重疊、不需要橫向捲動閱讀。
  5. 看 Search Console：觀察 Core Web Vitals 報表中行動裝置的數據，那是真實使用者的體驗。

常見問題

RWD 和另外做一個手機版網站，哪個比較好？

對絕大多數企業官網來說，RWD 比較好。Google 官方文件指出響應式設計最容易建置與維護；另外做 m. 網站需要維護兩套內容、設定雙向標註與轉址，任何一邊漏更新都可能影響索引。

手機版可以把部分內容收起來嗎？

可以。Google 表示把內容放在摺疊區塊或分頁標籤中是可以接受的，重點是內容仍然存在於手機版頁面上，而不是被刪除，且不需要使用者操作才從伺服器載入。

斷點要設幾個才夠？

沒有標準答案。web.dev 建議依內容決定：從小螢幕開始拉寬，版面開始不好看就加斷點。多數官網用 2–3 個主要斷點，再加幾個微調字級、間距的次要斷點就足夠。

舊網站不是 RWD，一定要整個重做嗎？

不一定，但通常重做比修補划算。若舊站是固定寬度排版，要改成 RWD 幾乎等於重寫前端；建議趁機一併檢討內容架構與轉換路徑，並做好轉址規劃以保住既有排名。

結語：在客人的手機上，你的網站才算真正上線

RWD 響應式設計不是一個「勾選了就好」的功能，而是一連串取捨：手機上先放什麼、按鈕多大、圖片多重、選單怎麼收。把行動優先當成內容策略來思考，桌機版通常也會跟著變得更清楚。

如果你的官網在手機上不好用、或正在規劃改版，網軍行銷的網站設計服務可以從內容架構到響應式介面一起規劃，並在上線前用真機逐頁驗收。

參考資料

相關服務

客製化網站設計傳遞品牌價值的精美網站
標籤：
網軍行銷
網軍行銷編輯部

網軍行銷整合數位資源、創意驅動行銷，為中小企業提供網路整合行銷與品牌解決方案。

延伸閱讀

想讓品牌被更多人看見？

告訴我們你的目標，專案經理會在一個工作天內回覆，提供免費行銷建議。

LINE 免費諮詢
LINE 諮詢申請官網補助專案
免費諮詢