Responsive Web Design (RWD) 一般翻譯成「響應式網站設計」，指的是網站在不同裝置上，隨裝置螢幕視窗寬窄的不同改變網頁的佈局，目的是減少使用者縮放、平移和捲動等操作行為。
RWD 除了提供使用者友善的網站環境，對網站設計師與前端工程師而言，這種技術因不再需要區分不同裝置的設計，使得後台維護變得容易，隨各式裝置的湧現，RWD已成為網站開發的趨勢。
最能夠完美解釋 RWD 的金句就是 “Content is like water.”（內容就像水，當水進到不同容器時，會隨著容器的形狀而改變，而 RWD 則是讓內容能隨著裝置做出調整。因此，製作 RWD 的技術也稱為 「液態排版 (Liquid Layout)」。
這次杏仁餅乾小編整理了 10 rules of best practice for responsive design 裡的要訣，再和大家分享兩個專門收錄 RWD 的網站！
1. 伸縮自如的設計：大小兼顧
當你需要設計一個網頁的介面時，你應該要 「先思考它在移動裝置上的呈現方式」：先將網頁的所有內容劃分成不同區塊，並依重要性做排序，再將它們按照順序安排到尺寸最小的介面上。換句話說，最小的介面保留的是最核心的設計。
當你從最小的介面佈局到最大的介面時（如平板或桌面），再一步步為你的設計加上一些次要的元素（如下圖所示）。
儘管手機介面的優化具有相當高的重要性，也不代表你應該忽略寬視窗上的介面，並記得市面上不斷有新的裝置被推出，趨勢與使用者的習慣皆會改變，當心顧此失彼！
2. 思考情境脈絡：有捨有得
RWD 網站不只是把同一個內容塞進不同的介面大小而已。在視窗變化的過程中，別忘了網站內容在不同介面上實際的呈現，例如：你的文章有可能會因為區塊的變動而出現上下文不連貫的情形。當內容改變時，網站的佈局方式也必須隨之調整
從多欄位的寬視窗轉變至單欄位的窄視窗是 RWD 典型的特徵，而當空間有限時，你必須減少非至關重要的內容。
就像在大掃除一樣，如果你還在思考你是否會需要某個物品，代表你可以將它先放入丟棄堆裡了；在響應式設計裡，若你仍試圖找到理由來說明為何你需要某個元素，那麼你可以考慮移除這個元素。
專注於真正重要的內容與功能，積極地減少無關緊要的元素吧！
3. 網站優化
掌握前兩點核心後，該如何讓網站更優質呢？
3.1 圖片品質 v.s. 網頁下載速度
隨網站設計趨勢走向巨大的、螢幕延伸的圖像 ，高畫質的影像是抓住使用者目光的重要方式，卻也影響了網頁下載的速度。設計師必須在豐富的視覺效果與整體頁面呈現間找到平衡。
再次強調，積極地移除不必要的元素，優化保留下來的圖像。
3.2 善用 icons
以適當的 icons 取代冗長的文字，用在螢幕空間有限的裝置上尤其有幫助。
而 icon 通常以 SVG 的檔案格式上傳，此種可縮放向量圖形（Scalable Vector Graphics）在放大縮小的過程中皆不會失真，且檔案大小也不因圖像大小而改變，是 RWD 的好選擇。
3.3 留意字體大小
在字體安排上，你必須確認你的設計讓網站在大、中、小裝置上，皆能維持想營造的整體感覺。
例如細體字在文字夠大時，能夠清楚地閱讀，但縮小時卻可能不夠清晰，如此會降低網站的易讀性。在必須使用細體字時，請確認文字在最小尺寸時，仍能容易地閱讀，若否，則可考慮更換別種適當的字體。
3.4 考慮輸入方式
不同裝置的使用者操作網站方式差異，如桌機或筆電使用者利用滑鼠與鍵盤操作網站，手機、平板使用者則是以手指來點擊輸入，因此按鈕或表格的設計上必須注意使用者是否能順利、有效地點擊。
最後，別忘了在各種大小的裝置上，實際測試你的 RWD ！
現在來為大家介紹兩個蒐集 RWD 的網站：
RWD JP 專門蒐集日本優秀的響應式網站，每日會更新 2–3 個網站（但有時也會休息一下 😉）一起來看看吧！
- 進到首頁馬上就能看見許多 RWD 在不同視窗大小上的呈現，你可以點擊圖片進入網站，實際拖拉視窗，體驗一下這些 RWD 的精湛之處！
2. 可以從不同的分類（種類、顏色、網頁技術、風格）找你想看的網站
- Media Queries 蒐集了歐美的 RWD 網站，除了英文外，還有義大利、德國、法國，甚至芬蘭、捷克的網站，讓你有機會一虧異國的設計。
2. 雖然不像 RWD JP 有分類瀏覽的功能，但可以選擇「受歡迎程度」來排列順序，看看哪些設計最令人喜愛吧！
以上就是杏仁餅乾小編的筆記啦！
