網頁基礎篇:從零開始認識RWD與AWD!

網站設計

網頁基礎篇:從零開始認識RWD與AWD!
現今的時代人們大多數透過手機瀏覽企業和賣場的網站,這樣的趨勢促使新網站更注重適應手機尺寸,甚至逐漸有「手機優先」的概念。因此RWD(響應式網頁設計)與AWD(適應性網頁設計)是現今的主流趨勢,讓網站從手機打開也可以很漂亮、好閱讀!

什麼是RWD?

RWD全名「Responsive Web Design」,中文翻譯為「響應式網頁設計」。是目前最為廣泛使用的一種網頁設計的方法,讓網站能夠根據不同設備和螢幕尺寸提供最佳的呈現效果。 簡單來說,就是使用彈性的網格系統和相對單位,使網站元素的大小和位置能夠自動調整,以適應不同的螢幕大小。圖片能根據使用的螢幕大小而調整,確保圖片在不同設備上都能以最佳方式呈現。

舉例來說,一個公司的企業網站,這個網站可能包含產品信息、公司歷史以及聯絡方式。使用RWD的話,當用戶從桌面電腦轉換到平板或手機時,網站的佈局和內容會自動調整,以確保信息在不同設備上都能夠被清晰顯示。


什麼是AWD?

AWD全名「Adaptive Web Design」,中文翻譯為「適應性網頁設計」。是在RWD推出之前就有的技術,目的是根據使用者設備的特點和能力提供更適切的網頁版本。

AWD 使用伺服器端的技術來檢測訪問網站的設備,包括裝置的螢幕大小、瀏覽器版本等,這使得伺服器能夠根據這些特徵提供適當的網頁版本,確保在各種裝置下皆能有最佳的使用體驗。但也由於每個版本都是固定的,再需要維護多個版本的情況下,維護成本就會相對RWD更高。

想像一個電子商務網站,商品種類、項目眾多,該網站可能就需要一個專門針對桌面的版本,另一個針對平板,還有一個針對手機,並針對個別版本優化商品展示和購物流程,以更好地滿足特定設備的需求。


RWD與AWD的差別?

最主要的差別在於,RWD是網站上元件位置會適應螢幕大小而自動調整位置,而AWD則是針對每個裝置尺寸做獨立設計。

特點 RWD(響應式網頁設計) AWD(適應性網頁設計)
主要目標 提供在不同裝置上一致的用戶體驗 根據裝置的特點優化使用體驗
響應性 彈性佈局適應於各尺寸,元素大小和位置能夠自動調整 更依賴於伺服器端偵測,並直接載入裝置對應的元素版本(PC版或手機版)
設計靈活性 適用於各種尺寸的裝置 針對每一種裝置做客製化的設計
適用範圍 廣泛應用於不同類型的網站,特別是內容為主的網站 針對每一種裝置做客製化的設計
設計靈活性 適用於各種尺寸的裝置 針對不同裝置進行個別的設計,適合網站結構較複雜、功能性多的網站
實作難度 相對較容易實施,設計相對簡潔 相對複雜,需要更多伺服器端的處理和優化
網站性能 一次載入所有PC版以及手機版的資源,可能影響網站載入速度 根據裝置(PC版或手機版)需求載入對應的資源,網站載入速度相對較快
維護成本 單一頁面維護,成本較低 多個頁面維護,成本較高


我該選擇RWD與AWD?

當我們準備架設一個網站並選擇需要使用RWD還是AWD,我們有幾個面向可以思考:

  • 目標受眾

    如果網站主要以內容為主,而且在不同裝置上希望呈現相同的元素及使用體驗,RWD會是是一個理想的選擇。相反,如果您的網站需要針對不同裝置提供不同的內容和功能,AWD會更適合。
  • 網站類型

    網站若是以官方網站、企業形象網站等以內容為主的網站,不需要複雜的特定裝置介面優化,並且重視在不同的裝置上希望有相同的使用體驗,會推薦採用RWD的作法。但若是要製作大型的購物、社交平台或是功能導向的網站等,內容相對多量,為了讓各種裝置的受眾都有好的操作體驗,則會推薦使用AWD製作。
  • 維護預算

    AWD的開發因應所需要的裝置版本,可能相當於製作多個網站前台,除了製作時程會因此拉更長,後續維運上的成本也相較RWD更高。若是以基本的形象網站為前提,RWD的CP值最高!

選擇因素 RWD AWD
基本網站需求  
預算金額  
一致的用戶體驗  
複雜的裝置需求  
對性能優化有需求  
高度客製化設計  

RWD與AWD哪種對SEO比較好?

是否對於SEO比較好,我們需要知道SEO的規則主要有:網站回應速度(網站效能)、使用者體驗、結構化資料、行動版網站的內容與電腦版網站相同。也就是說在所有條件都相同的情況下,網頁RWD與AWD對於網站其實沒有太大的差別。


延伸閱讀: 輕鬆了解「結構化資料」對於 SEO 優化超加分!

網站效能檢視工具 Google Pagespeed Insights

為了更有效率的優化網站,google的提供的免費工具 Google Pagespeed Insights >> 可以為網站來檢測效能。直接輸入網址就能夠看見網站網站的優化建議以及速度評分,分數90 分以上即表示良好(綠色圓圈),50 至 89 分代表需要改善(橘色方塊),低於 50 分則代表不佳(紅色三角形)。通常建議數直接維持80分以上喔!


使用者體驗檢視工具 Google Search Console

針對使用者體驗google也有提供的免費工具 Google Search Console >> 可以針對查看網站用戶的使用者體驗,內容、設計及字體大小或網站速度等都會列入評判基準,若有待改善或不良的問題也會列出,修正後可以重新提交確認是否已經修正完畢。


結論

選擇 RWD 還是 AWD 取決於具體需求,如果網站內容相對簡單可以選擇RWD,如果更重視手機端的用戶體驗和性能,並且網站資訊量相對多的話就會建議做AWD。
最終維護成本以及擴充需求也是重要的考量因素,在做決定之前,最好進行詳細的需求分析和討論。
還在思考網站需要使用的類型嗎?趕快聯繫我們諮詢吧!

文章編輯

文章編輯:Alice Zhang

圖文編輯:Amy S Chou

推薦文章

  • 網路行銷是什麼?10 種常見的網路行銷

    透過網路宣傳品牌、產品、資訊的渠道,運用很多不同的方式,如:付費廣告、口碑行銷、電子郵件、內容行銷...等方式,再加上吸睛的文案及素材來做搭配,來達到自己的行銷目的,除此之外也能運用OMO(線上線下整合)、會員經營...等的方式,讓品牌除了觸及新客外,經營既有客戶的成本更加來得低!

    行銷相關

  • GA4是什麼?新手設定教學讓你輕鬆上手

    數位行銷越來越普及,分析數據提出優化的策略也變得更為重要,而網站分析工具Google Analytics(GA)對於行銷人來說並不陌生,因為少見免費的數據分析工具全球95%以上行銷人都在使用。而通用版GA在2023年7月1日起正式停收資料,接著就會由新版Google Analytics 4(GA4)接下全球行銷界資料分析的重任。如果想在數位行銷領域更多的數據分析與優化策略佈局,就趕緊來了解GA4!

    行銷相關

如果您喜歡我們的文章,歡迎分享! 有相關問題也歡迎與我們聯繫