「RWD」響應式網頁是什麼

愛生活網路整合行銷經紀人

「RWD」響應式網頁是什麼

「RWD」響應式網頁是什麼

智慧型手機在全球已經越來越普遍了,許多「廠商、企業」慢慢開始重視智慧型手機,網站也開始慢慢轉入「RWD網頁設計」。

什麼是響應式網頁設計,台灣稱(響應式網頁設計)、中國(回應式網頁設計)、香港(對應式網頁設計)、國際(Responsive web design),通用語縮寫為(RWD)。 是一種網頁設計的技術做法,該設計可使網站在多種瀏覽裝置「三方多螢」上閱讀和導航,同時減少縮放、平移和捲動。

隨著智慧型手機的普及網頁的技術近年來也開始重視手機上的視覺效果了,但客戶大多都不太懂,導致「網頁設計」業者幫客戶講解了一下,客戶又會覺得業務只想要拼業績,要客戶重新製作網頁。

我在此幫這些業者說明講解,一般的「手機版網頁」、「網頁版網頁」、「平版網頁」設計都是與電腦(PC)上的網站區隔開來另外再製作,若是傳統舊網站只作手機版,而沒有整個重新製作,就會導致更新網頁內容時就必須要更新兩次,尤其是網站沒有後台管理系統又外包給「網頁設計公司」作電腦版跟手機版網站時,資料要同步更新就有困難,要是不小心沒有更新到,就會引起不必要的客訴,若網站同時具備多稱語言版本,又沒後台,要改網站內容就很麻煩。

響應式網頁設計(英語:Responsive web design,通常縮寫為RWD):

「自適應網頁設計、回應式網頁設計、對應式網頁設計」是一種網頁設計的技術做法,該設計可使網站在多種瀏覽裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上閱讀和導航,同時減少縮放、平移和捲動。

移動優先,不引人注目的 JavaScript 和漸進增強:

「移動優先」和「Unobtrusive JavaScript」/「漸進增強」(考慮一種新的網站設計時的策略)是先於 RWD 的相關概念: 基礎的手機瀏覽器不理解 JavaScript 或者 media queries,因此建議的做法是建立一個只有基本框架的網站,然後再為智慧型手機和 PC 提供增強功能;而不是試著「優雅降級」——讓一個複雜的,圖像豐富的站點工作在最基本的行動電話上。

基於瀏覽器,特性或裝置探測的漸進增強:

在一個網站必須支援缺乏 JavaScript 的基本的行動裝置的情況下,瀏覽器 (用戶代理) 探測 (也叫做「瀏覽器嗅探」),和行動裝置探測是推斷某些 HTML 和 CSS 特性是否受支援的兩種方式 (作為漸進增強的基礎)—然而,這些方法不完全可靠。

對於能力更強的行動電話和 PC,可以直接測試瀏覽器對 HTML/CSS 功能的支援 (識別裝置或者用戶代理字串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile等流行起來。Polyfills可以被用於添加對一些功能的支援—比如,支援 media queries (RWD 所需要的),和在 (舊版本) Internet Explorer 上提高 HTML 5 支援。功能探測在較舊的瀏覽器上也可能不完全可靠: 某些也許會報告一個特性可用,然而它或者是缺失,或者是實作的如此拙劣以至實質上無法工作。