響應式設計現(xiàn)在已經(jīng)成為網(wǎng)頁設計師學習的焦點。優(yōu)設哥發(fā)現(xiàn)群內(nèi)有很多相關(guān)的討論了，這說明我們平時接觸該類案例越來越多。你會漸漸發(fā)現(xiàn)，我們身邊越來越多的企業(yè)和客戶關(guān)注到響應式網(wǎng)站，作為勤奮的設計師，我們怎么能不對它進行了解呢？
響應式網(wǎng)頁設計考慮到多平臺、多種屏幕尺寸的情況，能夠優(yōu)化多種設備的網(wǎng)絡瀏覽體驗。當你不知道用戶使用什么設備，不知道用戶的屏幕尺寸時，若想達到較優(yōu)布局，可以采用響應式設計。在進行響應式設計時，要專門針對內(nèi)容進行設計，優(yōu)先考慮在不同環(huán)境下內(nèi)容的適應性。
響應式網(wǎng)頁設計
過去，上網(wǎng)需要一臺電腦，一個貓�，F(xiàn)在呢，手機、平板、電視都可以上網(wǎng)。
Responsive Web Design, 由Ethan Marcotte編寫， A Book Apart出版，對響應式設計的原則進行了詳盡的闡述。
多種設備均能支持聯(lián)網(wǎng)，有利有弊：
好消息是，我們可以隨時隨地登入互聯(lián)網(wǎng)。壞消息是，設計師的工作量成倍的增加了，而且用戶變得越來越挑剔，越來越不耐心。在這種大環(huán)境下，響應式設計變成了主流。
響應式設計所帶來的挑戰(zhàn)
進行響應式設計，挑戰(zhàn)有很多。首先，設備種類、屏幕尺寸多種多樣。小、中、大各種各樣。其次，倘若你是開發(fā)者，你會明白從技術(shù)角度上，響應式設計實現(xiàn)起來也不容易。
mediaqueri.es 提供了很多優(yōu)秀的響應式設計案例
在任何項目上進行響應式設計時，都要優(yōu)先考慮內(nèi)容，考慮到內(nèi)容與整體設計的結(jié)合，考慮到內(nèi)容是怎樣在頁面中表現(xiàn)的。你需要觀察不同元素在頁面中是怎樣緊密結(jié)合、協(xié)同工作，從而保持一致而又整體的風格的。
在這種尺寸下，元素可以這樣布局，進行響應式設計時，你還需要琢磨琢磨其他尺寸的布局。如何將大尺寸頁面轉(zhuǎn)換到小尺寸頁面？如何將小尺寸頁面轉(zhuǎn)換到大尺寸頁面？如何保證多種尺寸下瀏覽體驗的一致性？
如何說服客戶使用響應式設計？
網(wǎng)頁設計是一個時效性很強的行業(yè)，我們需要緊跟趨勢潮流，不斷學習。響應式設計就是這個時代最值得學習、時間的趨勢。
Greenbelt Festival 是一例非常值得學習的響應式網(wǎng)頁設計，圖像來源mediaqueri.es.
網(wǎng)絡術(shù)語真是越來越流行了，現(xiàn)在即便是客戶，也略知一二，很多客戶對設計的了解也不淺。那么怎么說服客戶呢？下面我將講一點和客戶溝通的技巧，讓客戶接受響應式設計（相應的，工錢你懂的）。
投其所好
在任何項目的開始階段，都要明白、了解、分析客戶的需求。
在滿足客戶預期的基礎上，盡量讓客戶能夠完全的理解你的設計。
一款美麗的響應式設計Modern Green Home ，圖像來源 mediaqueri.es.
你要知道客戶想要什么。在你的大腦中轉(zhuǎn)換成術(shù)語后，再用平易近人的語言講出來。
例如，客戶可能會說他想要讓網(wǎng)站在”iPhone、iPad上都能良好運作”。這種情況下，我一般會說”好啊——那么響應式技術(shù)就能實現(xiàn)，能夠在任何設備上良好運作，而不僅僅是iPad和iPhone”
如果你的客戶稍微懂一點，那么估計合作會很愉快。
Stuff & Nonsense 網(wǎng)站是響應式設計的有先例，根據(jù)屏幕尺寸的不同，選擇不同的插畫，蠻有趣，圖像來源mediaqueri.es.
可以化點時間來給客戶做科普，這樣客戶能更好的理解你的作品，溝通起來就很流暢。
響應式設計一些技術(shù)和建議
那么怎么打造響應式設計呢？
The Great Discontent 的訪談很知名，同時也是優(yōu)秀的響應式設計案例，圖像來源mediaqueri.es.
有沒有最佳答案？答案是沒有最佳答案，每個人的開發(fā)流程、設計流程都不一樣。
不過呢，還是有幾種方法值得推薦，以及一些建議，希望其中一些能夠?qū)δ阌兴鶐椭�，你可以汲取幾條，并進行結(jié)合。要注意多實驗，多嘗試不同的方法，看看哪種最適合。
利用圖像工具設計
利用PS和其它工具創(chuàng)建一個固定寬度的模型，這種方法可能是大多數(shù)人設計網(wǎng)站的方法。但是依然有效。利用圖像工具能夠更直觀的布局。
UX London 2013 伸縮自如，非常優(yōu)雅的響應式設計，圖像來源 mediaqueri.es.
但是不要太死板，為每一種尺寸都單獨的設計模型，否則你肯定會因耗時太長而抓狂�？梢岳镁�框圖，不必過于精細，多多思考一下內(nèi)容、尺寸、布局三者變化關(guān)系，怎么整個？怎么改變？
哪里變動較小？哪里變動較大？在開始編碼前，這些都要了然于胸。
在瀏覽器里進行設計
這個有一點爭議性。最近網(wǎng)上關(guān)于此話題的爭論很多
WWF 的響應式設計，圖像來源mediaqueri.es.
在瀏覽器內(nèi)進行設計，指的是當完成線框圖階段之后，直入瀏覽器，利用各種在線工具，開始設計。而不用任何圖像工具。
如果你能有效的運用在線工具，那么這種發(fā)很好用。
但是很多設計師認為這樣設計會限制創(chuàng)意，無法打造更優(yōu)秀的視覺。
The Next Web 的網(wǎng)站，即便在小屏幕上，內(nèi)容組織也依然有序，圖像來源mediaqueri.es.
但是對開發(fā)者來說，他們更習慣使用代碼，無疑，瀏覽器式設計對他們更合適。
案例：
CSS Tricks
微軟
在瀏覽器中做決定
這是個人最愛的一種方法�？梢栽趫D像軟件里完成一點工作，利用在線工具和瀏覽器再完成一點工作。
而且我認為，想要檢驗網(wǎng)頁設計的優(yōu)劣，必須要在瀏覽器里檢驗。
而且字體經(jīng)常在瀏覽器中發(fā)生變化，利用瀏覽器檢查設計，是很好的辦法，能幫助你迅速改正設計。
Microsoft 的響應式設計蠻有意思：利用圖像的裁剪和分割，在不同的設備中體現(xiàn)差不多的效果。圖像來源fmediaqueri.es.
而且這種辦法更加靈活，既能用圖像工具優(yōu)化設計，而且還能用瀏覽器鞥更好的檢查設計，查看結(jié)果。
內(nèi)容優(yōu)先, 移動優(yōu)先還是沿襲桌面?
首先要記住，無論怎樣，內(nèi)容有限。內(nèi)容是設計的核心，是用戶瀏覽的主題。
Philip House 是個從大到小、沿襲桌面的設計，很有創(chuàng)意，圖像來源 mediaqueri.es.
其次，不管你的設計是移動優(yōu)先（從小尺寸布局開始，逐漸擴大尺寸）也好，還是沿襲桌面（從全尺寸桌面布局開始設計，逐漸縮�。┮擦T，一切取決于你的習慣和具體情況。
從小到大能獲得更好的兼容性、一致性。從大到小能更具創(chuàng)意。
一些工具
這里提供了一些有用的資源：
柵格
字體
樣式指南&模式庫
案例研究
- David Bushell: A Responsive Design Case Study
- David Bushell: Gloople: A Responsive Design Review
- David Bushell: Responsive Design for Kings Transfer
- NHS Responsive Design Case Study
- Our very own Case Studies section has some great tips on responsive design.