隨著大家人手一支智慧型手機的普及網頁設計的技術近年來也開始重視行動裝置上的互動視覺效果了,最近與客戶解釋到手機版的網頁時版或是行動瀏覽時,都會提到響應式網頁設計(Responsive Web Design)這個設計方式。
大多數客戶大多都不懂,但是其實在國外已經是網頁設計的標準規格。也是目前各大跨國企業跟集團在網站設計更新時一定會要求響應式網頁設計規格。也是未來網頁設計規格的趨勢。
小編這些收集了一些響應式網頁設計相關資料說明一下,以往一般的手機版網站設計都是與電腦上的網站區隔開來另外再製作,所以以前的作法都是會製作pc版網站跟手機版網頁兩種。
但是若是舊網站只作手機版,而沒有整個網站設計重新設計製作,就會導致網站管理者若要更新網站內容時就必須要更新兩次,尤其是網站沒有後台管理系統站的網站設計,又委託給不同站的網頁設計公司作電腦版跟手機版網站時,網站資料修改或是更新就更加麻煩了。
時常不能同步更新資料,造成很多公司跟企業的真的困擾,不小心沒有同步更新到時,常會引起不必要的客訴,若企業網站同時具備多國語言版本,又沒後台資料庫可以更新,光是想到要修改網站設計內容就造成很多使用者的不便。
什麼是響應式網頁設計(Responsive Web Desig)?
響應式網頁設計(Responsive Web Design)概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出的概念。
簡單的來說讓網站可以針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時,整個網頁頁面會對應不同的解析度,而有不同的呈現方式,也是是說可以讓最重要的訊息在有限的版面中清楚的呈現給用戶。
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個因移動平台的用戶大量增加而想出的一個對應方法。
一般而言,在建置一個網站時,最先會考量的就是網頁的解析度,只要有經驗的人,會馬上講出1024×768這個標準解析度,這也是台灣目前絕大多數網頁的設計框架。
但問題來了,目前行動手持裝置(智慧型手機)的數量,己經正式超越了PC,成為企業不可忽略的新興力量,面對於各式各樣的手持螢幕尺吋,EHTAN MARCOTTE提出了響應式網頁設計概念,所謂響應式網頁設計,就是在整個網頁設計頁面上,會對應不同的螢幕解析度,而有不同的呈現方式,讓瀏覽裝置只是一個載具,使用者才是真正的主角。
這種設計,不單單只是程式碼的配合而己,整體網頁在架構及設計上,一開始就要導入響應式網頁設計的概念,在響應式網頁設計概念的引導下,網頁設計框架必需框架簡潔俐落,訊息清晰易讀,搭配優美的圖片,採用 Html 5 特效動畫設計,讓整體網頁整體設計可以正確無誤的傳達品牌形象及企業訊息給使用者,達到響應式網站的目的。
依據以上概念,不過有些網站可能不適合響應式網頁設計,比如大型入口網站、購物商城網站、遊戲網站等,需要閱讀大量文字或大量操作的狀況下,無法達到響應式網頁設計的簡潔理想要求。
以下介紹國內外響應式網頁設計實際案列應用
台灣保時捷
台灣Adobe
奇異電子(全球最大電器公司)
台灣NOKIA
HTC全球官網
台灣微軟
http://www.microsoft.com/zh-tw/default.aspx
AMD 全球官方網站
柯文哲-官方競選網站
矽統科技(上市公司)
http://www.sis.com.tw/default_tw.aspx
雲端數位科技有限公司-頂級網頁設計公司
Minmax Digital Technology Co .,Ltd.
台中市北區太原路一段532號7樓之1
TEL: (886-4) 2205 0705 資深專案經理 Eric
FAX: (886-4) 2205 0706
E-Mail: eric@minmax.biz
官方網站: www.minmax.biz
留言列表