
沒有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」
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年,喜歡探索新知與研究技術,總是希望給您最適合的解決方案。