• 網頁設計新知
    Knowledge of Design is Food of iBest.
2013/09/16  網路產業

自適應網頁設計 Responsive web design (RWD),又稱響應式網頁設計

最近接到幾個客戶指定要設計自適應網頁(responsive web),
聽起來滿詫異的,原來「自適應」網頁設計的觀念已經延伸到台灣的網頁市場了!

但仔細詢問需要做「自適應網頁」的原因之後卻發現,大多數的客戶並不了解什麼叫做自適應,
只知道這好像很流行。

自適應網頁設計RWD(響應式、回應式)的確是一個趨勢,尤其是在螢幕解析度紛亂的時代,有手機、平板電腦、電腦螢幕等,每個設備的可視範圍(viewport)都不一樣,光是iphone 3 ~ 5,就有兩種解析度,再加上翻轉過後,解析就又多了兩種。

以下是針對公司同事們的手機所進行的解析度統計列表:
廠牌 直立解析 橫躺解析
HTC OneX 360 x 588 640 x 308
HTC Sensation 320 x 460 534 x 247
HTC New One 360 x 567 640 x 287
Samsung Note2 360 x 567 640 x 287
iphone 4 320 x 401 480 x 441
iphone 5 320 x 444 568 x 320
由表中可以看出光是這三大廠的手機螢幕,就已經讓這篇文章看起來像灌水了,
再加上平板電腦和桌上螢幕,大家就可以知道為什麼我會說這是螢幕解析紛亂的時代。

為了解決螢幕解析的問題,ETHAN MARCOTTE於2010年提出了自適應網頁(responsive web)的概念。主要的原理是使用同一個HTML網頁,透過Media Query的作用,讓不同解析的介面來套用不同的CSS。

簡單一點來講,「自適應」是讓網頁內容來適應螢幕框架,隨著螢幕解析度不同,同一個網址就能有不一樣的呈現方式,

也由於是在同一個網址上面做排版上的修改,自適應網站必須取捨資訊的呈現。
也必須經由專業的使用者動線分析,才能達到最完美的閱讀效果。

自適應網頁系列延伸閱讀:
1.自適應網頁設計 Responsive web design
2.響應式網頁設計原理介紹
3.什麼樣的網站適合做響應式網頁?
4.什麼是響應式網頁設計
5.自適應網頁設計的挑戰書
6.為什麼你應該選擇自適應網站-優缺分析
7.自適應網站設計對SEO有什麼好處

熱門標籤

Website DesignOnlineBooking SystemInternet Marketing  全方位網站設計規畫團隊  愛貝斯網路愛貝斯網路有限公司