RWD AWD 以及 Mobile First Design

大家可能比較常聽到的是 RWD AWD ，但你知道現在 Mobile First Design 才是大勢所趨嗎。
今天就帶大家來了解一下吧～

RWD：

響應式網頁設計（ Responsive Web Design），就是「同一個網址可同時出現手機、平板、桌機的網站的設計方法」，RWD 會隨著裝置尺寸自動放大縮小網站尺寸，且即便頁面排版不相同他們讀取的也是相同的 CSS。

AWD：

自適應網頁設計（Adaptive Web Design），AWD 跟 RWD 一樣都是「以同一個網址同時不同裝置尺寸的網站設計方法」，不過 AWD 並不會隨著視窗拉動時縮放，因為 AWD 是會針對不同裝置尺寸有不同的 CSS。

分析一下優缺吧

AWD
優點：

1. 縮減手機版顯示：當內容多時因為 AWD 讀取不同css所以可以在手機版時縮減頁面顯示
2. 更深入使用者體驗：針對手機使用者做內容調整與優化，不過近年來RWD的優化，這個優勢已經不太明顯了
3. 效能：RWD 如果沒特別注意，在桌機版與手機版都使用了相同圖片或是使用框架工具時有太多不必要程式碼，就會導致載入較慢

缺點：

1. 維護成本較高，畢竟要寫兩套(或以上)的css，開發時長也較長

RWD
優點：

1. 開發時間較短，其實有著優點加上近年來，現成的 RWD 框架開發工具越來越多，所以大部分的網站開發其實也都是採用 RWD。

而什麼是 Mobile First Design 呢？

Mobile First 顧名思義就是從手機端開始產品設計，然後擴展其功能，打造平板或桌面版本。
在人手一機的現在是不是用桌機逛網購的人反而是少數了呢，且隨著 Social media 的發展，許多消費者在手機上滑到就會跟隨廣告連結直接下單了。

行動優先設計也就是內容優先，太多資訊反而會使消費者分散注意力，所以手機版留下的資訊會比桌機版更精簡。

參考網站
https://tenten.co/learning/mobile-first-design/