Screenqueri.es，一定要用的全響應網頁設計測試網站
最強的全響應網頁設計測試網站
我曾經介紹過RWD 是響應式網站設計一定要有的書籤工具，今天要介紹我使用過最棒的全響應設計最棒的線上測試環境Screenqueri.es。直接在瀏覽器上測試超過60個行動裝置
支援超過60個行動裝置解析度，只需要從下拉式清單簡單的選一個裝置名稱即可進入測試狀態，當然你也可以隨時改變解析度看看預覽結果。不單可以測試http網站，就連本地端的連結也是可以直接測試的，厲害吧？不過你必須花一點時間註冊帳號才能使用。網站連結：Screenqueri.es
不只是iPhone, iPad, 主流品牌android…連Kindle或各大廠的平板電腦都可以一併測試了。而且是完全免費的。
Patternify，最好的Pattern生成工具網站
不論是在Photoshop需要一個填色圖案，或設計一個網站用圖騰，Patternify 都可以為你做最棒的工作，直接輸出一個png擋，或者拿到Base64 編碼的語法。
什麼是Base64 編碼？
英文是Base64 Code，這個語法可以使用在CSS上，就是傳說中用語法寫出來的點陣圖呢，通常被用在網頁背景圖。
CSS3 Generator，CSS容器生成器
網址：CSS3 Generator
使用方式：
- 直接使用調整面板，記得面板的右邊有+的按鈕都可以打開進入細項調整。
可以搭配Gradient Generator做出絢麗的按鈕唷！
我也弄了一個範例：
The Responsinator，響應式網站測試工具
有兩個傢伙搞了一個線上測試的網站，只要輸入網址就可以預覽在iPhone3, 4, 5, iPad, android一些主流解析以及甚至kindle上的顯示結果，而且還可以操作喔！
網站：The Responsinator
使用方式：
- 直接在左上角輸入網址，按下GO，就可以了。
而且不只是直式預覽，橫式預覽也一起包辦了。
Stackexchange，全球最專業的技術問答網站
2000年初Google曾經實驗性的請了各領域的專家成立了問答網站，讓專家來回答全世界各領域的問題，不過這個網站營運沒多久就收掉了。直到前幾年Google又搞了個好問服務，讓每個人都有機會做專家。Yahoo在Google之後也開始了knowledge(知識+)的服務，不只是這兩大巨頭，中國大陸各個大型網站也相繼推出問答服務網站如百度、天涯、知乎…等等不計其數，可見問答服務相對網際網路舉足之重。
最終經營問答網站的知識性服務需要的兩個重點是發問品質和回答品質，兩者缺一不可。每一個品質低劣的發問都可能造成垃圾問題滿溢於網站裡，每一個品質低劣的回答亦造成找資料人的腦殘和時間浪費，說到這裡忍不住說一下知識+的腐敗，我常常想為什麼台灣雅虎要把各種不收費的服務做爛，難道是廣告賺太少嗎？
Stackoverflow網站
StackExchange這家公司似乎看準了這個關鍵，針對各種知識領域分別成立了問答網站，並且請專家細心分類經營，今天要介紹的是http://stackoverflow.com/ 這個分站，在這裡可以找到最新最深入的程式設計解析，如果你經常使用Googel搜尋技術性問題，相信你一定經常連結到這個網站。
Stackoverflow帳號申請容易，但管理非常嚴苛。
- 你不能問一個別人問過的問題。
- 你不能問一個水準很低的問題。
- 你不該問一個很入門的問題(例如CSS是什麼？)。
- 你只能問一些很棘手解決的問題。
問答網站的主要人物
專家才是問答網站的主要人物，其他的人是為了找棘手的問題來請專家回答而值得存在的，這樣的對話才是問答服務網站主機資料庫裡該存放的東西。發出深入問題的專家和能回答深入問題的專家，兩者到位才能保障問答網站地位。
Stackoverflow有多嚴格呢？
我的第一個帳號大概問了三個問題後就被限制永遠不得發問了~
而當時我問的問題也不算膚淺，第一個是沒搞清楚Stackoverflow的知識領域，問了一個不太算技術性的問題，被其他會員檢舉一次。第二個雖然是問了一個技術問題，但因為該領域的英文用語我不熟習而發問內容卡在字義上的理解不足，我又被檢舉一次。最後一個是我回答了一個技術性問題又因為不夠理解發問者所描述的需求而又被檢舉了一次。然後我就收到永遠不得再發問的通知。這三次都是其他會員對我的檢舉，然後管理員就放棄我了，這種管理機制在區區2300萬人口的台灣竟然落實不了。
在Stackoverflow如果活躍起來成為一個答題專家，可以有效的提高你的專業能力形象，這也是為什麼一些老外會在自己的個人網站上提供Stackoverflow的個人連結，並且基於這個優勢亦可以取得很多商業機會，一個Stackoverflow的專家形象不論是對經營公司或者freelancer來說都是很重要的勳章。
如果你的英文夠好，或者你想把英文學習好，建議你去申請一組Stackoverflow的帳號，參與全球同行的互動，應該能意外的接到一些國外的專案外包。
網站：http://stackoverflow.com/
Gridpak，響應式網頁Grid佈局工具網頁
為什麼做主題要計算呢？因為你必須在一開始就佈局好主題各個部位的寬度，以及在全響應環境下的變化，也因此實際呈現時百分比所影響到的寬度是否合乎主題內容中各個部位所需要的最小寬度或者最大寬度，這部份應該是有工作上實際碰到的前端設計師比較能理解，所以言而總之你既然會來看了這一邊文章八成你也看得懂。
網站：Gridpak
使用方式：
- 非常明顯第一步是拉動畫面中間的工具來決定寬度。
- 然後設定式樣所需要的欄位數、間隔、寬度等等。
- 最後按下方紅色按鈕的Download，就可得到你需要的檔案了，這個檔案裡的東西有夠豐富的，不但可以讓你直接取得一個基礎的html+css範例，還包含了其他我尚未去學習的scss、less，真是酷爆了。
ajaxload，Ajax讀取動畫
哎呀每次都用別人的讀取動畫，顏色都不協調，想改變一下Ajax的讀取動畫嗎？這裡有一個工具網頁幫你改變配色。
看看範例：
網址：http://ajaxload.info/
使用方式：
- 從下拉清單中選擇想要的款式，然後設定一組配色。
- 按下Generate it!預覽。
- 滿意後按下Download it!即可下載完美的gif檔案。
不專業也能自製gif動畫的網站
有時候在網路上看到別人自製的創意gif動畫蠢蠢欲動想要自己製作，卻又因為不熟悉專業軟體，這時候可以使用這個網頁工具，完全無痛製作！
先來看看幾個美國創意插畫家的gif動畫：
.gif)
.gif)
插畫來源：http://appnews.fanswong.com/show.php?id=348012
現在你也能不專業的做出這樣的動畫了！！
- 首先到網址：http://mothereffinganimatedgif.com/
- 接下來看到畫面中間大大的Drag and Drop images here，把你預備要做成動畫的圖片一次"拖拉"進來，就會看到所有圖片被排列上。
- 接下來要開始做"動"畫了，好興奮。首先是動畫圖片的順序，直接在每張圖片上用滑鼠"拖拉"以改變順序，這裡要注意一下如果你不小心直接放開滑鼠，會變成把圖片旋轉90度，記得多按三下讓他轉回來。
- 動畫順序排好了以後，調整width，這是圖片最後想呈現的寬度，通常這個網站會以最寬的那張圖片為基準，但是你可以縮小他。
- 然後是每張圖片依序變換的時間，調整Frame delay可以改變gif動畫的延遲時間，例如設定100ms則表示每0.1秒鐘跳下一張圖片，意即假設你的動畫用到了10張照片，那麼你的整個gif動畫就會在一秒鐘內跑完。
Pictaculous，主要色彩解析工具
網站：Pictaculous
使用方式：
直接點畫面中間的上傳工具，選擇一張照片後按確定，按Get My Palette。
Color Hexa，色彩研究工具網站
網站：Color Hexa
使用方法：
沒有！因為Color Hexa已經甚至把使用方式都帶進各種關聯裡了，任何在這網站上出現的顏色都可以點選直接成為索引色，然後進入這個顏色的數據世界裡。
ColorSchemeDesigner，數據化色彩配色工具網站
你對色彩的需求和細膩度較高嗎？或者你所開發的專案需要一套邏輯性的色彩布局試算嗎？Color Scheme Designer可能是你想像不到的工具，而且是免費的！
透過使用這個工具網站，你可以邏輯性的整理出一套配色讓工程師順利的程式化一個顏色的配色邏輯，這可不是蓋的。
網站：ColorSchemeDesigner
使用方式：
- 首先在面板左上選擇需要的顏色色相組，選擇一個到四個的色相組，內容還可以細分出不同的配色邏輯變化方式，有點複雜解釋，這應該是色彩學研究所在理解的深度了。
- 其次左下方是改變色相、色彩彩度、明度和對比等。
- 再來是精彩的，右下方的面板可以直接在一個DEMO站預覽配色，很神很神有木有！
- 還沒完！最後還可以透過右上方的一堆工具分享配色或者輸出成Html+css檔案！
原來CSS顏色有名稱
原來css的顏色名稱不只是black, white, red, blue, green...這些個純色有名字而已，好多顏色都是有名字的喔！
這個網站收集了顏色名稱，一共有147個顏色是有名稱可以直接使用的。
網址：http://www.147colors.com/grid/
酷吧！現在可以背下幾個顏色來噹一下公司的主管了，讓他們看看你的深度。
