RWD & AWD

前言

RWD 是一種相同內容，在不同頁面呈現相近外觀的技術；而 AWD 更先進：就是在不同的設備，顯示不同內容的技術。

我想起很久以前，某人講過的這句話。那時看了幾個網站的技術實作，發現大都是用用戶代理嗅探，不禁想到很多寫爛的用戶代理嗅探網站，所以覺得他說得不對。

一段時間後，我開始發現 flexbox 在 RWD 很好用、也開始發現某些人的 RWD 與我理解的 RWD 不一樣...之類的。我好像已經沒用當年 media query 很久了。

某次因為要用 CSS 切圖導致任務延誤後，我問了同事說什麼時候會用整張圖、什麼時候會用 CSS 配文字。

「這個啊——我考慮用圖或文字的重點、是PM有沒有要求文字改動。沒有的話，我會直接用圖。」<br /> 「喔？」<br /> 「我懂你考慮的點，所以我就說了：我們專案沒有考慮 SEO 這種事。所以大部分時候，我們只要整張圖就好，不需要文字加 CSS。也比較省事。你想得真的很多，甚至可以說有點太多。」

我回家時想了這件事——我認同 RWD 那種「在多個設備給予相同內容」的理念：這是我在第一次聽見 RWD 時，就想到的觀念。我同時也對那種只在某個設備、提供某種功能的事情感到惱火。

但很多網頁似乎把手機與電腦分開，理由是電腦與手機的功能差異過大。而我竟然認同了。我不禁回去查了資料，接著想把自己對這兩個東西的認知寫下來。

主文

從前從前，網際網路需要撥接上網、手機也只能發簡訊打電話、Wifi 還不知道在哪裡：只有我們認知的桌上電腦與筆記型電腦，可以連上網際網路。

但自從我們開始使用寬頻網路、手機也可以開始上網後，開始有網站在考慮一個問題：如何在不同的設備上呈現網頁內容？

這時 Flash 還在打壓住不如今天如此發達的 JavaScript、瀏覽器也還在 IE6 獨霸的時代、CSS 更是不可靠。所以大多數的人，還在用 <table> 標籤來切版。

在當年的技術限制下，很多網站就決定在不同設備顯示不同內容、甚至功能：也就是網站分成手機版與網頁版。

但後來新世代瀏覽器與手機出現時，一切都變了：手機性能越來越好、上網越來越方便、CSS 與 JavaScript 的規格也越來越統一。同時 Flash 的退場，也降低了寫網頁的門檻：只要你懂 HTML、CSS、JavaScript 這三個前端核心科技，就可以開始寫網頁，而且在電腦與手機都看得到。

這時就有人認為：如果電腦與手機都能跑 HTML 與 CSS 的話，那何不給不同設備相同內容，只針對外觀修改就好？

於是代表「在不同設備顯示不同內容甚至功能」的 AWD 和「給不同設備相同內容，只針對外觀修改」的 RWD 兩個觀念開始出現，並互相碰撞。

於是當年的設計師或網路工程師，再也無法光靠 <table> 標籤切版了。只好又生出一個前端開發，來解決切版與設備顯示的問題。

然後 JavaScript 也越來越強、強到可以讓網頁流暢性與桌上程式比擬。於是我們的前端還要搞 JavaScript，某些公司只好再找個前端專司 JavaScript。

對前端開發來說，直覺是呈現相同內容的 RWD 比較好做、聽起來也比較潮。然而這也不是絕對：如果我們希望不同設備的呈現差異過大、甚至一開始就希望內容完全不同的話，那 RWD 還是比較好做嗎？這就不一定了。

所以面對需要對不同設備呈現不同內容、甚至功能的網頁，AWD 會比較方便；相對來說，如果我們希望不同設備呈現相同內容，那就比較適合 RWD。

結論

  1. RWD 與 AWD 是兩種不同的網頁設計觀念。
  2. RWD 與 AWD 是為了解決「如何在不同的設備上呈現網頁內容」的問題。
  3. AWD 認為在不同設備要呈現不同內容，有時甚至包括不同功能。因此一個網站如果分成手機版與網頁版，他大體上就是 AWD 的觀念。
  4. RWD 認為給不同設備要呈現相同內容，只針對外觀修改就好。
  5. 要選擇 RWD 還是 AWD 主要是看你要給不同設備的呈現內容差異有多大。

後話

我感覺 Google 與 MDN 的文章，會比較傾向於 RWD。

至少，MDN 給我影響頗大的...總之我還想講好多喔，但已經很累了。

參考資料