網站架設・上線檢查

網站上線前要檢查什麼？手機版與表單的交件清單

網站在電腦上看起來沒問題，拿到手機上可能選單不見、文字貼邊；表單畫面正常，按下送出後資料也可能沒有進到後台。這兩類問題用看的很難發現，要實際操作才找得到。下面是我們交件前做的檢查。

手機上的選單，不能整個藏起來

我們遇過一個展示站，手機版把選單整個隱藏，畫面上找不到任何換頁的入口。看的人用手機打開，從頭滑到尾，以為整個網站只有一頁，其他分頁做得再完整也沒有人看到。

手機畫面窄，選單收起來很正常，收起來之後還是要留一個看得見的入口。我們的做法是在手機畫面頂部放一排可以左右滑動的選單按鈕，一個分頁一顆按鈕。按鈕超出畫面寬度時，最右邊做一點淡出，讓人知道還能往右滑。

桌機的選單也要看得出能點。選單如果是淡灰色的小字，跟旁邊的說明文字長得差不多，客人不會想到那是可以點的。選單的字要清楚，滑鼠移上去要有變化，目前在哪一頁也要標出來。

手機和平板的尺寸很多，沒辦法每一台都拿來試。我們交件前固定用下面四組尺寸，把每一個分頁都看過：

數字是畫面的寬和高，用電腦瀏覽器內建的開發人員工具就能切換，不用真的準備四台裝置。平板的直向和橫向要分開看，同一台平板轉個方向，畫面寬度就從 820 變成 1180，版面可能完全不同。

每個尺寸都要檢查兩件事。第一件是畫面會不會左右晃。網頁正常只會上下捲動，手指往上滑，畫面卻跟著左右移，表示有東西超出畫面寬度，常見的是太寬的圖片或表格。第二件是文字有沒有貼到畫面邊緣，字緊貼著螢幕邊，看起來就像版面跑掉了。

字的大小在電腦上預覽時常常看起來剛好，拿到手機上才發現太小。我們的標準是標籤和旁註至少 15px，內文 17px 左右，拿手機讀不用放大。

中文不要用斜體。中文字型多半沒有設計斜體，瀏覽器只好把字硬拉歪，看起來很不自然。中文字距也不要拉太開，字和字之間空太多，一行字會散成一個一個的字，讀起來反而吃力。

價格條件、交期這類資訊，不要做得又小又暗。這些是客人拿來做決定的內容，版面上可以比標題次要，但要讓人讀得清楚。想讓它退到後面，可以靠擺放的位置，或是讓字級比標題小一階，顏色要維持好讀。

表單的問題，只看畫面看不出來。我們遇過一個網站上線兩週，有兩張表單沒有接上後端。畫面完全正常，欄位可以填，按鈕也按得下去，按下去之後資料就消失了，沒有存到任何地方。

所以交件前，每一張表單我們都會自己填一次、按送出，再到後台確認那筆資料真的進來了。聯絡表單、報名表、候補名單都一樣，網站上有幾張表單就測幾張。

除了填正確的資料，也要故意填錯。電話少打一碼、必填的欄位空著，送出時表單應該擋下來，並告訴客人哪一欄要改。沒有擋的話，後台會收到一筆聯絡不到人的資料。

用手機填表單時，還要注意鍵盤和畫面縮放。點電話欄位時跳出來的應該是數字鍵盤，點 Email 欄位時鍵盤上要有 @。輸入框的字如果小於 16px，iPhone 的 Safari 會在點進去時自動放大畫面，填完還得自己縮回來。

按下送出之後畫面上出現的那句話也要檢查。開發期間常會先放一句暫時的說明，例如「線上報名還沒開放」，功能接好之後忘了換掉，客人填完資料，讀到的卻是一句跟現況不符的話。

畫面上如果寫「確認信已寄出」，信就要真的寄得出去。上線前用自己的信箱實際送一次，確認收得到，也看看有沒有被分進垃圾郵件匣。信沒寄出去，畫面卻說寄了，客人會一直等一封不會來的信。

這份清單不用懂程式也能檢查。網站交到你手上時，可以拿手機照著走一遍，哪一項不對，趁上線前改，比客人發現之後再改省事。網站還在規劃的話，可以加 LINE 跟我們約需求訪談，這些檢查都在我們的交件流程裡。

傳你的店名或現在的社群帳號給我們，先聊 30 分鐘你想讓客人看到什麼，不收費。