切版（Web Publishing）

切版和設計、開發有什麼不同？

設計是決定畫面長什麼樣子，切版是把這個樣子轉成瀏覽器讀得懂的程式碼，開發則是做出預約・付款這類需要儲存和處理資料的功能。小型網站常常由一個人同時負責好幾個階段。

切版主要會用到三種語言。HTML負責標題・文字・照片這類內容的骨架，CSS負責顏色・大小・排版等外觀，JavaScript則負責打開選單・切換照片這類動態效果。

切版對老闆來說很重要，是因為客人實際看到的不是設計稿，而是切版完成的畫面。同一份設計稿，切版做得仔細，網站在手機上就會更好讀、更快。

沒有預約・付款的介紹型網站，有時只靠設計和切版就能完成。反過來說，如果要加入預約・付款，就得多一道把開發好的功能接到切版畫面上的工作，時程也會拉長。

怎麼判斷切版做得好不好？

切版的品質，與其看外觀是不是和設計稿一樣，不如看在各種螢幕和情況下會不會跑版。同樣的畫面，程式碼怎麼寫，也會影響搜尋曝光和速度。

這些標準眼睛不容易直接看出來，自己很難確認，但只要問製作公司「是用什麼標準檢查的」就夠了。也可以把網址輸入Google免費提供的PageSpeed Insights，一起看速度檢測結果。

網站無障礙不只是為了身心障礙的客人。文字和背景顏色對比足夠、按鈕名稱清楚的畫面，對在陽光下看手機的客人、把字放大使用的長輩客人來說也比較方便。

• 標題・小標題是否用真正的標題標籤（heading tag）製作，讓搜尋引擎和螢幕報讀軟體能讀懂結構
• 不管是手機・平板・電腦哪種寬度，文字和照片會不會重疊
• 照片檔案是否已經壓縮，在網路慢的環境也能很快打開
• 按鈕夠不夠大，用手指按起來方不方便
• 在手機設定裡把字放大後，內容會不會被切掉

照片說明（alt）要怎麼寫？

照片說明（alt）是替看不到照片的人轉述照片內容的一小段文字。照片打不開的時候，或是客人用螢幕報讀軟體「聽」網站時，就會讀出這段文字。

寫成「照片」、「圖片1」這樣，等於什麼資訊都沒有傳達。如果是咖啡廳的餐點照片，就要像「一片草莓鮮奶油蛋糕和一杯美式咖啡」這樣，具體寫出照片裡看得到的東西。

Google也說明，在圖片搜尋中，alt是傳達圖片資訊最重要的屬性。不過硬塞一堆關鍵字反而不好，請用描述照片的自然句子來寫。裝飾用的花紋這類沒有意義的圖片，說明留空才是正確做法。

切版完成的畫面要怎麼檢查？

切版成果如果只在一台裝置上看，很容易漏掉問題。照下面的順序，大約10~15分鐘就能找出大部分的問題。

發現問題時，請連同截圖一起告訴製作公司是哪台裝置、哪個畫面。切版問題常常只出現在特定機型或螢幕寬度，有裝置名稱的話，修正會快很多。

檢查時把設計稿開在旁邊對照會更好。不過因為螢幕寬度不同而產生的小差異是很正常的，請以資訊有沒有漏掉、順序有沒有跑掉為主來看。

1. 01用老闆自己的手機，以及家人・員工其他機型的手機，打開同一個畫面。
2. 02把手機轉成橫向，看看版面會不會跑掉。
3. 03在手機設定裡把字體調大，再重新打開看看。
4. 04在電腦上把瀏覽器視窗慢慢縮小，確認欄位往下堆疊的樣子。
5. 05關掉Wi-Fi改用行動數據打開，看看照片會不會太慢才出現。
6. 06把所有選單・按鈕・電話號碼連結都按一次看看。

切版階段常見的問題有哪些？

最常見的問題是，設計稿裡的簡短暫定文字換成實際的長文字後，內容超出欄位。像美髮店的服務項目名稱很長，或工作室的課程介紹很長，在手機上就會換行好幾次，版面跟著跑掉。

價目表或時刻表這種欄位很多的表格，在手機上很容易往旁邊超出而被切掉。這類內容可能需要換一種排版，例如在手機上改成卡片形式呈現。

像工作室商品詳情頁這種照片很多的頁面，可以用「滑到附近才載入照片」的方式（延遲載入，Lazy Loading），讓首屏更快出現。不妨問問製作公司，照片多的頁面會怎麼顧好速度。

• 直接上傳檔案很大的原始照片，首屏很慢才出現
• 手機上的彈出視窗蓋住整個畫面，很難找到關閉按鈕
• 字型檔案太大，文字很慢才顯示
• 只在電腦上看得到的資訊，手機上卻不見了

切版的部分要問製作公司什麼？

切版不是老闆需要另外挑選的項目，但只要問問標準，就能知道製作公司承諾的是什麼樣的品質。

網站上線後，手機作業系統或瀏覽器更新，偶爾也會讓畫面變得不一樣。最好一併確認這種情況網站維護會不會幫忙修正。

也問問手機畫面是在同一個網站裡用響應式（RWD）調整，還是另外做一個手機專用畫面。如果是另外做的方式，修改內容時可能兩邊都要改。

• 會在哪些裝置和瀏覽器上檢查
• 會不會壓縮照片檔案、檢查速度
• 有沒有做好照片說明（alt）・標題結構這類搜尋・無障礙的基本設定
• 之後要修改價格・營業時間這類文字時，由誰、用什麼方式修改