如果你還沒有接觸過響應式佈局，你得先明白響應式佈局和之前用的佈局方式稍稍有些不同，因為響應式佈局的目的是為了使網頁適應不同裝置，你需要一段時間的學習來最終實現一個響應式佈局的網頁。

我想展示一些舊的設計流程帶來的問題，在此基礎上引入一些新的方法和工具，在這個過程中，你將在學習響應式之路上找到起點和突破。

問題：

當我們用舊的設計流程試圖去得到新的結果時，或多或少會產生一些問題。這些問題就像霧霾，一開始我們沒有意識到並習以為常，直到有人明確。比如，當你在Photoshop中建立一個桌面大小、固定寬度的佈局，並交給開發人員解釋成HTML/CSS，我們已經要求開發人員做出許多設計決策。下面是個簡單的例子：

• 如何為不同大小的裝置調整佈局？（根據自己的意願將頁面元素層次化當然是很nice的）
  
• 那內容的層次是什麼呢？
• 怎麼樣使得導航響應較小的螢幕？

如果開發人員在審美方面有缺陷，那麼會導致大麻煩。但是有著正常審美水平的開發者或者設計師會對這些報以微詞並催促改進，這使得開發人員往往最後做出妥協，但由於沒有良好的反饋機制，導致不好的使用者體驗。 更多的工作量還是更有效的工作？ 你當然可以選擇做更多的工作去解決更多的挑戰，那麼你和你的團隊就不得不去設計一個桌面版框架和一個移動端框架，這將會大大增加你們的工作量，因為你不得不考慮不同裝置的大小和解析度。這時候你會意識到你處在一個惡性迴圈中，侷限在可交付成果和不斷縮小的利潤的困境。你會發現，用舊的設計流程其實不能真正解決問題，而且使你睡眠不足，利益減少。 因此需要新的設計流程來解決問題。有一些聰明的人認為答案就在瀏覽器上，但是不得不說，目前的設計工具還不足以能夠在瀏覽器中自由的設計。 也有一些新的想法出現，比如涉及到響應的HTML/CSS的原型看起來非常有前途。我計劃進一步調查這些。然而，這種方式也會帶來一些挑戰，比如在設計較為複雜的網頁之時，開發所用的時間也會變長。大部分通用的例子並不能良好的、便捷的轉化為專案。 目前我們正在成功使用另一種途徑。它試圖優化內容、設計、開發時間，以達到一種便捷、廣泛、有效、輕巧的平衡。 解決方案：Priority Guide 我習慣叫我這個解決方案為“mobile-sized content prototype wireframe thingy“，由於身邊每個我認識的人都建議我更改這個名稱，因此簡介勝出，我更名為：”優先順序指南“。 利用此方案，我們先建立一個單一的可交付成果，為文字集中和移動至上的設計開發相似的線框提供了方向。
從本質上講，移動大小的方法是更多的單列布局。單列又導致內容和特徵的線性顯示。這種線性顯示使優先順序和層次比桌面端大小的線框更為明顯，尤其是如果你試圖使用一個真正的內容而不是希臘文字，因此草案內容的原型（這裡不是很明白）。
在這一點上，武裝的只是這一優先指南，設計師設定關閉，創造一個美麗的。設計師我們信得過的PS圖象處理軟體，開始了一個新的佈局，在傳統的桌面解析度一樣，你可能已經在過去的十年中做的。一個好的網頁設計師（配備了自己的超級大國，它的視覺化）是提前做出設計決策的一個桌面解析度看著手機計劃。這就是他們的思想如何工作。

一旦設計工作完成，移交到開發者，包括已經完成的桌面設計和原手機大小的線框。