Responsive web design【響應式網頁設計】這個概念與開發網站設計有關，該設計用以幫助網頁適應每個用戶的計算機的分辨率，即根據每個用戶使用的計算機的分辨率不同而改變網頁的表現方式。更確切地說，這個概念允許一個4列布局的1292px寬度的網頁可以在1025px的寬度屏幕中顯示并自動簡化成為兩列。此外，它還能適應智能手機和電腦平板電腦。這種特殊的設計理念我們稱之為“響應式設計”。
現在你可以測試一下你的網站使用的響應式設計工具。
相比較與傳統的網頁開發設計，響應式網頁設計是一個完全不同的形式，并且開發人員【尤其是年輕的開發人員】要知道響應式網頁設計的利與弊。這篇博客就是一個能夠說明響應式網頁設計用途的一個很有用的例子。用來開發一個響應式網站最基礎直接的可能就是選擇“media queries”【媒體查詢，即根據條件給相應符合條件的媒體調用相應的樣式表】。然而唯一比較麻煩的是，新的查詢可以在瞬間彈出，但每一次跳動，網頁的外觀和組織都會產生突然和急劇的變化。專家建議這種情況可以使用CSS來緩解頁面的跳動。
包含數據表的頁面給響應式頁面設計師帶來了特殊挑戰。數據表在默認的情況下是非常寬的，當用戶縮小頁面去看整個列表時，列表就會變得太小以至于難以閱讀。但當你試著放大它以便可以閱讀時，就只能通過水平或豎直的滾動頁面來查看它。好吧，其實是有多種方式來避免這個問題的。轉變數據表的形式為餅狀圖或者微型圖形是已經被認可的一種解決方式。這種迷你圖形更適合狹小的屏幕。
圖片在響應式頁面設計中被稱作情景感知。這獨有的技術服務存在真正意義是在響應式設計中可以作為圖像服務于不同的分辨率，從大屏幕到小屏幕都可以完美適應。縮放圖像顯然在更新開發者的工具和編碼語言的幫助下更新的更加流暢，允許其在任何情況下都能更快反應。
響應式頁面設計與傳統設計的技術和創意方面有著顯著的不同，巧妙利用響應式設計在設計網站時就能得到驚人的效果。
響應式網頁設計實例
Simon Collison
盡管現在這個色調看起來灰蒙蒙的，網格式風格的網頁看起來有點單調無趣，但是當這個網頁發布時還是引起了一定程度上的熱議，因為他那高檔的布局。
主要原因是設計師集中精力在網頁的響應式交互上，這使得響應式設計能在最近開始流行，從而給普通設計師提供了一個典型事例，告訴普通設計師怎樣讓普通網格式布局的網頁優雅轉型。
Andersson-Wise Architects
我們來看一下這個建筑與設計工作室的網站，這個網站的主要焦點是以照片的形式來展示代表作品、以往經驗以及公司的顧客，這樣的設計方式并不奇怪。
整個網站頁面包括三個主要部分，每個部分都是以圖片為背景。這個靈活的解決方案有效地為每個標準屏幕尺寸都匹配了一個恰當的布局。為讀者提供了舒適靈活的網頁內容。
Stephen Caver
Stephen Caver是一個一流的響應式網站。你一定會問，他有什么特別。答案很簡單，仔細看一下前面的頁面，你就會知道，它包括：
-
一個巨大印刷字體的歡迎消息
-
網站頂部有一個巨大的區域放置菜單；
-
博客的規則布局。
可以這樣來說，每個網站都包含這三個基本方面。設計師給了我們一個對于網格式標記和博文根據設備的屏幕尺寸如何排版的正確示例。
Sparkbox
Speakbox 展示了一個企業網站的基本結構。布局相當簡單，它是基于一個標準，通常使用一組橫向色塊使每一組數據都能有序排列。
這樣的結構是很容易適應各種屏幕尺寸的。按次序排列的色塊即使發生變化也非常的順利和靈活，給用戶一個好看的和組織有序的布局。
Food Sense
這是一個普通的左側博客風格雜志布局加上眾多美味圖片充斥的一塊一塊的布局的網站，這個網站展示了它是如何轉化和適應不同分辨率的，并讓用戶看起來這些網站是同一個網站。
然而，并沒有什么一致的網頁布局規律，這個是公認的典型解決方案，用來吸引移動網絡的在線讀者，贏得了新的用戶。與此同時，網站解決了視覺過載的美學問題。
The Boston Globe
《波士頓環球報》是一個很好的例子，是一個經過用心規劃的新聞類響應式網站。網站采用傳統的方法,幫助那些需要運營自己經常更新的在線雜志的用戶們，讓他們能更好地使用網站功能。
雖然網頁很符合響應式規律，但是乍一看似乎網站有一點復雜,混亂的外表讓人覺得難以處理，實際上解決方案非常原始。設計師已經明智地把所有信息分割成了3列，并根據屏幕的大小，而讓數量增減,當屏幕變小時，布局從3列慢慢地遞減至2列直到只能顯示一列為止,這樣就能有秩序的展現你的所有信息。
Think Vitamin
說實在的，Think Vitamin無法吹噓任何關于它自身的博客設計。它的結構跟其他網站一樣。整個網站右側是一欄單列補充信息，一個網頁導航、一個logo、一個搜索框以及一個頁尾。
然而，這個團隊并不只是簡單地使用基礎的響應式結構；他們也積極地將設計元素集合起來。而且，對比色的色塊有助于分辨內容區域和一些功能性元素例如社交的視頻和廣告，擴大了手機用戶的可視區域以及加強了可讀性。
Sasquatch! Music Festival
Sasquatch! Music Festival有大量的多媒體內容，包括視頻和動態效果，此外網頁上加入了一些藝術的手寫體和夢幻的圖形內容。因此對于這種組合而言，如何在手機和平板電腦上能正確地顯示每一塊內容就成了一個挑戰。
盡管如此，這個網站中的響應式設計能夠被很好的詮釋。它恰到好處地處理了每一個細節，創造一個視覺上討人喜歡的外觀，甚至在小屏幕上也并沒有失去它獨創性的魅力。
Internet Images
這是一個干凈的有組織的網站，由一個靈活的橫向色塊條布局構成。這里也是通過強烈的視覺對比區分信息，從而完成響應式結構。
這種簡單卻強大的組合有助于提高可讀性，尤其是在小型設備上，十分規律的布局，每一塊都能持續地閱讀下去。但也由于這種固有的單調性，也能輕易地摧毀讀者的熱情從而降低讀者的閱讀興趣。
Staffanstorp
在這里，如果能夠處理好小屏幕的適應性功能，就如同在大屏幕上獲取內容的效果一樣。
-
出色的響應式是不管你的手機設備如何，都能展示出的網頁設計
-
良好的外觀結構增加了信息的層級關系
-
手機和平板是一個為讀者快速傳達信息的媒介。
盡管博客設計并不會與其他不同，但是它如果需要滿足web上精準的需求，還需要全新的一個水平。
Seminal Responsive Web Design Example
作為一個極受歡迎的網站意味著這個網站必須是一個響應式設計的完美的例子。它甚至有一個恰當的標題“一個靈活的網格”，網站的一切都沿襲一套完美的規則，所以它非常清晰。正如你看到的那樣，這個團隊更注重對信息和數據的展現而非視覺上，所以它所有的樣式都是暗色調的。
演示頁包括導航、文本區域、網格樣式區甚至是logo樣式，可以說它涵蓋了所有最簡單的元素。這個網站有邏輯地分區和布局，為網頁在適應用戶所攜帶的不同大小分辨率的設備上展示帶來了完美的解決經驗。
Naomi Atkinson
Naomi Atkinson利用馬賽克風格布局。這種解決方案被廣泛應用于想立刻創建固定長寬比作品的在線作品集。
這個網站值得一提的并不是因為他的設計，因為（說的婉轉一些）它還需要繼續努力，但由于其聰明的功能性，這點還是相當不錯的。設計師能很很好地解決當你縮小你的瀏覽器窗口的時候的問題，他將不規則的網格轉換成規則的網格。這還不是全部；頁面的變換隨著流暢的動效實現，這增加了這個網頁的吸引力。
Forefathers Group
你會怎么評價這個網站？當然，它給人一種特殊地、完全壓倒性的印象，這確實是一個無與倫比精巧的設計。這個團隊沒有張揚的設計，就是在一些細節中很好地把握，并傳達出它要表達的藝術效果。
網站的魅力與令人難以忘懷的復古風格字體、出色的手繪插圖、紋理背景和夸張的圖形。所有的這些元素巧妙地配合文字內容占據了整個網站。
因此，正如你縮看到的，這個團隊需要考慮大量的細節才能使網站看起來舒服一些，并讓網站能夠通過所有的設備瀏覽到。
Spigot Design
這個網頁中的響應式動作確實給用戶留下深刻的印象，不管是在包含網格式、逐行式數據顯示的標準布局中，還是在開場視頻、動態圖形和菜單中。
考慮到這一點，這個團隊致力于為在線觀眾提供一個優雅的設計。它有吸引人的特效和留白，更重要的是，這樣的設計很好地適應了各個屏幕的大小。
New Adventures In Web Design Conference 2012
基于靈活的網格設計，這個組織贏得了盡可能多的潛在訪客。同時，這種特性，不僅有助于網站的外觀，更有利于網站的宣傳活動。由于這個網站是專門為網頁設計的團隊，它很好地向用戶展示了這個團隊所認識到的當今網頁的需求，并嚴格地堅持于此。因此，建立一個具備所有流行元素的網站，是走向成功的重要途徑。
Illy Issimo
響應式設計對于高質量促銷網站來說是一種重要的功能，這樣能夠使網站更受消費者青睞。Illy Issimo就很巧妙地運用了這個特點，打造出一個靈活的界面：
為客戶提供一個舒適的體驗效果；
擴大受眾面；
吸引使用其他設備的潛在用戶。
因此，網頁上方放置有一個醒目的廣告圖。
Arrrrcamp Conference
這個網站把重點集中在文案上，而不是利用多媒體技術。網站基于一個單調的白色背景，使得文字能夠清晰地顯現，同時也加入了最近很流行的“虛擬按鈕”（“ghost”buttons）。
整個網頁可以隨著瀏覽器的大小進行適配；它能夠從1920像素到240像素之間進行靈活適配，對于紅寶石買家來說就是一個巨大的福利，她們可以用平板或者手機隨時在網上搜索必要的東西。
Robot or Not？
Robot or Not?是一個提出了靈活的網格布局的演示網站。
用文本和多媒體數據等量搭配，占據了整個瀏覽器屏幕（通常情況下）失去了網頁設計中所有的裝飾和創意造型，團隊試圖將這種常規的頁面設計成為一個優秀的案例，讓新手生動地了解布局是如何適應各種屏幕尺寸的。
Earth Hour
Earth Hour 的確是一個先進、復雜的網站，其中充斥著許多多媒體，這些多媒體包括視頻和吸引眼球的照片。同時，這個網站更是一個在線信息圖表，利用漂亮的圖形和流暢的變換使人們關注網站需要表達的信息。
不幸運的是，網站的適應性沒有做好，網站遭遇了來自平板版本引發的矛盾，更不必說在手機等更小設備上的展示效果。
Teixidó
這個創意團隊通過使用紋理，豐富多彩的圖片和插畫這種巧妙的手法更有效地在網上展現自己的公司， 讓它看上去與眾不同并抓人眼球。
擁有藝術性的一面絕對會非常吸引人。更別說還有適應競爭環境的能力了。這也是現在所要展現的正確方式。盡管網站是靜態的，沒有華麗的特效或是動態設計，但是響應行為很大程度促進了用戶體驗，這是非常有意義的。
Ribot
Ribot是一個高端的數碼設計工作室，專業從事手機，平板電腦和未來產品的設計–正如標題所說。
這里的關鍵詞是移動和平板電腦，這意味著這個團隊專注于創造出適合于這種設備的設計，所以這個網站即使在很小的屏幕上，也能很好地顯示信息，并提供給在線訪問者最適合的訪問公司服務的方式。
Deren Keskin
Deren Keskin具有緊湊的排版，干凈的在線作品集，顯然依賴于一個規則，每個頁面都能占據瀏覽器屏幕，甚至博客也是如此。
同樣根據響應而改變的布局，一切都壓縮到整個結構非常適合的屏幕中。而且，設計師設法保留所有的比例和元素，以確保網頁一開始設定的所有元素之間的優先級，使它們很好的布局。