響應式網頁設計(Responsive 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)