很多人以為RWD網頁製作是工程師的事，切版時「順手」讓版面會跟著螢幕縮放就好。實際跑過幾個專案就會發現，手機版出問題的地方，大多不在程式本身，而在交接的縫隙裡：設計師只畫了桌機版，工程師只好自己猜手機版長什麼樣；攝影交來的照片比例跟版位對不上；網站上線半年後，編輯從文書軟體貼了一張表格進後台，整頁就被撐開。這篇把響應式網頁製作當成一個多人接力的專案來看，談開案時要先講定什麼、設計與工程怎麼交接、內容素材怎麼準備、上線後的編輯與改版又該由誰把關。斷點怎麼訂、圖片技術怎麼處理這類實作細節，不在這篇的範圍。
開案時先講定「支援範圍」與「頁面分級」
第一件要寫進專案文件的，是這個網站要支援到什麼程度。哪些裝置類型要提供完整體驗、哪些只要能正常瀏覽與操作即可；手機橫放要不要顧；從通訊軟體點開連結時使用的內建瀏覽器要不要測；大尺寸螢幕上版面要不要特別處理。這些不先講定，後面測試就沒有依據，驗收時也容易各說各話。
第二件是頁面分級。網站裡的頁面並不是一樣重要，可以粗分成三種：版型頁，也就是同一個版型會套用到很多頁的產品內頁、文章頁、案例頁；關鍵頁，例如首頁、詢價或聯絡頁；以及其餘的一般頁。版型頁與關鍵頁值得在每個主要尺寸都有設計稿，因為它們出錯的影響面最大；一般頁則可以依照共用的元件規則處理，不必逐頁逐尺寸繪製。頁面分級決定了設計的工作量，也決定了報價與時程，越早講清楚，後面越少爭議。
行動優先還是桌機優先：從分工與工作量來取捨
行動優先與桌機優先各有擁護者，但在專案裡，比理念更實際的問題是：哪一個尺寸擁有「定稿權」，也就是先給業主看、先被簽核的那一版。如果網站的詢問大多來自手機，或內容很多、需要先逼自己排出優先順序，讓手機版先定稿比較合理；如果客戶多半是企業採購、決策者習慣在電腦前審稿，桌機版先定稿也無可厚非，只是要提防手機版被當成最後才縮一縮的附屬品。
不論哪一端先定稿，另一端都應該由同一位設計師接著畫完，至少涵蓋版型頁與關鍵頁，而不是留給工程師自行推測。兩個設計尺寸之間的中間寬度，通常不會另外出稿，這段由工程師依照元件規則實作，但要排一個「設計走查」的時段：實作完成後，設計師拿真實的手機與平板逐頁看過，把不對勁的地方列出來，再交給業主審閱。這個步驟常被時程擠掉，結果業主成了第一個發現問題的人。
設計交給工程之前，要對齊的是「行為」不是尺寸
設計稿交接時，最容易漏掉的不是某個間距的數值，而是元件在空間變窄時要怎麼表現。一排四張卡片到了窄螢幕，是改成單欄往下排、改成左右滑動，還是只保留兩張；側欄資訊要移到內文下方，還是收合成可以點開的區塊。這些決定如果沒有寫下來，工程師只能照自己的習慣做，結果未必符合設計意圖。比較好的做法是整理一份「元件行為表」，由專案窗口保管，每次調整都更新在同一份文件上。
- 閱讀順序：窄螢幕堆疊後的先後順序，是否與程式碼裡的順序一致；只在視覺上調換位置，使用鍵盤或螢幕閱讀器的人會讀到不同的順序
- 收合而不刪除：桌機上有、手機上直接拿掉的內容，手機使用者就看不到，搜尋引擎以行動版為主要依據時也可能讀不到，原則上寧可收合也不要刪除
- 滑鼠移過才出現的資訊：觸控裝置沒有這個動作，要決定改成點擊展開還是直接顯示
- 固定元素：頁首、浮動按鈕在手機上是否固定在畫面上，會不會擋住內容
- 互動元件的預設狀態：頁籤、輪播、手風琴在不同寬度下一開始是展開還是收起
工程師如果發現某個行為做不到或代價太高，應該提出替代方案，由設計與業主一起決定，而不是自己默默改掉。
內容素材怎麼準備，才不會在手機上走樣
圖片是第一個要處理的素材。同一張照片在寬螢幕可能是橫幅，在手機上卻只剩中間一塊，所以拍攝與挑圖時就要知道每個版位在不同寬度下大概會怎麼裁切，主體周圍要預留空間，不要讓人物的頭或產品的邊緣剛好貼齊畫面。另一個常見的錯誤，是把標題、優惠說明直接做在橫幅圖片裡。這樣的圖到了手機上，字會縮到看不清楚，也無法跟著螢幕重新排列，更沒辦法被搜尋引擎讀取；文字應該做成網頁上的文字，疊在圖片上或放在旁邊。
文案也要為小螢幕準備。手機的第一個畫面通常只容得下標題與一兩行說明，最重要的訊息要放在最前面，而不是鋪陳三段之後才說重點。卡片式的摘要最好訂出字數範圍，否則有的卡片兩行、有的卡片八行，在窄螢幕上會高低不齊；按鈕上的文字也要夠短，避免被迫斷成兩行。
表格與影片同樣需要內容負責人做決定。一張十幾欄的規格表，在手機上哪幾欄是買家一定要看到的，只有懂業務的人能判斷，工程師無從得知；資訊量真的很大時，可以在頁面上保留關鍵欄位，完整版另外提供檔案下載。影片則要先想好直式或橫式，並準備字幕或文字說明，因為很多人在手機上是關掉聲音觀看的。
一張分工表：誰對手機版的哪一塊負責
RWD網頁製作的問題之所以難追，是因為手機版的狀況常常落在兩個角色之間，每個人都以為是別人的事。專案一開始就把責任寫清楚，出問題時才知道該找誰。
- 業主或專案窗口：決定支援範圍與頁面分級、確認手機版的內容優先順序，並由真正有決定權的人拿手機簽核，而不是只看截圖
- 設計師：版型頁與關鍵頁的兩端設計稿、元件行為說明、實作完成後的設計走查
- 前端工程師：實作與中間寬度的處理、做不到時提出替代方案、留下跨裝置測試紀錄
- 內容與攝影：依版位規格提供素材、控制文案長度、決定表格在手機上保留哪些欄位
- 後台編輯：依照上稿規格更新內容，發布前先用手機預覽
上線後交給編輯：後台更新最常把手機版弄壞的操作
不少網站上線時手機版一切正常，幾個月後卻開始出現破版，原因往往不是程式壞了，而是內容更新的方式。常見的情況包括：從文書軟體直接貼上文字，把固定的字型與寬度一起帶進來；在內文插入設定了固定寬度的表格；用連續空行或全形空白來「推」出想要的位置；上傳原始尺寸的大照片或比例完全不同的圖；貼上外部服務提供的地圖、表單或影片嵌入碼，而那段程式碼本身就寫死了寬度。
這些狀況與其事後一一修補，不如在製作階段就預先防範：編輯器插入的表格，預設包在能於窄螢幕左右滑動的外框裡；外部嵌入碼統一放進會隨寬度縮放的容器；再附上一頁「上稿規格」，寫明每個版位的圖片比例、標題與摘要的建議長度，以及哪些操作會讓手機版出問題。最後一個習慣最省事也最有效：發布之前，用手機把那一頁從頭滑到尾看一次。
改版與新增功能時，回歸測試怎麼排
RWD網頁製作做出來的樣式，通常是全站共用的，改一個元件的寬度，可能讓另一個版型在某個尺寸下跑掉，所以每次改動都要做回歸測試，也就是確認原本正常的地方沒有被改壞。實務上可以維護一份「代表頁清單」，每一種版型挑一頁，再加上首頁與詢價頁，每次改動之後，在手機、平板、桌機三種寬度把這些頁面看一遍。有些團隊會搭配自動截圖比對工具，讓改動前後的差異一目了然。
回歸測試也要有明確的負責人。實作改動的工程師做第一輪，專案窗口或業主再用自己的手機實際走一次最重要的轉換路徑，例如填寫詢價表單並確認收到通知、點擊撥號按鈕。除了設計上的改版，系統、佈景主題或外掛更新之後也應該照同一份清單檢查一次，並把測試日期與看過的尺寸記錄下來，日後追問題才有線索。
常見問題
小型網站也需要每一頁都畫手機版設計稿嗎？不需要。依照前面的頁面分級，版型頁與關鍵頁建議有手機與桌機兩端的設計，其餘頁面只要共用元件的行為規則講清楚，工程師就能依規則實作，再透過設計走查補強即可。
手上只有桌機版設計稿，可以請工程師自己做手機版嗎？可以做，但要有心理準備，手機版的內容順序與取捨會由工程師代為決定，未必符合行銷上的優先順序。比較穩當的方式，是至少請設計師補上關鍵頁的手機版，並把元件行為表整理出來。
響應式網頁製作會比只做桌機版多出哪些工作？主要是兩端設計稿、元件行為的溝通、設計走查、跨裝置測試與內容規格整理。實際增加多少取決於版型數量與互動元件的複雜度，建議請製作團隊把這些項目分開列進時程。
網站上線後手機版常出狀況，該找設計還是工程？先判斷問題是出在內容還是樣式。如果只發生在某幾篇新內容，多半是上稿方式造成的，調整上稿規格即可；如果同一個版型的所有頁面都有問題，才是樣式或程式需要修正。
如果你正準備啟動RWD網頁製作，或是網站已經上線、手機版卻時好時壞，不妨先從現況看起。創昇SEO提供免費網站健檢，會一併檢視行動版的呈現、頁面結構與基礎設定，讓你知道問題比較可能出在哪一個環節。
我們也提供全台免費到府解說，把檢視結果與分工上可以調整的地方當面說明，不論之後由誰接手製作或維護，你手上都會有一份清楚的依據。