網頁設計師：「你要不要考慮用RWD設計？」，客戶：「什麼滴？」
如果這對話的情境曾經出現，恭喜囉，你對RWD可能不再陌生。然而，很多企業主或非技術人員，在網站委外開發的過程中可能要經歷類似的尷尬。在此，我們以白話文來拆解RWD的奧秘。
什麼是RWD？(What)
RWD (Responsive Web Design)翻譯成「回應式網頁設計」，或稱「響應式網頁設計」，是一種漸趨流行的網頁設計技巧(也是一種技術)，使用此技術可以讓所設計的網頁，在不同的顯示設備(電腦桌機、手機、平板等)的瀏覽器中呈現較佳的視覺效果。
例如，一個一列十欄的表格(左右呈現)，在桌機螢幕上看起來無可挑剔，在手機上恐怕得用放大鏡來看。但是，如果表格在呈現時可以因螢幕大小，自動改為一欄十列(上下呈現)，這樣除了有更好的視覺效果，使用者滑動起來也較自然與順暢。所以，RWD或許翻譯成「自調式網頁設計」更能達意。
為何要用RWD設計？(Why)
不同的消費者偏好使用不同的設備來上網或擷取網路資訊，上班族偏好桌機、手機，美編或文字工作者偏好平板等。消費者在上網過程中最大的差異，是顯示設備的尺寸與解析度的不同。因此，網頁內容(圖片、文字、表格等)在不同設備中的呈現方式，就必須按照銀幕的大小來動態的調整其擺放位置、順序、呈現大小等，好讓使用者可以有最佳的視覺效果。使用RWD設計可以達到所謂「One size fits all」(一魚多吃)的網頁設計概念。
何時要用RWD設計？(When)
通常一個公司的網站內容，要能夠支援不同的上網設備，至少是桌機、手機、平板的支援都要具備，因此使用RWD於網頁設計更是當今不可或缺的考量。在設計討論的過程中，不妨向設計師提出各種圖片、文字、表格組合的期望呈現方式，特別是在手機或平板上的視覺效果需求。
如何做RWD設計？(How)
一般的網頁設計都是使用HTML、CSS等技術來呈現期望的內容。不同的技術隨時間變遷，都有其進階版，如同iPhone已經有iPhone13了。在設計RWD網頁時，至少要使用HTML5、CSS3以上的版本才能完成。網頁設計團隊逾熟悉這些技術的裡裡外外，逾能夠有週詳的設計考量和最佳的視覺呈現效果。
使用RWD設計的好處
- 一魚多吃 – 一個版本的網頁，適用於各種應用設備
- 自動調適 – 網頁內容因設備大小，自動調適呈現方式
- 最佳視覺呈現 – 因應使用設備與瀏覽器大小的自動調適，帶出最佳的視覺呈現
使用RWD設計的好處與效益多多，下一次有設計師問到：「你要不要考慮用RWD設計？」，你可以說「用HTML5跟CSS3嗎？」。
