RWD比較好還是AWD?

Author: 路卡斯特
RWD or AWD

沒有RWD、AWD的網站已經走入歷史

沒有RWD或AWD的網站到底會怎樣?先講結論,網站流量會暴跌,RWD跟AWD就是行動網站,而現在用行動裝置上網的比例超過80%,而且Google於2020年9月「正式執行」以行動網站為排名依據,簡單來說沒有手機版的網站等於宣告死刑,無法被搜尋的網站有什麼用?沒有RWD的網站請趕快改版,RWD、AWD都不是很新的技術了,已經是成熟的技術,而且套版網站費用沒有很高,趕快改版才是當務之急。
延伸閱讀:套版網站看起來都很像,到底差在哪?

 2020年台灣行動上網人口
沒有RWD網站無法生存
來源:TWNIC


RWD (響應式網頁設計)是甚麼?

RWD (響應式網頁設計):可以自動將網站顯示於各種不同裝置,包含桌機、手機、平板,根據不一樣的銀幕大小設計友善的閱讀介面,較叫做「RWD」。RWD 常用閱讀解析度:電腦版的寬度:至少1024px以上 ,平板裝置寬度720px ~ 1024px之間 ,手機裝置寬度:320px ~ 720px之間,當網站出現不同寬度時,RWD (響應式網站)就會讀取「同一個CSS樣式」,自動顯示不一樣的排列方式,請點擊看下方的影片您就了解RWD的變化運作方式,如果網站是AWD設計的,是不會這樣變化的,所以移動視窗是沒辦法看出是AWD的網站。
延伸閱讀:SEO收費行情?該怎麼選擇SEO公司?

看完影片您就知道甚麼是「RWD」

  

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樣式工作都是由前端工程師負責製作。
〈延伸閱讀:網頁設計為什麼需要前端工程師?


RWD與AWD有什麼不一樣?

桌機、手機內容元素不完全一致

RWD(響應式網頁設計)在桌機、手機內容幾乎是完全一樣,AWD網站內容則可以一樣或不一樣,特別是可以針對手機的內容做細部簡化,減少不必要的圖文內容,提高手機網站效率。響應式網站(RWD)如果內容很多,RWD使用相同的CSS,使用圖文、效果會完整呈現在手機上,手機跑起來相對會慢一點。AWD使用不同的CSS,所以手機可以呈現不一樣的內容,手機因為有優化圖文,所以相對會快一些,但因為AWD需要製作多版本以後再整合,所以後續的資料管理比較麻煩,開發成本也會比較高。
〈延伸閱讀:為什麼需要RWD網頁設計?
 

兩種都會判斷裝置

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


用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以行動裝置作為索引

Google Search Console檢查行動網站(響應式網站)
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公司?


結論

根據我們的經驗,如果您的網站內容簡單可以選RWD(響應式網頁設計),例如: 企業型網站。如果是大型網站希望手機版可以單獨優化,例如: PCHOME購物網站,那麼建議您用AWD製作,如果是一般購物網站使用RWD就很夠了,AWD製作成本高,也會有資料不同步的可能性,當Google開始重視手機與桌機內容一致時,RWD會更適合於SEO排名,如果沒有特別的手機顯示需求,選擇RWD響應式網站製作網站還是比較省錢、安全、有效,當然RWD不會都一樣,還是有RWD效能的優劣之分,選擇專業網頁設計公司才能幫您達到高 PSI 網站
〈延伸閱讀:如何選擇網頁設計公司?

(本文為達文西數位科技所有,轉載文圖請註明出處)
  馬上諮詢網頁設計
喜歡探索,常常埋首於新奇的事物裡,總是希望給您最適切的解決方案。

SEO套版網站,優惠 $ NT 62,000 (1年代管+SSL)

請與我們聯繫
線上客服 TOP