網頁基礎篇:從零開始認識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

推薦文章

  • SEO操作核心策略 | 不可小看UIUX對SEO的影響!

    UI/UX(使用者介面/使用者體驗)對網站的SEO(搜尋引擎優化)確實是相互關聯且重要的要素,UI/UX不僅僅是提供良好使用者體驗的手段,同時也是提高網站SEO的一個關鍵因素。良好的使用者體驗能夠留住訪問者,提高他們與網站互動的時間,這將對SEO產生積極的影響。

    SEO

  • ESG網站到底在夯什麼?原來有必要!

    落實企業社會責任對於企業的益處不勝枚舉。不僅真正落實永續經營,也助於建立企業良好形象,達到良好的長期發展。

    網站設計

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