利用以前的設計過程進行響應式設計，正暴露出諸多問題。怎樣的設計過程才能滿足響應式設計時代的要求呢？「優先順序引導」是sparkbox公司經過諸多嘗試總結出的設計過程。它將傳統設計過程與移動優先設計進行了完美結合，讓響應式設計變得如此簡單、完美。sparkbox公司的內容策略主管drew clemens近日發表了一篇博文《design process in the responsive age》，分享了這一設計過程。內容如下：
我願意幫你解決在響應式設計中由於採用以前的設計過程而導致的一些問題。現在展示一下我們正使用的、改進後的設計過程，該過程中用到了一些很不錯的新交付物和工具。它應該能成為你重新整理自己設計過程的乙個起點，並將你帶入響應式設計時代。
所面臨的問題
通過以前的設計過程來獲得一些新的結果，這期間所引發的問題往往會很嚴重，但新奇的是，它又並非會立即顯現出來。往往我們對這種設計過程早已習慣，正如我們無法意識到自己令人討厭的怪癖一樣，直到有人為我們指出。從此之後，這一「怪癖」恐怕會把我們逼瘋。比如，如果我們用photoshop設計了乙個桌面大小、固定寬度的**布局，並將其直接交給開發人員，使其轉化成網頁格式，這意味著我們正請開發人員做更多的關於設計的決定——最終可能無法實現它。下面列出了會遇到的一些小問題：
● 這個布局如何適應小尺寸的裝置呢？（依據目標，對重要頁面元素設定乙個層級關係將是非常不錯的。）
● 內容間的層級關係是怎樣的呢？
● 導航如何響應更小的螢幕呢？
如果開發人員在視覺化領域沒有太多自信，可能會導致嚴重的問題。即便在該領域感覺良好的開發者和設計者也會陷入困境。最終，開發者常常被迫在還沒完全規劃好的地方做出自己的假設，有時這種情況也會發生在設計者和客戶反饋的資訊得到確認之前。
解決方案：優先順序引導
做更多的工作，能很容易解決這個新挑戰。很自然，你可能會相到，建立乙個適應桌面和移動大小的線框，然後再設計乙個適應桌面和移動大小的布局。這在一定程度上解決了這個問題。這時至少有更多的工作需要你和開發者去做。不管怎樣，針對不同裝置有不同寬度，你的設計也必須能覆蓋他們。不是嗎？
現在，我們成功發明了一種不同的方法。以嘗試優化內容、設計、開發的時間，從各種不同的方法中找到合適的方向，以達到預算平衡——它要高效、簡小、能快速使用、具有方便訪問的各種工具。
該方案稱之為「優先順序引導」。在「優先順序引導」中，我們會建立乙個簡單的交付物，靠某種方式，如線框圖，為專注於內容的設計和移動優先開發提供指導方向。
很自然，根據移動裝置的尺寸進行設計的方法會產生更多單列的布局設計。反過來，單列可以線性地展示內容和功能特性。相比桌面大小的線框設計，此種線性展示更能突出優先順序及層級結構，尤其當你嘗試使用實際內容的草圖來代替難懂文字時。
從這一點上，依靠該「優先順序引導」，設計者就可以創造一些精彩的東西。設計者可以開啟photoshop，按照傳統桌面的設計方法設計乙個全新的布局——正如你過去十年來所做的那樣。對於優秀的web設計師來說（已具備很了不起的視覺化設計能力），面對針對移動裝置的設計計畫，去為桌面產品進行設計，這簡直太棒了。
一旦設計工作完成，傳送給開發者手裡的將是乙個完整的桌面尺寸的設計和最初移動裝置尺寸的線框圖。
不要被「簡單」愚弄
這個方法聽起來簡單——這也是它之所以美好的一方面——但它也確實能帶來一些益處。
● 開發人員分別獲得了桌面和移動裝置兩大方向的設計方案。兩個方案都提供了獨特的資訊。一些互動雖仍需要開發人員來做，但這並不是壞事，畢竟現在少了很多靠猜測來完成的工作。
● 設計者手中的針對移動裝置的線框圖，已提供了內容的層級結構，但卻未提供桌面尺寸的設計布局。而這就恰為設計者提供了更多自由的創作空間，以免他們陷入失望、無聊的狀態。
● 通過原型、線性的展示，層級結構變得更加容易理解。移動優先設計中的標記和樣式標準雖然沒明確的規定，但卻很靈活。
● 和以前一樣，所有這些完成於二期交付物的產生過程，這樣既節約了時間又節省了預算。在相同的時間（或更少）內獲得了更好的結果，自然是一件好事。
關於內容的注意事項
每每談起移動web時，針對內容的各種問題都會成為討論焦點。有提供「移動內容」嗎？如果確實有，使用者在移動過程中，對**的內容會有不同的期望嗎？如果使用者確實有不同的期望，我們如何解決他們呢？
簡言之，這些問題並不在本文所要討論的範圍。這些問題在其他地方都有很多深入的討論。我認為，根據專案的不同，關於內容的這些問題的答案也會不相同。這些問題就留給你和你的團隊了。
但在這裡我仍想建議，在對使用者做出假設時一定要認真考慮，並對內容加以限制。雖然移動內容可能存在，但你並不能僅憑螢幕的尺寸來做出這些假設。使用者倚靠在沙發上通過iphone上網，當他們坐著或看電視時，會用全部的時間來訪問你站點的所有內容。這就是我們相信響應式web設計方法的理由，它能使你的**更好安全，基本不會降低使用者的體驗。這也正是本文中所提到的方法——根據所在的環境提供完備的內容。
可考慮使用的工具
style tiles
針對線框的keynote
近來，我十分沉迷於該keynote中——可以十分出色地設計移動裝置大小的內容原型線框。它快捷、易學、易分享。它是乙個十會奇異的線框繪製和計畫工具，有很多不錯的工具可供你使用。
結論
不要害怕嘗試新鮮事物。沒有一勞永逸的設計過程，工具和交付物也同樣。如果本文的解決方案並不適合你的專案，拋開他們，嘗試其他的過程。不管怎樣，你必須改進你的設計過程，以使用使用者和web的革新。你希望解決新的問題，就必然需要乙個新的方法。
你也必須解決人們之間的溝通問題。團隊成員和客戶之間越早、越頻繁的協作必須成為你工作流中的規則，沒有特殊情況。內容、設計、開發團隊成員間必須在建立過程的每個階段定期地評審與協作，知道**「成活」。
響應式設計的困惑
縱觀現在國外的 基本上都採取清一色的響應式設計 responsive web design 優點自然不必說 可用性，不管什麼解析度都可以完美適應 內容重複，可以保證所有版本的 一致，對於搜尋引擎更加友 當然我想說的非優點，而是來講一講rwd的缺點 也是我們要主張使用rwd重構你的 的時候困惑的地方 ...
響應式網頁設計教程 展示響應式設計的基本原理
響應式網頁設計，毫無疑問地變得越來越重要了。如果你還沒聽說過響應式設計，可以先看看我之前發的文章響應式 對新手來說,響應式設計聽起來可能會有點複雜,但事實上，它比你想象的簡單得多。為了讓你能快速入門，我準備了乙個簡易的教程。通過這三個步驟，你一定可以了解響應式設計的基本原理和media query ...
網頁設計中的響應式布局設計
在談響應式布局前，我們先梳理下網頁設計中整體頁面排版布局，常見的主要有如下幾種型別 布局型別 布局實現 採用何種方式實現布局設計，也有不同的方式，這裡基於頁面的實現單位而言，分為四種型別 固定布局 可切換的固定布局 彈性布局 混合布局。固定布局 以畫素作為頁面的基本單位，不管裝置螢幕及瀏覽器寬度，只...