響應式網站（RWD）

響應式網站怎麼隨螢幕大小自動調整？

響應式網站會事先訂好「畫面寬度比這個窄時，就這樣排版」的規則，再依客人的螢幕寬度挑出適用的規則來顯示。規則切換的那個寬度，就叫做「斷點（Breakpoint）」。

例如在電腦上三張照片排成一列，到了手機就變成一張一張上下堆疊。照片和文字框不是固定大小，而是做成會依畫面比例放大縮小。

網站程式碼最上方會放一行「請依裝置寬度顯示這個畫面」的設定（viewport設定）。少了這一行，手機上看到的就會是縮小版的電腦畫面。

斷點是以畫面寬度為準，而不是特定的裝置型號。所以不必每出一支新手機就另外調整，即使是沒見過的螢幕尺寸，也會依最接近的規則自然排版。

響應式、適應式和手機版網站有什麼不同？

響應式是同一個網站自動配合所有螢幕調整；適應式和手機版網站則是依螢幕顯示分別製作的版本。Google因為響應式容易製作、也容易管理，所以推薦採用響應式。

Google是以手機版內容為準來讀取網站並決定排名。如果另外做的手機版網站內容比較少，只放在電腦版的內容在搜尋上就可能吃虧。

如果已經在用m.店家網址.kr這類手機版網站，重新製作時請整合成響應式，並把舊的m.網址自動轉到新網址。這樣從以前流傳的連結進來的客人，才不會迷路。

手機版畫面要做哪些調整？

手機上不是把畫面縮小就好，而是要重新排版，讓人用一根拇指就能輕鬆操作。設計時要想像客人站著、單手、在很短的時間內找電話・位置・價格。

例如美髮店的價目表，在電腦上可以用寬表格呈現，但在手機上要拆成依服務分類的卡片，才不用左右滑動就能看。工作室的課程時間表在手機上也是用日期清單比月曆好看。

手機畫面的顯示順序也要重新安排。在電腦上並排的「店家介紹」和「預約按鈕」，到了手機會上下堆疊，這時要把客人最先找的資訊排在上面。

如果是咖啡廳或餐廳，營業時間、今天有沒有公休、導航按鈕都要放在手機首屏附近。因為在店家附近拿出手機的客人，最先找的就是這三樣。

• 內文字體要大到不用放大也看得清楚
• 按鈕和連結要有足夠讓手指點按的大小和間距（一般建議長寬約48像素）
• 電話號碼一按就能撥出，地址一按就開啟地圖App
• 不要用大型彈出視窗擋住首屏
• 不要把文字放進照片裡，文字就用文字呈現（在手機上會變小看不清楚）
• 照片要縮成適合手機畫面的尺寸，才能快速載入

現在的網站可以改成響應式嗎？

可以改，但老舊網站很多時候重做會比修改划算。依電腦螢幕寬度把欄位尺寸寫死的網站，要從排版骨架開始重新規劃，修改範圍幾乎等於重做一個。

請先確認自己的網站是什麼狀態。如果用手機開啟時字變得非常小、要用手指放大才看得到，很可能就不是響應式。如果只有部分畫面會往旁邊跑，有時只修那部分就可以。

如果要重做，建議趁這個機會以手機畫面為準重新整理內容。例如把老餐廳網站的菜單圖片改成文字菜單，不但手機上更好讀，搜尋也抓得到菜名。

怎麼檢查網站是不是響應式？

最確實的方法，是用好幾支真實手機打開，照著客人會做的動作實際操作一遍。比起畫面好不好看，先看打電話・預約・導航能不能順利完成。

發現奇怪的地方，請截圖並註明是用什麼裝置、什麼瀏覽器看的，一起傳給業者。同一個問題在不同裝置上看起來可能不一樣，有這些資訊，修正時間能大幅縮短。

1. 01用老闆自己的手機從首屏一路滑到底，看看有沒有往旁邊跑的地方。
2. 02把手機轉成橫向也看一次。
3. 03也用其他種類的手機（iPhone・Galaxy）和平板打開看看。
4. 04在電腦上慢慢縮小瀏覽器視窗寬度，看排版是否自然變化。
5. 05實際按按看撥打電話・開啟地圖・預約按鈕。
6. 06關掉Wi-Fi改用行動數據開啟，看照片會不會載入太慢。

委託製作響應式網站時，常漏掉什麼？

最常見的錯誤，是只看電腦版設計稿就定案。如果大部分客人都用手機瀏覽，先拿到手機版設計稿再給意見，會更接近實際成果。

另外也常有人把菜單或活動公告做成一大張圖片放上去。在手機上字會變小很難讀，搜尋引擎也不太能讀懂圖片裡的文字。

像字體大小或按鈕位置這種只在手機上出現的問題，常常是上線後客人先發現。請要求在上線前的檢查階段，安排時間讓老闆和員工用幾支手機實際操作到完成預約為止。

• 會另外提供手機版設計稿嗎？
• 價目表・表格・時間表在手機上會怎麼呈現？
• 照片會依畫面尺寸縮小後再上傳嗎？
• 上線前會用哪些裝置檢查？