把手機版做到位

Naratake 用的是繼承：Desktop 是底、Tablet 在上面加覆寫，Mobile 先繼承前兩層，再加自己的覆寫。

1. 在 Desktop 把基礎版面、字體排版、間距和視覺順序定下來。
2. 切到 Tablet，只改那些已經擠不下的屬性。
3. 切到 Mobile，只加最少、最必要的手機專屬覆寫。
4. 需要時就用說明裡列的快捷鍵：⌘1 是 Desktop、⌘2 是 Tablet、⌘3 是 Mobile。

手機版會壞，多半是因為橫排、固定寬度或內容順序塞不下。把字通通改小只是把症狀蓋掉，還會讓人更難讀。

1. 先選中區段容器，看「樣式 → 版面」，再去動裡面的子元素。
2. 在小斷點把擠成一團的橫排改成直排、減少欄數，或允許自動換行。
3. 把超出畫布的固定寬度拿掉，外距和內距要一起看。
4. 主要動作要放在手機閱讀順序的前面。

結構塞得下之後，再來調那些決定讀起來舒不舒服、層次清不清楚的細節。

1. 內文要維持好讀的大小；與其硬把字縮到不正常的小，不如把句子改短。
2. 標題太大就往下調，直到斷行看起來是刻意的。如果網站是雙語，翻譯過的內容要再檢查一次。
3. 區段之間的垂直間距要一致，可點擊的地方周圍也要留夠空間。
4. 檢查圖片的裁切和主體位置。桌機的寬版裁切放到窄畫面，可能剛好把主角切掉。

編輯器畫布是拿來蓋東西的。預覽才是同時驗證顧客體驗和響應式操作的地方。

1. 按「預覽」，切到店面，選 Mobile。
2. 把導覽列開開關關、換頁、每一個主要行動按鈕都點進去，並用測試資料送出表單。
3. 有開線上訂購的話，加一項商品、改數量或選項，一路走到預期的結帳或模擬付款畫面。
4. 有開訂位或預約的話，可訂、不可訂、輸入錯誤和確認完成這幾種狀態都要測。

老闆在營業中很可能就拿手機看訂單、訂位或預約。預覽的後台一樣可以套同一個裝置框。

1. 在預覽裡從店面切到後台。
2. 保持在 Mobile，把這個專案有開的營運頁面一個個打開。
3. 在這個窄寬度下檢查導覽、表格或看板、浮層、表單，以及新訂單提示。
4. 回到 Desktop，確認剛剛修手機版時沒有多加出新的基礎樣式。

預覽穩定又快，但真實瀏覽器還多了會縮放的網址列、觸控操作、字型渲染，以及各家裝置的安全區域。

1. 有審查或預覽網址時，公開上線前至少在一支真的手機上打開來看。
2. 測點擊區域、螢幕鍵盤、吸附式控制項、表單，還有轉去付款的那一段。
3. 每一個要修的問題，都記下頁面、裝置、瀏覽器和確切現象，不要只寫「手機版壞了」。