之前曾經去演講過的學校，有學生傳訊問了關於 RWD 設計的問題。
設計師在繪製 RWD 網站的 Wireframe 時，會繪製 PC 和 Mobile 兩個版本嗎？或是直接使用軟體去做版本之間的切換呢？
若是沒有軟體可以直接使用的話，那又要如何繪製兩種版本的 Wireframe 呢？
關於 RWD 設計
RWD 指的是網站能夠自動偵測不同裝置的瀏覽器尺寸，能針對不同尺寸自動調整網頁的內容（圖文表單控件…等）。
如果把 HTML 當成一種內容的文件，那麼 CSS 則在說明這些「內容」要擺哪裡、有什麼樣外觀樣式。
先撇開「外觀」單講「內容」的話，通常同一頁網頁在不同尺寸下，看到的「內容」大致上會是相同的，差別在於擺放位置外觀樣式。
既然「內容」都一樣，所以 RWD 很多時候只寫一個 HTML，透過 CSS 設定不同外觀，偵測不同的瀏覽器尺寸，決定呈現什麼樣子的網頁。
但是瀏覽器尺寸落差非常大，從手錶、手機、平板電腦、筆電、桌機、電視都有可能。肯定要針對落差這麼大的瀏覽器尺寸進行不同的外觀設計。
關於 Bootstrap 的尺寸
Bootstrap
目前業界流行使用 Bootstrap 處理 RWD 。 是一組用於網站和網路應用程式開發的開源前端框架，簡單來說，就是能夠幫你面對 RWD 尺寸變化這麼大的輔助工具，只是在開發上有些規定需要配合。
在 Bootstrap 的官方文件裡，將瀏覽器劃分成：手機 sm、平板 md、桌機 lg、大型桌機 xl。
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
設計師需要針對這 4 種尺寸進行設計，也就是說，一個頁面要出 4 個不同尺寸的設計。
回到問題
設計師在繪製 RWD 網站的 Wireframe 時，會繪製 PC 和 Mobile 兩個版本嗎？或是直接使用軟體去做版本之間的切換呢？
剛剛提到，一個頁面基本上要出 4 個不同尺寸的設計，包含手機、平板、桌機、大型桌機。有的時候平板/桌機、或是桌機/大型桌機之間的設計變化不會太大，所以有偷懶不用 4 種尺寸全畫的空間。
也有的時候可能有瀏覽器更大或更小的設計需求，4 種尺寸不夠用。這時候就要和 F2E 討論更大或更小尺寸的切確 px 數值多少了。
至於 Wireframe 要繪製幾種尺寸，這樣看網頁外觀設計的變化程度。
像上圖這樣子的網站設計， 除了手機外，平板、桌機、大型桌機這 3 種版面樣式沒有變化太大時，我會偷懶只畫 sm、md 這 2 種尺寸。
但如果是這樣子的網頁…那 4 種全部都會畫出來，畢竟 4 種尺寸的外觀變化頗大。而且不只是外觀，在手機上的操作和在桌機上也有很大的不同，比如「HOVER」。
在手機或平板上「把滑鼠移到按鈕出現下拉選單」試試？
該畫 4 種尺寸的 Wireframe 就每一頁網頁都乖乖畫 4 次，沒得偷懶。用軟體也一樣，版面間的切換…也要先畫出來才有得切換啊！
2.若是沒有軟體可以直接使用的話，那又要如何繪製兩種版本的 Wireframe 呢？
最基本畫 Wireframe 根本不需要軟體，手繪啊！軟體只是項工具，很多時候紙筆就夠用了。紙筆畫不出來，開電腦就畫得出來嗎？
我上課都要求用紙筆，絕對不要一起手就開電腦軟體來用，先不提軟體操作是否夠熟悉或是軟體上的限制，電腦開下去很容易把腦袋放空去翻現成樣板或是爬 Dribbble 看有沒有差不多的可以參考、不太會動腦思考。而且會變成「手上現有的內容和元件怎麼套進這個樣板裡」，不是「我來想想這些內容元件該怎麼擺會比較好」。
免費 Wireframe 工具
通常學生說「沒有軟體怎麼辦」大概就是「我窮買不起」的意思，有很多免費的工具可以用啦！替代方案很多，當然會比要付費難用一些，交作業很夠了。
https://www.justinmind.com/
https://wireframe.cc/
https://mockflow.com/apps/wireframepro/
https://www.mockflow.com/
甚至 Wireframe、Mockup、Prototype 都可以用 Adobe XD，功能強大資源多又不用錢。 https://www.adobe.com/tw/products/xd.html
嗯，你想拿 Illustrator 或 Photoshop 來畫 Wireframe 也行，但我自己是不會用這麼苦的方式…
附錄連結
RWD 網頁設計參考
https://www.awwwards.com/websites/responsive-design/
https://mediaqueri.es/
http://responsive-jp.com/
免寫 Code 做 RWD 的工具
（只是交作業的話我會用逆推的方式吧，嗯…這心態不太好…）
