RWD 做得好不好？網頁設計公司的 5 個關鍵指標

香港有超過七成的官網瀏覽來自手機，但我們替客戶做網站體檢時，最常看到的仍是「把桌機版等比縮小」的假響應式：字小到要兩指放大、按鈕擠在一起、橫向捲軸莫名其妙跑出來。對一間專業的網頁設計公司而言，RWD（Responsive Web Design，響應式網頁設計）從來不是交付前的加分題，而是從資訊架構階段就該寫進規格的基本功。本文整理我們在驗收會議上實際逐項核對的 5 個關鍵指標，並附一張可直接套用的檢核表。無論你是要簽收專案，還是正在比較不同網頁設計公司的報價，都能用同一套語言把「手機版看起來還可以」變成「驗得過、說得清」。

一、為什麼 2026 年的 RWD 已是基本功

Google 早已全面採取行動優先索引（Mobile-first Indexing），也就是以行動版頁面作為抓取、索引與排名的主要依據。換句話說，手機上被隱藏、被裁切、載不出來的內容，在搜尋引擎眼中很可能等於不存在。這讓 RWD 從「設計美感」直接變成 SEO優化 的技術前提。

另一方面，香港用戶通勤時間長、跨平台切換頻繁，同一位訪客可能先在手機搜到服務頁、晚上用平板比較方案、最後在桌機填寫查詢表單。三種裝置若呈現三種不同的資訊層級與按鈕位置，流失的不是單次點擊，而是整段決策路徑。這也是我們把 RWD 列進每個專案驗收清單的原因。

二、網頁設計公司會核對的 5 個關鍵指標

1. 流體格線與斷點：是「重排」，不是「縮小」

真正的 RWD 用百分比或 fr 單位的流體格線，讓欄位隨容器寬度重新排列；桌機三欄到了手機應該變單欄，而不是三欄一起變窄。斷點也不該只照抄 576 / 768 / 1024 這些數字，而要看內容在哪個寬度開始「擠」——由內容決定斷點，才不會日後新增一個區塊就破版。

快速檢查：把瀏覽器視窗從 1440px 慢慢拖到 320px，全程不該出現水平捲軸，也不該在某個寬度突然跳版。

2. 觸控目標與間距：手指不是滑鼠

Apple 與 Material Design 的建議都在 44–48px 以上，實務上我們要求主要按鈕至少 44×44px、相鄰可點元素保留 8px 以上間距。另外兩個常被漏掉的細節：只靠 hover 才展開的選單，在觸控裝置等於不存在；表單欄位要搭配正確的 input type（email、tel、number），手機才會跳出對應鍵盤。這些都不是視覺問題，是轉換率問題。

3. 圖片、字級與可讀性

圖片要用 srcset／sizes 或 讓瀏覽器自己選尺寸，圖示改用 SVG，並為手機版做 art direction——桌機的橫幅英雄圖直接裁成直式，主角常常剛好被切掉。內文建議至少 16px、行高 1.5–1.7，文字與背景對比度達 WCAG 4.5:1。遇到寬表格，正確做法是區塊內可橫向捲動並提示使用者，而不是把八個欄位硬塞進 375px。

4. 效能：別讓手機扛桌機的重量

RWD 若只是用 CSS 把桌機大圖藏起來，手機仍然把 3MB 下載完了。搭配延遲載入、預留圖片與廣告區塊尺寸避免版面位移，並依螢幕密度挑圖，才能讓「看得到」同時「等得起」。這一部分與 Core Web Vitals 密切相關，建議與速度優化一併驗收。

5. SEO 與結構一致性：單一網址、單份內容

同一個 URL 服務所有裝置，是最單純也最穩定的做法。避免另外開一個 m. 子網域、維護兩套內容，否則 canonical、hreflang、結構化資料與內部連結都要跟著做雙份，任何一處不同步就會產生重複內容或索引落差。標題、H 標籤、meta 描述與結構化資料不應因裝置而異；被「收進漢堡選單」的內容依然要存在於 HTML 中。這裡正是 SEO優化 與網頁設計最需要同桌確認的介面。

驗收提醒： 把手機、平板、桌機並排打開同一個網址，用同一個任務走一遍，例如「找到服務頁、讀完方案、提交查詢表單」。只要其中一台需要額外手勢、額外捲動或多一個步驟，這個 RWD 就還沒過關。

三、一張可直接套用的 RWD 驗收檢核表

四、三個最常踩的誤區

1. 「有手機版」不等於 RWD。 獨立網址、兩套模板、兩份內容，是維護成本的開始，也是排名訊號分散的開始。
2. 只測一台手機。 小螢幕 Android、平板橫向、系統字級放大到 200%、以及瀏覽器縮放，都是破版的高發區。
3. 把斷點寫死在設計稿。 視覺稿畫了三種尺寸就以為完工，但真實內容會成長；沒有元件庫與流體規則，改一次文案就可能重新破版。

五、專業網頁設計公司的 RWD 交付流程

1. 盤點流量：先看 GA 與 Search Console 的裝置比例，決定優先把資源放在哪個寬度區間。
2. 決定內容優先順序：行動版先回答「這一頁要讓使用者完成什麼」，再取捨要保留的區塊，而不是事後刪東西。
3. 建立元件與斷點規則：導覽、卡片、表格、表單各定義伸縮行為，讓版面具備可延展性。
4. 開發加真機測試：模擬器只能抓語法，觸控延遲、字體渲染、安全區域（瀏海）都要上實機。
5. 上線後監測迭代：持續看裝置別的跳出率、表單完成率與搜尋曝光變化，把 RWD 當成持續優化項目。

結語：把「看得到」變成「驗得過」

響應式設計的價值不在於「手機也開得到」，而在於每個裝置都能用同樣順的路徑完成同一件事。對正在評估改版或新官網的企業來說，把上面這張檢核表放進合約附件，比反覆確認「有沒有做手機版」更有效率。

如果貴司官網還停留在縮小版，歡迎把網址交給 HK WEBER 做一次免費 RWD 體檢，我們會附上逐項結果與改善優先順序，並同步檢視對 SEO優化 的影響。前往 HK WEBER 香港網頁設計公司 即可聯絡我們。