關於響應式網站的技術提示
我很好地解釋了為什麼引導客戶很重要，現在我要告訴您設計響應式網站的最佳方法。
您可能會理解您的開發和編碼，在應對響應式網站時，每個人的工作流程都是不同的。這本身就很好，因為這意味著我們總能產生新的工作方式。
別擔心，我將給您一些設計響應式網站的建議，在結合上一篇響應式 WordPress 網站設計的一些建議（一）的內容，您應該可以很容易地付諸行動。您可以選擇使用它們，並在您認為合適的時候組合應用它們。嘗試各種不同的方式來設計響應性網站，看一看哪些方法最適合您。
視覺稿
在 Photoshop（或其他任一款設計軟體）中為靜態寬度的站點建立一系列視覺稿曾經是大多數設計師設計網站的方式，對一些設計師來說，現在仍然使用這一工作流程。如果您喜歡使用圖形設計軟體來設計網站的視覺稿，這確實很好。
但不要試圖為每一個解析度或寬度設計一個視覺稿，大量的視覺稿會讓您抓狂。相反，回想一下有關線框圖的技術文章。考慮一下我們是如何看待這些線框圖的內容流的，以及我們是如何決定將所有內容佈局在設計稿上的。試著將它們轉換到您的設計中，並考慮當螢幕大小改變時，這些元素將如何流動和移動。
內容的變化將是重要的, 可以建立幾個不同尺寸範圍內的展示模型。但對一些其他變化, 例如文字編輯區域, 我認為最好保持為初始的編碼原型。如果您喜歡為每個主要階段設計一個模型，那麼無論如何，請繼續，只要您知道這將增加到您的專案時間。
在瀏覽器中設計
您可能聽說過在過去圍繞著瀏覽器設計的爭論。在瀏覽器中設計是指您從一個線框圖階段直接進入瀏覽器開始設計階段，而不是使用任何圖形軟體設計視覺稿。如果您使用很多線上工具來幫助您建立您的設計層級元素，這也可以很好地工作。然而，許多設計師會認為在瀏覽器中進行設計很困難，這是因為他們覺得這麼做限制了他們的創造力，讓他們更難想出有創意的、獨特的、視覺上令人興奮的構思。但作為一名開發人員，您很可能非常喜歡使用程式碼，因此樂於在瀏覽器中嘗試進行設計，並看看會得到什麼結果。
在瀏覽器中做決定
這可能是我個人最喜歡的。在瀏覽器中做決定意味著您可以在圖形設計軟體和瀏覽器中做同時工作。就我個人而言，我認為您想要得到一個更好的設計結果，必須將它放置在瀏覽器中進行驗證。視覺稿在圖形設計軟體中的呈現方式總是與在瀏覽器中的呈現方式有些不同，在瀏覽器中驗證建立原型和並快速迭代階段效果要好得多。
混合使用圖形設計軟體和瀏覽器的工作意味著您可以為您的設計和您必須做出的決策提供很大的靈活性。雖然在圖形軟體中可以做出許多重大的創造性決策，但瀏覽器是您最終選擇的產出環境。
內容為先，電腦端為先或是移動端為先？
首先，如果您還沒有從上文中學到什麼-先開始您的設計工作吧。這意味著您要確保您使用的是真實的內容和您設計的網站上要使用的內容。
其次，您是在移動裝置上工作 (從更小的佈局開始) 還是在桌面自頂向下 (從全寬的桌面佈局開始) 完全取決於您自己。網上有很多相關爭論，但實際上這是您自己的決定。如果您覺得從更大的尺寸到更小的尺寸更有創意，即使您以相反的方式建造網站，那也沒關係。
一些有用的響應式設計工具
讓我總結一下一些有用的工具資源，有很多工具可以幫助您設計響應式網站，看看吧：
網格
·Gridset（http://www.gridsetapp.com/）
·ZURB Foundation（https://foundation.zurb.com/）
·Inuit.css（https://github.com/inuitcss）
字型
·Typecast（http://typecast.com/）
·Typekit（https://fonts.adobe.com/?ref=tk.com）
樣式指南和樣式庫
·Styletil.es（http://styletil.es/）
·Brad Frost’s Pattern Lab（http://pattern-lab.info/）