從鴻海便當「BANDOTT」官網，學習網頁設計常見「路徑」設定錯誤

9月 24, 2017

這幾天在找可提供第四臺頻道直撥的數位機上盒時，發現鴻海旗下「便當（Bandott）」的官網設計，竟然犯了一個初學者常見的問題：「因為懶惰沒有檢查到網站連結的錯誤設定。」

請參見下圖，便當官網上「商務合作」選項的對應連結是「https://www.bandott.com/mailto:bandott_service@flnet.com.tw」。

「Mailto」本身是瀏覽器可辨識的通訊協定，與「http & https」有著相同的作用，主要目的是讓瀏覽器可呼叫預設的電子郵件程式，並將收件人信箱、標題直接填入新郵件裡頭，算是很方便的常見用法。

例如「商務合作」這類用途的設計，除了可提供聯絡表格提供線上填寫服務外，大多會像便當這樣讓使用者下線寫信。不過便當官網今天的問題出在網頁開發階段，設計師並未檢查到 mailto 在客戶端顯示時，前方意外被掛上 http 域名，導致瀏覽器只能辨識出錯誤的網站頁面。

這種錯誤狀況可能有兩個原因，一個是網站的後台外掛（Plugin）主動將所有連結通通加上自家網站的域名，再透過外掛內建的對應表讓使用者可以正確連結到外部網站，另一個原因就比較簡單可以理解了，網頁設計師一開始就寫錯了 mailto 的正確連結，而且他一直都沒有檢查到。

工具人的教學建議，大家在完成一個正式網站的基礎架構設計後，記得檢查主要頁面下幾個重要區域的設計是否完全正確，試著把所有連結全都點擊過一次，耐心的檢查，尤其當你還是收錢辦事時，這更是你的義務。

其實不光是 mailto 可能會出現這種問題，影像的「img」也是經常會發生錯誤的檢查重點，只不過因為圖片出不來很容易發現錯誤罷了。大家其實只要多加留心一點，未來開發網站時很容易就會有感覺了。