先講一個你我天天都在做的動作。你在路上想找一家水電行、想確認一家店幾點打烊、想比較兩三家工程公司的服務項目，你會怎麼做？十之八九是掏出手機，隨手搜一下，點進搜尋結果第一頁的某個網站。這時候，如果那個網站在你手機上字小到要瞇眼、按鈕小到得放大兩次才點得到、表格還要左右滑才看得完，說真的，你會停留超過五秒嗎？多數人早就退出去，點下一家了。
這就是為什麼我們跟客戶談官網，第一件事往往不是聊配色、不是聊要放幾張漂亮照片，而是先確認一件很實際的事：這個網站在手機上到底好不好用。RWD 響應式設計聽起來像個冷冰冰的技術名詞，可是它背後其實是一個很現實的生意問題，也就是你有沒有把服務，做給那位「正拿著手機找上門」的客戶。
先看一個殘酷的數字：手機早就是主螢幕
速度、轉換率與維護成本的改善幅度會受網站內容、流量來源、裝置與技術架構影響。先量目前的 Core Web Vitals、錯誤率與轉換漏斗，變更後用同一期間及相同口徑比較，不拿未附樣本與日期的比例當保證。
這個數字的意義很直接。當你只把電腦版做得漂亮、手機版隨便縮一縮，你等於是把十個訪客裡的七個，晾在一個難用的畫面前面。你花錢買的廣告、辛苦累積的口碑，好不容易把人帶到門口了，卻在最後一哩路把他們絆倒。
RWD 到底在做什麼：三個技術支柱
先把名詞講清楚。RWD 全名 Responsive Web Design，響應式網頁設計，這個概念是設計師 Ethan Marcotte 在 2010 年正式提出的，核心精神只有一句話：與其為每一種螢幕各做一個網站，不如讓「同一個網站」自己去適應各種螢幕。要做到這件事，工程上其實靠三根支柱撐起來。
第一是彈性網格（fluid grid）。傳統做法會把版面寬度寫死，比如「這一欄就是 960 像素」。響應式改用百分比或彈性單位來描述寬度，讓每一欄隨著螢幕寬窄自動伸縮。螢幕變窄，多欄就自動收成單欄，內容不會被硬生生切掉。
第二是彈性圖片（flexible images）。圖片不再固定尺寸，而是設定成「最寬不超過所在的容器」，該縮就縮；更講究一點的做法還會依裝置提供不同解析度的圖檔，手機就載小圖，省流量也省時間。
第三是媒體查詢（media queries）。這是 CSS 的一個機制，能偵測目前的螢幕寬度，在不同的「斷點」套用不同的排版規則。比方說寬度小於某個門檻時，把橫向選單改成漢堡選單、把並排的三欄改成上下堆疊。再搭配一行關鍵的 viewport 設定，明白告訴瀏覽器「請用裝置的實際寬度來渲染，別假裝自己是台桌機」，整個響應式的地基才算打穩。少了那行 viewport，再好的排版在手機上也會被縮成一團看不清。
「另外做一個手機版」為什麼是條歪路
有些人會問：那我乾脆電腦版、手機版各做一套，不是更能各自最佳化嗎？聽起來合理，實務上卻是個維護惡夢。兩套網站意味著兩份程式碼、兩份內容。你今天改了一則公告、換了一支電話，就得記得兩邊都改；只要一忙，很容易變成電腦版改了、手機版忘了改，客戶看到的資訊互相打架。
更麻煩的是搜尋引擎那一關。兩套網址（常見的是 m. 開頭的獨立手機站）會帶來重複內容、正規網址標註、跳轉延遲這一連串問題：使用者從搜尋結果點進來，還要先被轉一次址，白白多等零點幾秒；反向連結和累積的權重，也被拆散在兩個網域上。正因為這些坑，連 Google 官方都明講，響應式設計是他們建議的首選做法。一個網址、一份內容，跨語言、結構化資料、速度優化全都好處理，維護成本也最低。與其養兩個孩子還要煩惱他們長得不一樣，不如把力氣集中在把一個網站做到位。
Google 現在「只看你的手機版」
這一段對做生意的人特別重要，因為它直接關係到客戶找不找得到你。過去搜尋引擎是拿網站的電腦版內容來理解與排名，但這件事已經徹底翻轉。到了 2024 年 7 月，行動優先索引（mobile-first indexing）全面完成，如今全世界的網站，都是由「模擬手機的爬蟲」來抓取，並且以你的手機版內容，作為收錄、理解、排名的主要依據。
白話講就是：如果你的手機版為了「看起來乾淨」而藏掉了某些文字、某些說明、某些商品，那些被藏起來的內容，在搜尋引擎眼中幾乎等於不存在，排名自然吃虧。手機版不再是電腦版的附屬品，它就是你在搜尋引擎面前的本體。
三個你逃不掉的體驗分數：Core Web Vitals
搜尋引擎不只看你有沒有內容，還會用一組叫做 Core Web Vitals（核心網頁指標）的量化標準，來評斷實際使用體驗好不好，而且主要看的是手機上的真實數據。這三個指標，值得每位老闆記在心裡：
- LCP（最大內容繪製）談的是載入速度。主要內容多快出現在畫面上，好的門檻是 2.5 秒以內。
- INP（互動到下一次繪製）談的是反應速度。你點下去之後，畫面多快給出回應，好的門檻是 200 毫秒以內。這個指標在 2024 年 3 月正式取代了舊的 FID，標準又更嚴了一階。
- CLS（累積版面位移）談的是畫面穩不穩。頁面載入時內容會不會亂跳，好的門檻是 0.1 以下。那種你正要按按鈕、圖片卻突然插進來把版面頂開、害你點錯的惱人經驗，就是 CLS 太高。
而且判定標準相當硬：要有七成五以上的訪客都落在「好」的區間，這一項才算過關。做響應式時如果沒有替圖片預留尺寸、沒有控制好字型與各種資源的載入順序，這三個分數很容易在手機上全盤皆墨。
慢一秒，客戶就流失一批
手機的處境又比電腦更嚴苛。使用者常常是在移動中、用著時快時慢的行動網路、拿著運算力有限的裝置在看你的網站。一個沒有為手機瘦身、硬把整套電腦版素材塞過來的頁面，在訊號差一點的地方可能要等上好幾秒。這幾秒，往往就是成交與流失的分水嶺。響應式設計做得好，會順手把「手機只載該載的東西」也一起處理掉，這對速度的幫助是實質的，不是喊口號。
手指不是滑鼠：觸控體驗的工程細節
電腦用滑鼠，游標細得像針，點哪裡是哪裡；手機用手指，指腹又寬又鈍，還常常是單手、用大拇指在操作。這個差別，逼著手機版必須用一套完全不同的邏輯去設計。幾個最容易被忽略、卻最傷體驗的細節：
- 可點區域要夠大。國際無障礙標準 WCAG 把觸控目標的最小尺寸明訂為門檻，主流的行動平台介面準則更建議做到約 44 到 48 像素見方。太小的按鈕，誤觸率會明顯升高，客戶一連點錯幾次就火大走人了。
- 輸入欄位的字別小於 16 像素。在部分手機上，欄位文字太小，一點下去畫面會自動放大，還得手動縮回來，填個表單像在跟網站拔河，聯絡表單的完成率就這樣被拖垮。
- 別依賴滑鼠的「懸停」效果。很多電腦版選單要把游標移上去才展開，但手指沒有「移上去」這個動作。若手機版照抄不誤，客戶會卡在一個永遠打不開的選單前面。
- 把重要動作放在拇指搆得到的地方。單手持機時，大拇指能輕鬆點到的是螢幕中下段。把「打電話」「加 LINE」這類關鍵按鈕放在順手的位置，客戶的每一步都省力，轉換自然更順。
真正好的 RWD 是「重排資訊」，不是「縮小畫面」
講到這裡，要點破一個最常見的誤會：很多人以為 RWD 就是把電腦版等比例縮小，硬塞進手機。不是的。真正到位的響應式，是針對手機重新安排資訊的優先順序。同樣的內容，在電腦上可以鋪陳得豐富、多欄並置；到了手機，就要狠下心判斷「客戶此刻最想做什麼」，把那件事擺到第一眼。
拿工程、維修、服務這類生意來說，客戶用手機找上門，通常只想做兩件事：打給你、還有看你在哪。好的手機版會把電話、LINE、地址、營業時間，放在一進來最容易點到的位置，做成一鍵撥號、一鍵導航，讓人三秒內就能聯絡上，而不是把聯絡方式埋在落落長的內容最底下。這條「聯絡動線」設計得好不好，往往就決定了你的官網到底是一張漂亮的名片，還是一台真的會帶進來電與詢問的機器。
幾個常見誤區，順便給你一份自我檢查
最後整理幾個我們實務上最常看到的出問題，你也可以現在就拿著手機，對自己的官網做一輪體檢：
- 用手機打開首頁，在不放大的情況下，內文讀起來舒服嗎？主要按鈕點得準嗎？
- 想找你的電話和地址，要花幾秒？需不需要一直往下捲才看得到？
- 頁面載入時，內容會不會亂跳、圖片會不會延遲很久才慢慢冒出來？
- 選單、表單、地圖在手機上都能正常操作嗎，還是有哪個功能點了沒反應？
- 橫著拿手機、或換一支舊一點的機型，畫面會不會就整個跑掉了？
只要其中有兩三項讓你猶豫，那大概就是該認真處理 RWD 的時候了。官網不是做完上線就沒事，它是你二十四小時不打烊的業務員；讓它在每一種螢幕上都好用，才對得起你花在行銷上的每一分錢。廷皓的網站與程式開發，一律把 RWD 當作最低標準，並且把上面談到的速度、體驗、聯絡動線這些細節，一項一項設計進去。我們服務高雄、台南、屏東與整個南台灣，想改版舊官網、或從零打造一個新網站，都歡迎跟我們聊聊，電話 07-363-0802。
