會員登入
首頁 > 最新消息列表 > 響應式網頁設計 Responsive Web Design RWD 自適應(單一銷售頁) 歡迎來電了解

響應式網頁設計 Responsive Web Design RWD 自適應(單一銷售頁) 歡迎來電了解

展示位置 http://dev.lovewed.tw/david/rwd_template/

在此介紹一下 響應式網頁設計(RESPONSIVE WEB DESIGN)responsive

隨著智慧型手機的普及網頁的技術近年來也開始重視手機上的視覺效果了

最近與客戶解釋到手機板的網頁時

都會提到“Responsive” 這個辭彙 但客戶大多都不太瞭解

所以在此想解釋一下

 

早期的手機網頁開發都是與電腦上的網站區隔開來另外再製做

但是這樣導致管理者若要更新網頁內容時就必須要更新兩次

 

響應式網頁設計(Responsive Web Design)

這是一項被公認在2013年網頁開發技術的重要進步之一

網站使用CSS3 media queries方式,以百分比的方式以及彈性的畫面設計,在不同解像度下改變網頁頁面的佈局,的讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,因為移動平台的用戶大量增加而想出的一個對應方法。

 

說得簡單一些,透過CSS,可以使得網站透過不同大小的螢幕視窗來改變排版的方式,使得使用者能夠得到最佳的視覺效果

由於是由同一個網頁轉變,管理者也就不必大費周章的重複更新網頁資訊,一次搞定!

不僅手機版本,就連平板電腦如iPad等的平台也能夠達到視覺最佳化


另一款說明

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

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

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

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


什麼是響應式網頁設計(Responsive Web Desig)?

響應式網頁設計(Responsive Web Design)概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出的概念。
簡單的來說讓網站可以針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時,整個網頁頁面會對應不同的解析度,而有不同的呈現方式,也是是說可以讓最重要的訊息在有限的版面中清楚的呈現給用戶。

如下例子,我們用世界自然基金會(World Wildlife Fund)網站來做示範,大家如果手邊有不同設備的話也可以同時測試。
相關網址: http://worldwildlife.org/

螢幕解析度寬度在1024以上的畫面


螢幕解析度在400像素到600像素之間,原先的4張圖片會自動縮成二行。


如果螢幕解析度在400像素以下,我們可以看到不管螢幕解析度尺太變化如何,網站的呈現可以很靈活的呈現,同時也使用者在觀看網站時減少縮放、移動和捲動動作。

 

對於網站設計師和前端工程師而言

網站設計師和前端工程師以往在製作網站時,除了考量美工視覺設計,還需考量不同設備各種瀏覽器螢幕解析度的相容性,又需要為了設計網站手邊又需找各種的設備或以及在自已的電腦安裝許多外掛來測試網站。

例如光一個網站需要提供多種設備版本服務,這樣做法雖然滿足了使用者的需求,但是對於網站設計師和前端工程師而言非常麻煩,除了同時要維護好幾個版本,又會增加網站架構設計的複雜度。於是響應式網頁設計概念在綜合上述,讓「網站一次設計,全部適用」在同一個網頁自動適應不同設備,各種瀏覽器螢幕解析度。

相信大家對於響應式網頁設計應有初步概念的了解,響應式網頁設計將會是未來設計的趨勢。

 

 

專人客服中心
LineID 360ivan
Line@創點整合行銷中心
加入Line@生活圈
Line@小P團購網
加入Line@生活圈
 
Line@旅遊俱樂部
加入Line@生活圈
Line@我是高雄人
加入Line@生活圈
 
留言討論

gotop
返回首頁 360版型庫 關於我們 架站步驟 優勢特色 作品案例 方案報價 立即諮詢 後台管理
頁面運行時間: 0.252830028534 秒