RWD 與 AWD 是什麼? 網站設計時該怎麼選?(Mobile)

#網站規劃

RWD 與 AWD 是什麼? 網站設計時該怎麼選?(Mobile)

2020年,全台灣的行動裝置持有率來到了88.4%,大部分舊網站都在朝向「手機優先」方向發展,新網站中,小螢幕的需求也成了不可被忽視的一塊。

在決定網站呈現方式時,網頁設計該選擇RWD還是AWD呢?RWD、AWD又分別代表什麼意思呢?

RWD是什麼?

Responsive Web Design 縮寫,大多翻譯做「響應式網頁設計」。

網頁會根據瀏覽網站的銀幕大小,自動調整成相應的設計。

是一組CSS對應不同的裝置調整,這組CSS必須要對應到所有裝置,包括桌機、筆電、平板、手機,因此內容上任何裝置都是一致的,若圖片解析度、檔案太大,即有可能拖慢手機網頁的載入時間。

也因為需開發一組CSS,開發的今年成本與時間成本都相對較低,且維護較簡單,因此成為活動式網站或小型官網的首選。

補充:CSS全名為Cascading style Sheets,是電腦語言中負責決定字級、顏色、位置的角色,需搭配其他的程式語言一起使用,才能起到裝飾、搭配、配置的作用。

AWD是什麼?

AWD 為 Adaptive Web Design 的縮寫,中文名字很多,這邊我們稱它為「自適式網頁設計」,若手機瀏覽網頁時出現「/mobile」、「.mobile」結尾的網域名稱,此網站即有可能是AWD網站,簡單來說就是有獨立的「手機版網頁」。

AWD是多組CSS針對不一樣的裝置進行設計,需要開發並維護多組CSS,成本相對RWD較高,但也因為不同裝置使用不同CSS,彈性度較高,可以依據裝置大小調整不必要的照片或檔案大小,因此在行動裝置上可以較快被讀取,適合複雜或較大型的設計。

(左:facebook電腦版 / 右:m.facebook 手機版)

(左:facebook電腦版 / 右:m.facebook 手機版)

該如何選擇?

先衡量自身商品種類、數量、呈現方式、公司是否有人力維持以及準備可用時間。

若座大型官網,願意花幾個月甚至幾年以上開發,照片高清、結構複雜,那麼可以試試看AWD,讓網站更完整,可再以維護頻率與幅度決定是否請網頁公司協助運營或自己公司派遣人力。

如果短時間內需完成,網站僅需存在3年甚至以下的活動式網頁,或整體檔案較小的官網,就比較適合做RWD,快速、經濟實惠。

委外開發網站很貴,我應該自己招募工程師嗎? | 夏木樂網頁設計

委外開發網站很貴,我應該自己招募工程師嗎? | 夏木樂網頁設計

注意:我知道,看到這,您心裡應該已經有想法了,但請容許我再提醒一次,RWD與 AWD沒有絕對優劣,請以從自身需求判斷。

如果您依然無法決定呈現形式,不妨試試與我們聯繫,夏木樂,品牌網頁設計專家,讓我們幫您規劃最完善的網站!

相關文章

【服務介紹】歐美風格/英文網站設計服務

夏木樂是台灣少數專長於歐美風格設計的網站公司,同時也具備國際級的程式開發實力。這篇文章稍微介紹了一下我們的設計風格與服務流程,讓大家可以快速認識我們的...