沒有RWD、AWD的網站已經走入歷史
沒有RWD或AWD的網站到底會怎樣？先講結論，網站流量會暴跌，RWD跟AWD就是行動網站，而現在用行動裝置上網的比例超過80%，而且Google於2020年9月「正式執行」以行動網站為排名依據，簡單來說沒有手機版的網站等於宣告死刑，無法被搜尋的網站有什麼用？沒有RWD的網站請趕快改版，RWD、AWD都不是很新的技術了，已經是成熟的技術，而且套版網站費用沒有很高，趕快改版才是當務之急。〈延伸閱讀：套版網站看起來都很像，到底差在哪?〉
2020年台灣行動上網人口
來源：TWNIC
RWD (響應式網頁設計)是甚麼?
RWD (響應式網頁設計)：可以自動將網站顯示於各種不同裝置，包含桌機、手機、平板，根據不一樣的銀幕大小設計友善的閱讀介面，較叫做「RWD」。RWD 常用閱讀解析度：電腦版的寬度：至少1024px以上 ，平板裝置寬度720px ~ 1024px之間 ，手機裝置寬度：320px ~ 720px之間，當網站出現不同寬度時，RWD (響應式網站)就會讀取「同一個CSS樣式」，自動顯示不一樣的排列方式，請點擊看下方的影片您就了解RWD的變化運作方式，如果網站是AWD設計的，是不會這樣變化的，所以移動視窗是沒辦法看出是AWD的網站。看完影片您就知道甚麼是「RWD」
.mp4)
AWD (自適應式網頁設計)是甚麼?
AWD也是一種「自適應式的」網頁設計，AWD跟RWD存在一樣的目的，都是為了要在桌機、平板、手機，不同裝置下都能顯示最佳畫面，RWD是隨著視窗大小縮小、放大，RWD「讀取同一個CSS」可以看上面的影片，但AWD不會隨著視窗「即時」放大放小，AWD會自己判斷裝置大小的程式，然後讀取「不同的CSS」，但可以達成一樣的效果。〈延伸閱讀：網頁設計是什麼？設計公司不會告訴你的5個真相〉
CSS是甚麼?
CSS，英文是Cascading Style Sheets，中文稱做：樣式表、級聯樣式表、串接樣式表、階層式樣式表，CSS不能單獨使用，必須與 HTML 或 XML 一起協同工作，CSS樣式表是在定義網站的外觀、樣式、字體大小、字體粗細、字體顏色、元素對齊、定位...這些元素，CSS主要目的就是設定網頁的布局、設定網頁的樣式，CSS樣式定義完成之後，就可以用在全部的網站，讓網站不用一頁一頁設定字體、顏色、位置、樣式....，可以加速網站設計，RWD是共用CSS，AWD則是分開CSS，CSS樣式工作都是由前端工程師負責製作。
〈延伸閱讀：網頁設計為什麼需要前端工程師？〉
CSS，英文是Cascading Style Sheets，中文稱做：樣式表、級聯樣式表、串接樣式表、階層式樣式表，CSS不能單獨使用，必須與 HTML 或 XML 一起協同工作，CSS樣式表是在定義網站的外觀、樣式、字體大小、字體粗細、字體顏色、元素對齊、定位...這些元素，CSS主要目的就是設定網頁的布局、設定網頁的樣式，CSS樣式定義完成之後，就可以用在全部的網站，讓網站不用一頁一頁設定字體、顏色、位置、樣式....，可以加速網站設計，RWD是共用CSS，AWD則是分開CSS，CSS樣式工作都是由前端工程師負責製作。
〈延伸閱讀：網頁設計為什麼需要前端工程師？〉
RWD與AWD有什麼不一樣？
桌機、手機內容元素不完全一致
RWD(響應式網頁設計)在桌機、手機內容幾乎是完全一樣，AWD網站內容則可以一樣或不一樣，特別是可以針對手機的內容做細部簡化，減少不必要的圖文內容，提高手機網站效率。響應式網站(RWD)如果內容很多，RWD使用相同的CSS，使用圖文、效果會完整呈現在手機上，手機跑起來相對會慢一點。AWD使用不同的CSS，所以手機可以呈現不一樣的內容，手機因為有優化圖文，所以相對會快一些，但因為AWD需要製作多版本以後再整合，所以後續的資料管理比較麻煩，開發成本也會比較高。兩種都會判斷裝置
RWD(響應式網站)會根據裝置的畫面寬度去判斷要跑多寬的網站。AWD一樣會判斷裝置是哪一種裝置，是桌機就跑桌機的CSS，是手機就跑手機的CSS，檔案結構相同下，RWD跟AWD都可以呈現一樣的網址，如果你的網站手機版跟桌機版網址不一樣，出現 https://m.XXX.com 、https://www.XXX.com/mobile ... 這樣分開的網址，這是傳統的「兩個網站版本」作法，這樣就不是RWD或是AWD，不同網址流量會分散流量會影響SEO成效，AWD跟RWD則是一樣的網址，對SEO是加分的。〈延伸閱讀：網頁設計的使用者體驗(UX)如何執行？ 〉
RWD還是有好壞之分
RWD早已是必備的設計流程，網頁設計公司一定有RWD的設計服務，但RWD還是有好壞的差異，「好的RWD帶SEO上天堂，壞的RWD就是SEO的拖油瓶」，RWD分成手切RWD(手工)跟套用RWD(Bootstrap)，手工切版就是先設計網站圖片，再把畫面手切變成HTML，套用就是以現成的Bootstrap模版，Bootstrap的優點是「製作時間短」、「開發成本低」、「可套樣版多」，缺點是「綁定較多程式」、「修改彈性低」、「SEO效能差」。手工切版缺點是「製作時間長」、「開發成本高」、「沒有樣版」，手工切版的優點是 「程式簡潔」、「修改彈性很高」、「SEO效能好」，未來有SEO需求的網站，最好以手工切版的網站為優先，網站架構才會有利於SEO。〈延伸閱讀：RWD網頁設計並沒有都一樣！ 〉
RWD、AWD該怎麼選擇?
依據網站內容是多還是少?
像MOMO、PCHOME、博客來就是內容超級多的網站，大部分都不會是RWD(響應式網頁設計)的網站，通常都是AWD設計的網站，甚至是傳統的兩個不同網址的網站，大型購物網站比較適合AWD，AWD可以針對手機版做更有效的配置與使用者體驗(UX)，企業網站、小型購物網站就比較適合RWD，像是Shopline就是RWD購物網站，RWD的網站好管理，內容不到爆量多的網站建議使用RWD。網站建置有多少預算?
RWD(響應式網站)在上線後的維護是比較容易的，AWD維護上較繁瑣，上線前的製作成本AWD高於RWD，所以如果您製作與維護上的考量，還是選擇RWD比較划算一點點，還有AWD的開發時間是略多於RWD的，如果您時間上不允許，可以選擇RWD。上線後的前端修改、開發速度AWD比RWD容易，因為可以分開調整，大部分的設計公司的套版網站幾乎都是RWD，希望省錢可以用RWD。是否更重視手機版的使用者體驗(UX)?
如果是大型購物網站平台，也非常重視手機版的使用者體驗(UX)，那就建議用AWD製作，AWD是手機、桌機是分開的介面，可以針對手機使用者開發更為友善的模式，完美手機體驗，AWD是優於RWD的，但如果你是不是大型購物網站，只是一般品牌購物網站、企業網站，那建議你用RWD就很夠用了，兩者之間的 UX/UI 使用者體驗差距不大，尤其是資料量小的時候更是沒有太多差異，但是兩者成本差很多。〈延伸閱讀: UX/UI不一樣，UI/UX設計是什麼？〉
RWD、AWD，對SEO有關係嗎？
行動網站對SEO非常重要
2019年Google就提出「行動版內容優先索引」的演算法，也就是說所有的版本都要以「行動版網站」的內容做優先索引，就一定要有RWD、AWD、手機網站才能執行SEO，行動版的標準很多，其中的友善度就是重要排名因素，包含設計、內容、格式，例如：字太小、圖文間距過小、圖太大、網站太慢… 都會影響搜尋排序，沒有手機版網站就趕快升級吧。〈延伸閱讀: SEO是什麼? 簡單說讓你聽得懂〉
【您的網站適合行動裝置瀏覽嗎？ 馬上來測試】
RWD與AWD哪一個對SEO比較好？
RWD(響應式網頁設計)跟AWD(自適應式網頁設計)哪一個對SEO比較好呢？Google說「每一個版本的網站內容要一樣」，因為AWD簡化了手機版的資料，所以會有可能發生不同版本的內容不一致，RWD沒有這個問題，RWD在SEO重複標準會比AWD好。以速度來看，AWD因為簡化所以速度上會略勝於RWD，AWD手機版的PSI效能會比較好，速度快也是排名因素之一，兩者哪一種對SEO比較好？答案是「看哪一個把缺點修正的更完整。」假設AWD把內容盡量做到一樣，RWD也把速度調教到高分，那兩者對於SEO的影響差距是微乎其微的。〈延伸閱讀: SEO是什麼？SEO怎麼做？2021重點教學〉
什麼是 PSI ？
PSI 的英文是 PageSpeed Insights，簡稱PSI。PSI 是Google 提供的套「檢測網站性能與速度的線上工具」，除了檢測結果以外並提供各種修改建議，這個分數是透過運行Google的Lighthouse資料庫來分析有關頁面而產生的結果，90分或以上是非常好，50 到 90 中等架構，低於 50 是很差的架構，通常要執行SEO，最少都要有80分以上比較適合。
【網站PSI是幾分？馬上來測試 PageSpeed Insights】
PSI 的英文是 PageSpeed Insights，簡稱PSI。PSI 是Google 提供的套「檢測網站性能與速度的線上工具」，除了檢測結果以外並提供各種修改建議，這個分數是透過運行Google的Lighthouse資料庫來分析有關頁面而產生的結果，90分或以上是非常好，50 到 90 中等架構，低於 50 是很差的架構，通常要執行SEO，最少都要有80分以上比較適合。
【網站PSI是幾分？馬上來測試 PageSpeed Insights】
用Google Search Console審查RWD
要怎麼檢視網站的目前資料是一致的呢？可以用Google Search Console(GSC)審查網址。Google於2020年9月正式以行動版作為搜尋收錄與排名的基準，我們必須製作手機版網站，RWD跟AWD都是手機版的網站設計，每個版本的網站資料必須一致，包含「網站內容」、「中繼資料(Meta Data)」、「結構化資料(Structured Data)」，在網站資料一致上，RWD(響應式網站)是最佳方法，GSC測試之後可以知道目前的響應式網站內容、中繼資料、結構化資料是否一樣，以Google排名規則來看，RWD優於AWD。〈延伸閱讀：網站速度- SEO優化的重要項目〉
Google以行動網站作為索引，響應式網站變得重要
Google Search Console檢查行動網站(響應式網站)
RWD與AWD的比較表
RWD與AWD有不同的架構，即使看起來都一樣，但其中還是有差異的，我們整理了RWD與AWD的比較表，表格可以更清楚知道兩者之間的相同點與差異點，目前網站設計市場幾乎都是採用RWD，所以行動裝置的調教上就必須重視架構，要執行SEO，選擇手切的RWD會比用框架開發工具的網站更有效率，AWD可以針對手機進行使用者優化，但製作成本、網站維護成本也會高很多，開發時間也會比較長，如果沒有絕對必要，整體而言，RWD可能會是比較好的選擇。
RWD與AWD比較
| 項目 | RWD響應式設計 | AWD自適應設計 |
|---|---|---|
| 不同裝置單一網址 | 單一網址 | 單一網址 |
| 網站內容一致 | 內容一樣 | 不一定 |
| 自動判斷各種裝置 | 自動判斷 | 自動判斷 |
| 行動裝置速度 | 速度中等 | 速度較快 |
| 行動裝置體驗優化 | 固定內容 | 可優化 |
| 網站製作費(客製) | 中等 | 較高 |
| 網站資料維護 | 維護容易 | 部分維護多版本 |
| 開發時間 | 快速 | 時間較長 |
| 結構重複內容 | 不會發生 | 偶爾發生 |
| 網址重新導向 | 不會重導向 | 不會重導向 |
| 行動網站載入速度 | 中等 | 較快 |
| Google檢索速度 | 快 | 快 |
| 適合執行SEO | 適合 | 適合 |
| 框架開發工具 | 多 | 少 |
| 設計公司使用率 | 高 | 低 |
| 手工網站切版 | 可以 | 可以 |
(製表: 達文西數位科技)
RWD開發工具有哪些？
使用RWD框架工具
有兩種方法可以做成RWD響應式網站，一種就是80%以上網頁設計公司採用的方法，就是先找一個適合RWD框架工具組裝網站，把網站素材組裝網站後交給客戶，再根據客戶需求做微調，雖然是用套的，但還是號稱是「客製網頁設計」，常見的RWD框架工具有：Bootstrap、Semantic UI、Foundation、UiKit...其中最有名，最多人使用的就是Bootstrap，Bootstrap很多現成的版型外，也使用在很多套版與軟體上，例如：Wordpress、Adobe Dreamweaver，Bootstrap的缺點就是綁了很多不需要的程式碼，不會改的話效能會很差，而AWD就沒有像RWD有這麼多的框架工具可以用，所以AWD的成本大於RWD的設計成本。
RWD手工切版
除了使用RWD框架工具，另外一種就是真正的「客製前端網站」，會先設計網站版型圖，然後才開始進行手切網站， 全程不使用RWD框架工具，手切技術是最佳的前端工程，因為耗時耗工所以網站設計公司都不願意採用這樣的技術，手切的網站因為html程式碼精簡、可控制、彈性大，所以通常也具備SEO架構，Google PSI分數可以調整到高分，如果您的網站執行SEO，手切的網站會是最好的選擇。
〈延伸閱讀：SEO收費行情？該怎麼選擇SEO公司?〉
結論
〈延伸閱讀：如何選擇網頁設計公司？〉
(本文為達文西數位科技所有，轉載文圖請註明出處)
邁入網站與SEO已經超過17年，喜歡探索新知與研究技術，總是希望給您最適合的解決方案。