Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

手機版網頁設計 RWD vs AWD 的差別,打造良好網站使用者體驗

RWD vs AWD

在現代移動裝置廣泛使用的環境下,有極大部分的網路使用者,都是透過手機等行動設備來進行企業服務查詢、電商購買、知識搜索等行動,根據 MeltwaterWe Are Social 合作製作的《數位 2023 年全球概覽報告》分析,針對全球的數位使用情形,用行動裝置上網的比例已高達 91%,顯然使用手持裝置上網已經是瀏覽網站的趨勢。

devices used to access the internet


而行動瀏覽網站可分為兩種:AWD 自適應設計、RWD 響應式設計。



#AWD 是什麼

AWD 自適應網頁設計全名為 Adaptive Web Design(簡稱 AWD),在響應式網站還沒盛行的時候,主要以此種類型為主,直接針對「裝置類型」(如電腦、平板、手機等),提供相對應的 CSS 檔案。
由於是依裝置設定不同的檔案,所以會有兩種以上版本需要開發及維護。AWD 適用於內容繁多的大型電商網站,如 PChome、momo 購物網

使用者可以透過網址判斷是否為 AWD 網頁,可檢視網址是否以“m”開頭,例如:591租屋網( https://m.591.com.tw )、momo購物網( https://m.momoshop.com.tw ),代表該網站有提供 AWD 網頁設計。
AWD



#RWD 是什麼

RWD 自適應網頁設計全名為 Responsive Web Design(簡稱 RWD),是目前最常見的網頁設計方式,RWD 會讀取「同一個 CSS 檔案」,讓同一個網址隨著各種裝置螢幕的大小,自動調整版面和元素大小減少使用者進行縮放、平移和捲動等操作行為,提供最佳瀏覽體驗,使用此種設計方式將更易於維護網頁。



RWD vs AWD

#RWD & AWD 的差異表

項目 🌟RWD🌟 AWD
中文全名 響應式網站設計 自適應網站設計
網址 只用 www 網址 通常會分成 www 與 m 兩種版本
開發成本 較低 較高
網頁檔案目錄 單一目錄(包含 HTML 及 CSS ) 根據裝置分不同的檔案目錄,
HTML 和 CSS 分開處理
網站內容一致 內容一樣 不一定
網頁載入速度 中等 較快
網站資料維護 維護容易 需維護多版本
網頁建置預算 中等 較高
SEO 排名優勢 較佳 中等
適用對象 企業網站、形象網站、品牌網站 大型綜合或系統複雜網站
優點 一套設計可適用不同裝置 根據裝置設計最佳網頁呈現


#結語

現今 RWD 網頁設計已成為趨勢,在網站開發、SEO表現、後續維護、視覺呈現都能得到較佳的表現,非常推薦使用 RWD 來做設計,除非希望單獨優化手機板,如大型購物網,則可使用 AWD,但 AWD 開發維護成本較高,如果網站沒有特別的需求,建議用 RWD 做會是更好的選擇!



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️