RWD-demo-image  

 

 

何謂RWD?

 

所謂的RWD就是指Responsive Web Design,中文翻譯大概就是所謂的響應式設計

 

為何會出現RWD?

 

一般而言,在建置一個網站時,最先會考量的就是網頁的解析度,只要有經驗的人,會馬上講出1024×768這個標準解析度,這也是台灣目前絕大多數網頁的設計框架。

但問題來了,目前手持裝置的數量,己經正式超越了PC,成為不可忽略的新興力量,對於各式各樣的手持螢幕尺吋,EHTAN MARCOTTE提出了響應式網頁設計概念,所謂響應式,就是在整個網頁頁面上,會對應不同的解析度,而有不同的呈現方式,讓裝置只是一個介質,使用者才是真正的主角。

 

這種設計,不單單只是程式碼的配合而己,整體網頁在架構及設計上,一開始就要導入概念,在概念的引導下,網頁必需簡單,訊息清楚明瞭,配上簡單的圖片,不使用任何Flash動畫,讓網頁可以正確無誤的傳達印象及訊息給使用者,達到網站的目的。

依據以上概念,有些網站可能不適合響應式網頁設計,比如入口網站、商城網站、遊戲網站等,需要閱讀大量文字或大量操作的狀況下,無法達到響應式網頁設計的理想要求。

表格2-響應試網頁  

附1:商城網站的確是不適合響應式設計,不過一但設計目標為響應式,就要以商城網站簡單架構為主,也就是框線構成的商城網站,不可有其他元素,這些都必須依靠前端工程師跟網站設計師緊密的工作合作。

RWD-未來的潮流

 

早期的網頁設計預設對象大多以一般家用電腦或筆記型電腦的瀏覽者為主,

所以在製作網頁時會以此規格為預計頁面的大小,然而隨著平板電腦及智慧型手機的普及,

傳統的網頁設計方式已無法滿足所有的網頁瀏覽裝置。

使用畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時,將會因為頁面寬度過寬而導致瀏覽者在瀏覽頁面時的不便

,因此為了滿足手機瀏覽者的需求,一般在進行網站製作時通常會再另外製作「手機版」的網站,

以滿足這些族群的需求,然而手機版網站雖然可以解決大多數手機瀏覽網頁者的不便,但對於花錢進行網站建置的企業來說,將額外增加一個網站建置的成本。

 

為解決這樣的窘境,現在有越來越多的企業選擇使用「響應式網頁設計(Responsive Web Design)簡稱RWD」的技術來製作網站。

RWD又稱自適應網頁設計、多螢式網頁設計或回應式網頁設計,簡單來說就是網頁會自已随著瀏覽者的網頁瀏覽裝置解析度的大小,自動變化網頁的寬度及頁面配置,讓瀏覽者能以最適合閱讀的格式呈現。


RWD網頁原理是使用CSS3以百分比的方式來進行網頁畫面的設計,讓網頁在不同解析度下瀏覽時,能自動改變網頁頁面的佈局排版,因為此技術解決了目前智慧型手機及平板電腦瀏覽網頁的不便,所以RWD網頁設計開發技術已成了新一代的網頁設計趨勢。

 

響4

 

在未來對網頁設計上,專業的設計公司也要有更新的思維,才能幫品牌客戶做到超乎水準的網頁,不但對客戶品牌加分,也更能突顯專業能力的表現。

 

參考資料來源:

http://blog.iprefer.com.tw/?projects=%E3%80%90%E6%95%B8%E4%BD%8D%E6%8A%80%E8%A1%93%E6%87%89%E7%94%A8%E3%80%91%E9%9F%BF%E6%87%89%E5%BC%8F%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88responsive-web-design

http://blog.btrax.com/zh/2012/08/09/%E7%83%AD%E7%82%B9%EF%BC%9A%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E6%A6%82%E5%BF%B5%E5%92%8C%E8%B5%84%E6%BA%90%E5%85%B1%E4%BA%AB/

如有侵犯或違反版權請告知我們並於兩日內下架

 

arrow
arrow

    創客專案顧問 發表在 痞客邦 留言(0) 人氣()