為什麼寫這篇文章：網站規劃有時也需要懂一點技術觀念
前陣子去參加一場關於RWD的meetup講座，主講者前端享譽盛名的是Amos大大，分享了與前端設計溝通的心法，對象包括PM專案經理、Planner網站規劃、前端工程師設計師，有興趣可以閱讀以下這篇自己整理的分享！
這場分享多為設計師，有少數的工程師, PM/Planner，注意到一個有趣的現象，蠻多PM/Planner跟前端有溝通上的問題，例如網站要使用RWD還是AWD、要怎麼給需求文件(桌機與手機的wireframe)。
本身為網頁設計師，希望藉由這篇文章來分享前端設計師的觀點以及之前工作上的經驗，以幫助更多網站規劃者與前端之間的溝通，加速專案流程，減少不必要的工時的消耗。
這篇文章寫給：沒有技術背景的網站規劃者
讀完這篇文章你可以：
1. 了解RWD和AWD是什麼？優點缺點
2. 根據自己的需求與手邊的資源，決定網站要用RWD還是AWD
4. 與前端設計師/工程師溝通更順利
什麼是RWD 和 AWD ？
一套CSS和多套CSS
RWD(Responsive Web Design)響應式網頁設計，和AWD(Adaptive Web Design)自適式網頁設計，主要都是針對現今手持裝置的蓬勃而發展出來的CSS方法。簡單的來說，RWD是一套CSS通用於各裝置，AWD是針對裝置寫相對應獨立的CSS，可以有多套CSS，例如桌機有桌機的一套CSS，手機有自己的一套CSS。
再深入一點，它們如何判斷裝置？
RWD的方式會把所有裝置的style寫在一支CSS裡，當使用者打開了網頁，能即時透過網頁的寬度去決定要吃到相對應裝置的style；而AWD的方式必須仰賴程式端(工程師)去寫程式判斷使用者開啟網頁的裝置，再決定匯入相對應的CSS檔案，例如判斷這個裝置是桌機，那就匯入桌機的CSS檔案，若是手機就匯入手機的CSS檔案。
最主要的差別在於，明確的分割使用者的裝置
但不是說RWD各個裝置使用同一支CSS檔案，就只能共享同一套CSS style, RWD也是能設定包括桌機手機等不同的樣式，只是因為AWD有明確的判斷使用者裝置的這個步驟，所以在CSS導入的時候能夠更明確，在桌機與手機的設計上有明顯差異的情況下，不會說桌機吃到手機的style這種畫面錯誤的情況。RWD如果寫法不夠謹慎加上設計複雜的話，破版是很有可能發生的。
RWD vs. AWD 該如何選擇？先檢視自己的需求
現今RWD技術正值潮流，但並不代表網站使用RWD就一定是最好的，必須根據網站的性質以及專案的需求來決定什麼才是最適合的
＊ RWD或AWD，沒有絕對的好或壞
在開始說明這個比較表前，還是重申一下，雖然可以知道兩者的特性優缺點，但在使用上沒有絕對的好壞，因為專案在執行時有太多的情況變因了，可以拿自己的情況參考比較表，做適當的判斷。
1. 從手上的資源下手 : 團隊人力、專案時間、是否需要維護
RWD因為只要寫一套CSS，時間相對的會比需要客製化裝置的AWD快，人力的部分AWD需要透過程式端(工程師)去判斷使用者來配對CSS，所以是需要比較多人力的。也因為RWD只需要維護一套CSS檔案，維護相對的也會比較容易。
2. 專案的需求：網站內容、對畫面的呈現要求(VQA)與裝置彈性
從專案需求的方面看，如果網站的內容呈現複雜，例如桌機跟手機的畫面、架構、功能差異很大，就不適合使用RWD，AWD的客製化反而佔有優勢。
這裡畫面要求(VQA=Visual Quality Assurance)的部分是說對裝置的畫面要求，如果對每個畫面都有非常嚴格的要求，AWD會比較適合，因為程式端已經幫忙配對該對應的CSS，若用RWD而寫得不夠嚴謹，很有可能會吃到不適合的CSS。之前工作有一個例子是已經測試到iPad Pro的畫面，而iPad Pro的寬度已經跟小型桌機的螢幕寬度重疊，所以在RWD的寫法上是會吃到同一個style，但此時桌機與手機預設為不同的設計畫面，這部分重疊的部分就很麻煩，如果能夠用程式端去幫忙判斷裝置會是更好的做法。
假設你的專案對裝置的測試要求很高(手機跟桌機的畫面一定要完全的獨立)，建議用AWD，由程式端去判斷對應的CSS，會比較簡單。以上，其實如果要用RWD去寫高需求的專案也是可行的，但是可行固然可行，效率跟工時成本相對的會提高，且硬寫的code很可怕，之後要維護又是另外一回事了。
3. 不要再說AWD不適合SEO了！ 先看看你的網站『有幾個』
這個地方就是我極盡想要闢謠的，在網路上看到一些文章，很簡單的就帶過說AWD對SEO成效不佳，這個前提是直接把網站分成桌機版跟手機版兩個網站再進行轉址，所以流量自然會分流，對SEO自然會有影響。例如Facebook就是桌機與手機版分成兩個網站，手機版的Facebook網址會有個m.的開頭，就是這樣的情況。
但我們先來回來弄懂AWD的原理，一切只關於CSS style。AWD只是分成桌機手機兩套CSS，並不等同於要分成兩個網站，常見的做法是使用同一個網址，工程師會在同一個網址下吐出相對應裝置的網站架構，以及同時AWD原則下的CSS。這樣的做法並不會有前面提到分流的問題，也不會影響到SEO。
所以不要再說AWD不適合SEO了，只能說把網站做成兩個獨立的手機版跟桌機版再進行轉址這種做法，才會對SEO的影響比較大。
想想看，活動網站、企業官網、一頁式銷售頁、金流網站適合RWD還是AWD呢？回頭看看表格
4. 其實也可以AWD＋RWD ? 如果你還是不懂… 就交給前端設計師/工程師吧！
其實切版的前端們，都會視專案的情況來決定要使用RWD或AWD，告訴他們你的需求，你想要很快速地就上線; 或者這是個活動網站，上線時間很短不用那麼要求VQA。或是其實可以在AWD的架構上再加上RWD的一點寫法…也不是不可行的！交給前端大大們去判斷準沒錯！
這篇文章在我分享到Facebook Medium社團上後，有人提到用工程角度去判斷使用RWD或AWD會比較適合，我想這都是可行的！這篇文章比較屬於從設計端的角度去判斷～
與前端設計師/ 工程師溝通還能怎麼做？了解專案流程與工作內容範疇
首先要先了解到整個網站的工作進程，上圖從左到右低擬真度的sketck/wireframe到高擬真度(可互動)的Prototype。通常網站規劃者(通常是PM/Planner)會提供wireframe( 簡單的畫面配置線稿圖包括功能需求)給設計師，設計師會根據網站的目的、使用者等進行畫面設計成Mockup(設計過老闆就在這關啦！)Mockup基本上是視覺的畫面圖片參考，進行設計定稿，定稿後進入Prototype，前端設計會開始切網頁CSS，然後再進到程式端串功能。
強烈建議網站規劃者在完成wireframe後，找設計師與工程師會議，說明你的畫面草稿的畫面配置與功能、網站的目的規劃、上線時程等再進行任務釐清，有些公司的CSS切版會在設計師身上，有的則會在工程師身上，了解每個階段每個人的工作範疇，之後進入測試階段就能找到對的人解決。
不知道大家看完這篇文章有什麼想法呢？對RWD和AWD有沒有更加的瞭解，歡迎在下方留言告訴我！如果有哪裡不太清楚或是有什麼建議都歡迎提出喔！非常想知道大家讀完的想法呀～或者喜歡也能幫我拍拍手喔！👏👏👏
