一個真正的面向Web的工作流是一個包含了網(wǎng)頁的基本概念和技術。當然，你可以使用任意數(shù)量的可視化工具來創(chuàng)建網(wǎng)站，是技術上的響應，但你會缺少點。

這不是一個適應性強的布局。這是關于為盡可能多的人訪問的信息。有一些東西像邊緣回流只是一個程序不能做?？傊?，你需要編寫代碼。

因此，最好的工具，以幫助您在響應式設計工具，幫助您了解和利用Web技術，徹底規(guī)劃你的網(wǎng)站，更有效地寫出更好的代碼，并測試/展示您的設計在上下文中的客戶響應。

下面然后我們開始列舉吧：

1）我們所用的瀏覽器

我不是在開玩笑。毫不夸張地說這是最重要的工具，因為它顯示了您的特定條件下，您的網(wǎng)站看起來像你到底是什么。

已經(jīng)有很多的辯論，關于是否在瀏覽器中設計優(yōu)于設計，如Photoshop或GIMP圖像編輯器。請允許我為你解決這個...

是您的網(wǎng)站的用戶要在Photoshop中做他們的瀏覽？圖像編輯器可以使漂亮的圖片，而不是模擬的實際經(jīng)驗。使用圖像編輯器編輯圖像。使用你的瀏覽器設計網(wǎng)站。

的時間戒掉關閉超詳細的樣機，他們已經(jīng)習慣了我們的客戶了。隨著網(wǎng)絡的變化，我們的流程變得更加流暢和迭代，我們必須繼續(xù)前進。

至少安裝一個與每一個主要的瀏覽器渲染引擎，并得到一些開發(fā)人員擴展。用來尋找你的源代碼瀏覽器的方式看到它，因為你要在這里一段時間。

2）谷歌驅動器的繪圖應用程序

從技術上講，幾乎所有的基于矢量的圖像編輯器，可以做的工作，當線取景您的網(wǎng)站和應用程序。我傾向于線框第一，我的網(wǎng)站的桌面版的文件創(chuàng)建副本，調整畫布的大小，并從那里走。使用向量可以很容易地快速調整和重新安排你的元素，而你仍然在規(guī)劃階段。

我喜歡繪圖應用程序在谷歌驅動器有兩個原因：

共享和協(xié)作功能：谷歌信息共享的不僅僅是每個人都更好。隨著上下文評論，同時編輯，視頻群聊一體化，我戀愛了。

自動指南：在每一個繪圖文件，引導你把每個對象的文件尺寸的基礎上，會自動創(chuàng)建。這可以很容易地在文檔中的元素，這是偉大的網(wǎng)格像我這樣癡迷的設計師描繪大小一致。

正如我與客戶分享這些線框，即具有專業(yè)外觀的一致性是一大利好。然而，我不限制這些指南。我認為這是一個很好的替代樣機的應用程序，嘗試限制你到網(wǎng)格。

3）風格原型基于風格瓷磚，

風格原型是一個旨在幫助你給你的客戶知道他們的網(wǎng)站的排版，顏色，和UI元素將如何在瀏覽器交付。因為它的目的是要在瀏覽器中觀看，將有更少的不一致之處，一旦網(wǎng)站的建立。

此外，我也斷定，風格原型能夠幫助我們的客戶在精神上UX和美學的概念分開。真的，幫助我們的客戶更好地理解網(wǎng)頁設計過程中的任何東西，只能是一件好事。

4）Responsinator工具的好處

Responsinator是一個簡單的工具，可以顯示您的網(wǎng)站在不同尺寸。它模仿，在一個很基本的方式，有幾個不同的設備大小和背景。這個工具是不是為了你。你想看到你的網(wǎng)站看起來像在較小的尺寸？調整您的瀏覽器窗口的大小。更妙的是，獲得一些實際的移動設備，并做一些真正的測試。

酷站網(wǎng)址：http://www.responsinator.com/

5）Adobe邊緣的檢查（Adobe Edge Inspect）

現(xiàn)在，這個人是你。如果你有一個移動測試實驗室（越早，你可以做一個更好的）

邊緣檢查

將同步您的所有設備在同一頁面上一次。刷新頁面，在一臺設備上，重新整理所有。

不像這個名單上的其他人，這不是免費的。但是，如果你能買得起足夠的移動設備需要這樣一個解決方案，它可能是值得的錢。

結論

與往常一樣，最重要的資產(chǎn)是你的大腦。這些工具，以及其他類似的，只能幫你對你的方式。我選擇了這些，因為他們的表現(xiàn)非常具體的功能，幫助我設計響應網(wǎng)站。他們不限制我能做些什么。

最好的工具是真的那些可以保留的方式。