2014
01
27

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

關鍵字:RWDResponsive Web Design響應式響應式網頁設計

隨著生活越來越講求便利、快速,我們的生活也越來越數位化、行動化。各類的行動裝置逐漸的取代了PC,成為了不可忽視新趨勢。著名網頁設計師Ethan Marcotte於2010年5月提出了響應式網頁設計概念。所謂響應式網頁可依照螢幕不同的解析度,而變更網頁的編排,讓裝置只是一個介質,使用者才是真正的主角。



響應式網頁設計不單單只是程式碼的配合而己,在網頁整體規劃上一開始就要導入概念,在概念的引導下規劃出簡潔的畫面、清楚明瞭的訊息,搭配簡單的圖片,不使用任何Flash動畫,讓網站可以正確的傳達印象及訊息給使用者,達到網站的目的。

響應式網頁如同HTML5一樣,絕對是未來網頁設計的一個重要方向,但並不是萬能,目前仍有太舊的瀏覽器,如IE6、IE7等不支援的問題,最終還是必須依專案內容及目標來取捨。

這裡介紹一本書「HTML5+CSS3 智慧型手機專用網站設計」
清楚的介紹了響應式網頁設計規則:如何建立能與智慧型手機進行良好互動的網頁設計、如何判斷裝置的特性與功能、如何設定View Port以及如何讓網頁支援高解析度的裝置。



也介紹一個Web Responsive Design Tool模擬各行動裝置解析度的顯示畫面-「VIEWPORT RESIZER」(http://lab.maltewassermann.com/viewport-resizer/)

進到網站後,對著中間藍色的按鈕,按住不放拖拉到Chrome的書籤列中。
之後就可以找一頁你喜歡的網頁來玩玩看囉!


以下提供幾個網頁範例,大家可以用上面介紹的功能來玩玩觀看唷!!

Simon Collison (http://colly.com/)


Stephen Caver (http://stephencaver.com/)


Food Sense (http://foodsense.is/)


Seminal Responsive Web Design Example (http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html)


文章內容截自:
【數位技術應用】響應式網頁設計(Responsive Web Design)
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所