前言
距離本人上一篇文章已相隔許久，這陣子輸入的多卻輸出的少，很多知識沒經過整理就像媽媽的嘮叨一樣，左耳進右耳出；另一方面，太久沒寫文章都快忘了寫作的樂趣，而這樂趣的來源，就是希望能夠幫助到真正有需要的朋友，所以我強迫自己每週一定要生一篇文章出來，鼓勵自己往這目標邁進。
為何會想寫回應式網頁設計這個主題，因為發現雖然相關技術很多，但很少有一套系統化的整理，也因為該技術不斷的在演進，還沒有一套標準的設計流程，基於這個出發點，我把曾經規劃的設計經驗，寫出來與大家分享。
當然一定會有許多不足的地方，或是其它更好的做法，但我希望自己只是一個起點，能幫助到想學習的朋友，也獲其它先進的寶貴經驗，而這也是我寫這系列文章的主要目的。
關於回應式網頁設計，我想分成三個主題來說明，分別是企劃、視覺設計與前端技術來討論。
何謂回應式網頁設計
回應式網頁設計英文全名為 Responsive Web Design，借用維基百科的解釋：「回應式網頁設計是一種網頁設計的技術做法，該設計可使網站在多種瀏覽裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。」
但就我自己的觀察，這項技術只反應出版面呈現的變化，卻少了適應裝置的特性與使用體驗。 回應式網頁設計不該只是以調整畫面為終極目標，它應該是一套整體的設計觀念融入在網站的開發流程之中。
更活的彈性版面、更豐富的互動模式，甚至是在不同裝置上有著不同的使用目的，或是不同平臺的行銷訴求，這些都必須在開發前就要有完整的深入規劃，才能徹底發揮它的威力。
誰需要回應式網站
那些類型的網站會需要回應式的做法，可以根據以下條件來做評估：
網站性能：
在台灣 4G 網路發展停滯與 3G 使用人口爆炸的環境下，手機上網的速度還無法與家中有線寬頻來相比，所以行動裝置上的內容不宜太過複雜，盡可能減輕手機瀏覽器的載入負擔。
如果知道自己公司的網站常常有人用行動裝置來瀏覽，那就有必要實際檢測使用 3G 網路的網站性能，如果過慢的話可能就要考慮設計手機版網頁，或是採用回應式網站的規劃概念，來重新檢視網站的架構與程式的撰寫方式，來加快網站的載入速度，這部份在談技術面時會提到更多。
使用情境：
如果你的網站在電腦上與在行動裝置上的使用目的不同，也可以透過回應式網站來處理不同的使用行為，譬如旅遊類型的網站在電腦版中是所有地區的資訊，但在手機上可能就只需要根據所在位置提供週邊景點資料。
內容排序：
行動訴求（Call To Action）在電腦版是位於重要的明顯位置，但如用小尺寸螢幕可能會被擠到下方或是第一眼可視範圍之外，在該種情況下就能使用回應式技術來做內容調整。
時間成本：
如果你對於在行動裝置上有明確的行銷策略藍圖，但卻沒有足夠的預算來針對所有裝置設計不同的網站，那麼回應式技術就會是很好的解決方案。
品牌形象：
在競爭的產業之中，能提供越多的服務越能讓消費者產生記憶點，亦是創造與消費者之間的共通話題，在手機應用程式開發門檻較高的情況下，使用回應式技術較易切入，也能初步獲得行動市場的需求，以做為未來開發行動應用程式的參考依據。
如何規劃回應式網站
現行的回應式網站多是從技術的角度切入，把電腦版網站轉成小版面，對工程師而言，光要能在裝置上正確顯示，就已經一個頭兩個大，能否真正滿足使用者需求還有待商確。
建議可以從以下角度進行思考：
- 目標使用者是誰
- 現行網站有那些內容
- 如何簡化現行網站內容
- 關鍵的行動訴求或訊息是什麼
- 次要的訊息是什麼
- 內容的層級
將上述問題釐清後，接下來就要逐一檢視頁面內容，相關格式可參考「內容清單」，當我們知道有那些頁面後，就可以針對它們進行「頁面摘要」。
頁面摘要紀錄了每一頁的結構和關鍵訊息，用來幫助在不同的解析度下如何決定頁面順序的參考依據。 其次要來決定支援的平臺與設備，平臺目前以iOS與Android為大宗。
設備可以從各家手機品牌的銷售量下手，當然最好的方法是查看現行網站的行動裝置瀏覽數據，來決定要支援的範圍；最後則是考量到裝置的使用體驗，是否要設計不同的手勢來瀏覽內容，或是使用裝置內建的功能來加強互動，像是GPS或是水平儀等功能。
回應式網站的線框圖與互動原型
有了企劃的表格後，就可以透過線框圖來決定區塊配置。我試過最好的方法，就是離開電腦，拿起美工刀跟一堆紙，把草稿畫在裁切好手機大小的白紙上，實際進行功能測試，以及檢視內容的編排是否容易達成頁面目標。
與規劃電腦版網站不同的地方是，要注意按鈕的尺寸並實際進行測試，另外也要一併思考裝置的互動方式，而不僅止於滑鼠事件而已，關於回應式線框圖的繪製工具，我尙未找到最好的解決辦法，所以還是選擇最常用的 Photoshop 來繪製灰色區塊來示意版面配置。
快速完成後輸出成圖檔放在手機上檢視，來確認區塊的比例還有按鈕的大小是否恰當，使用它的好處是在做視覺設計的時候就能沿用這份線框圖來掌握正確的尺寸，避免做出過小的按鈕或錯誤的版面比例。
至於互動原型的部份我直接採用 Fire App 來快速打造，這部份在之後會討論到。
小結
基本上在企劃的過程中，雖然與規劃一般網站差不多，但要能更週全的考慮到行動裝置的使用者會想以什麼方式來瀏覽我們的網站，把自己投射在使用情境中或是找朋友測試都是不錯的方法，下一篇將會針對視覺設計的部份來做探討，這部份是我覺得與一般網站設計差距最大的地方。
