為什麼網頁跟設計稿不一樣！是跑版嗎？論響應式的重要性

響應式是什麼？

你常常看到的 RWD（Responsive Web Design）就是響應式網頁的意思 ，網頁能因應RWD在各個不同裝置、瀏覽器都能正常瀏覽，網頁公司在與你洽談合約時，通常可以看到「含RWD」等文字，不做RWD的公司已經看不太到了，除非客戶大膽要求說不！不然其實不寫RWD對於前端也是相當痛苦（笑），而製作網頁視覺稿時，設計師也需含有響應式概念，才能在團隊中適時傳達建議與提供好的設計。

響應式是潮流嗎？

現今不做響應式的還是大有人在，而當使用手機瀏覽時，就會看到大大的跑版，例如網頁內容變很小，需要不斷放大、移動位置來查看，光是這一點，你可以想像得出來下一步就是關閉網頁，而這樣的狀況在比較舊版的網頁才會發生，或N年前所製作的網站一直未更新維護等原因。但響應式不算潮流，而是逐漸成為必需品，人隨著社會進步，也更新了思想與習慣。

為什麼需要響應式？

操作是最直接的感官體驗，你可以理解正在瀏覽的網頁好不好用，也能影響你願不願意繼續關注該網頁，像是瀏覽正過癮時，想買個包包，選擇了信用卡付款，結果在填寫信用卡資訊時，發現沒有響應式⋯但要寫超級多資訊，就會有 「好麻煩」 的念頭；或是在看藝術性質的網站，每張圖都大到不可思議，縮小畫面也不能一次看到；堪稱大魔王的表格，沒有響應式真的是往左滑到人生盡頭，還無法把表格看完⋯等，光是想像就感到可怕的瀏覽體驗。

給客戶方的你：

當網頁上線前，必須核對的一定有 網頁確認與設計稿是否相符合 ，如果可以理解「響應式」，那一定能理解網頁所呈現的樣子不一定100%與設計稿相同，但結構是必須一樣的！這邊所說的不一定100%相同，像是拿著電腦版的視覺稿核對手機版上的畫面、拿著尺對著螢幕丈量尺寸、顏色看起來疑似不太一樣等，這邊述說的範例不建議當作檢查的方式，那你可能會想那 怎樣才是跑版呢？

明顯的跑版範例：

1. 1製作方沒有做RWD，導致瀏覽手機版全部大跑掉
2. 2結構順序不同，例如先是幻燈片再來是商品介紹，結果所看到的為相反
3. 3404畫面（完全看不到網頁畫面，這不歸類在跑版，它是網站有問題）

發現跑版時步驟：

1. 1莫害怕莫慌亂，穩定自己的心
2. 2截圖跑版畫面（可以的話可標示再另外文字說明）
3. 3確認裝置尺寸，裝置資訊可提供給網頁公司更快聚焦
4. 4等待網頁公司修復
5. 5清快取檢查，完成

確認裝置尺寸網站 點我去

還沒製作網站的你，不知道該如何溝通嗎？點我去看 網頁籌備前必做的文章