# RWD、AWD、AMP、PWA ###### tags:`補充` ### Responsive Web Design(RWD)響應式設計網站 * 開發容易成本低:小團隊開發模式: 使用同一套CSS:節省網站製作成本 適合內容較單純的網站、新創公司或是個人工作室使用。 * 維護耗時： 全部的樣式碼都塞在同一套 CSS 裡面，所以在網頁維護上較不容易，常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況，很可能修改某個樣式碼，卻也影響到了其他不需修改的樣式碼，而導致網站 「跑山」 的窘境。 * 網頁載入更慢: RWD 網頁的機制是將資訊先下載後，再根據裝置大小重新排列，所以會較慢。 * SEO更方便: 因為同一個網頁、URL 也只有一個，所以更方便 SEO。 * 它有跨平台、不需另外安裝、方便性高等優勢，但是相對來講所有的資料都是在網路上，它的讀取速度會受到資料量、網站優化程度以及網路速度的影響。 ### Adaptive Web Design (AWD)自適應式網頁設計 * 開發不容易成本高:大團隊開發模式 針對各種裝置撰寫對應的 CSS，因此會有多套 CSS，需撰寫讓網頁自動感應載具而套用對應 CSS 的程式。：程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。 * 維護容易 在維護上比 RWD 更分明、更能清楚地找到對應的樣式碼，不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。 * 網頁載入更快 可針對行動裝置而做優化，將原本的大圖縮減成最合適的尺寸，減少不必要的大圖，就能加快行動裝置的網頁 loading。 * SEO不方便:若有 SEO 的需求，還需另請工程師將同一網頁的多套 CSS 串在同一個網址內，否則流量會自動被手機與桌機瓜分。 * 有利於 UI/UX 可針對不同的瀏覽介面而做出對應的 UI/UX，讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。 [判斷載入裝置的程式](https://github.com/serbanghita/Mobile-Detect) ### [Accelerated Mobile Pages(AMP)加速移動頁面](https://www.ampproject.org/)不用做rwd * 號稱能用 10 倍速開啟網頁，但格式和美觀度一定不及正常網站好。 部落格新聞類型網站 不用做rwd * 有了 AMP 後他們的 SEO 自然流量自然下跌。因為當網站－有內容，就應該呈交給搜尋器，使它index該頁內容和文字。如果連被 index 的機會都沒有， 又如何輕易給用戶搜尋到出來？ ### Progressive Web Application (PWA)漸進式網頁應用程式 要做rwd，把網站app化，做離線存取要做rwd 它的本質還是網站，但同時結合了網站與App應用程式的優點，提供更優質的使用者體驗，PWA使用一種稱為App Shell Architecture的方式，這種方式能夠將頁面的UI架構（包含HTML、CSS、Javascript）與資料切分開來，並且預先將UI架構儲存在裝置上，當用戶開啟時頁面的UI能夠==即時讀取呈現==，只需再下載最少量的資料即可。當然，也可以視需要預先將部分重要的資料先儲存在裝置上，這樣即使是==在沒有網路的狀況下，使用者依然能夠看到部分的資訊==，而不是完全空白的頁面。 另外，PWA不需要透過Google Play或是App Store下載，而是在你瀏覽該網站時，會跳出詢問視窗，當使用者按下同意後，會直接==在裝置桌面新增一個快速連結的圖示==，既簡單又快速，更棒的是透過該圖示開啟網站的話，可以發現上方的==URL欄位消失了==，整個畫面看起來==就像是一個App一樣==。然而比較可惜的是==目前只有Android系列的行動裝置才能完整支援==PWA的各種功能與特性，而iOS目前還在Beta版本中，尚無法完整支援，期待不久的將來在iOS裝置上也能夠完全發揮PWA的特性。