您是否已經建置行動網站？
您的行動裝置網站的選單是否採用可側邊收合選單－俗稱漢堡選單？
網路科技的發展日新月異，三年前當道的設計，今天可能已經成為過時的老招。
網頁必須透過瀏覽器才能呈現在螢幕之前，Google Chrome的使用率已經超過Internet Explorer獲得壓倒性的勝利(出處)。
Google Chrome每6週都會更新版本，瀏覽器技術持續進化，因此給網頁設計帶來更大的可能性。
欣賞巴黎走秀時，是否常看到讓行動很不方便的攏長包身窄裙或又高又細的高跟鞋？
網頁設計師也容易犯下重看不重用或自我感覺良好的毛病，嶄新吸睛的網頁設計不見得對用戶體驗(UX)帶來正面效益，本文就是要向讀者介紹：千萬別再用這5個方式做網頁設計。
自1995年誕生Internet Explorer以來，就一直在上演瀏覽器市佔率的爭奪戰。在2002年Internet Explorer擁有高達95％的使用率，後來漸漸地被Firefox、Google Chrome瓜分掉，目前Google Chrome已經以壓倒性之姿君臨瀏覽器使用率首位的寶座。
至於網頁設計技術的進化，除了HTML・CSS・JavaScript之外，jQuery這一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作，讓網頁設計的可能性更寬廣。但，「網頁設計可以做到的」與「用戶想要得到的體驗」往往不是一致的。
以下就是在網頁設計時必須要避開的五個方式：
千萬別再用這5個方式做網頁設計
綁架捲軸
自2016年起捲軸樣式的網頁設計大行其道，在網頁靠上方的明顯位置(above the fold）放一張精美主圖，隨著滑鼠滾動在同一位置呈現不同的內容。
one page scrolling
如果網頁設計師只是在炫耀，『看！這個cool吧！』，將捲軸式網頁玩到走火入魔，使用者就會遭遇到『綁架捲軸』的危機。例如 Mac Pro 的官網，當你將滑鼠滾輪往下滑動時，頁面不會隨之滾動，只是在同一位置(above the fold）呈現不同的內容。歷經上千網頁的試煉之後，大部分的用戶已經習慣捲動就能看到接下來的內容，然後往回捲動就能看到先前的內容，但Mac Pro在這個例子中，顛覆了大家的使用習慣，讓人不知所措。
Mac Pro
濫用網頁字型
網站完成後，大部分客戶會向我們反應，『可不可改變字型？』。
在Google font 尚未問世之前，通用字型(例如：細明體（MingLiU）、標楷體（DFKai-sb）、微軟正黑體（Microsoft JhengHei）是保守的選擇，因為您挑選的特殊字型，用戶使用的電腦未必支援。
字型的選用也是網頁設計的重點之一，自從Google font為字型提供了多樣化的選擇，讓您的網頁更能展現個性化的魅力。但千萬別用盡所有的字型，把網站搞成“字型博覽館”了。
• 濫用字型，網頁將失去整體性的美感
• 網頁使用特殊字型時，若沒有另外為網頁字型做設定，就需要花更多的時間下載，造成用戶的不便，不但不利於SEO，還可能遭到搜尋引擎的處罰。
• 網頁字型的使用，最好限制在2〜3種類以內，同時要考慮到網頁的下載速度。
各種字型用到爆的案例：The Sprawl ｜HEIMER （笑）
水平(橫向)滾動的網頁
距今16年以前的一篇報導：Top 10 Web Design Mistakes of 2002 (發生在2002年的網頁設計十大錯誤)，其中包括「不標示價格」、「常見問題裡面夾雜著不常見的問題」，這是網際網路黎明期經常發生的錯誤，「URL網址長度超過75字」、「瀏覽器無法改變字型大小」等錯誤，到2018年的今天還是在被檢討的問題。
在「用戶體驗」這個詞彙尚未被普遍使用的年代，「水平(橫向)滾動網頁」被選為第三大網頁設計的錯誤。
也許是因為比較常見的關係， 一般用戶接受垂直滾動，但不習慣標新立異的水平(橫向)滾動。
插頁式廣告
有道是『己所不欲，勿施於人』，有誰喜歡被那些鋪天蓋地的廣告虐待？
全螢幕蓋版廣告是多麼令人厭惡，多麼干擾著使用者的體驗！
尤其是有些彈跳式蓋版廣告還找不到關閉鈕，真的會氣死人！
PopUp overlay animation
Google有交代：搜尋引擎會懲罰那些妨礙用戶體驗的各種要素。
betterads.org對超過25,000名消費者的綜合研究，發現有12種插頁廣告最不受歡迎。(參考：Least preferred ad experiences for desktop web and mobile web)
怪獸級高解析度圖片
在幫客戶做網站改版時，往往發現有些客戶將寬度超過3,000pix、容量超過1M的原圖沒經過優化(縮小圖片尺寸並壓縮圖片)就直接上傳到網頁。
最大的電腦螢幕不會超過1920 pix，若希望圖片滿版呈現，圖片寬度要是超過1,920pix就是大而不當。
Yoast等SEO外掛插件建議文章搭配圖片使用，但圖片往往是讓網頁速度變慢的最大”兇手”，圖片上傳之前，最好裁切到適當大小，然後再做壓縮。（參考：6個好用的免費線上圖像壓縮和SEO優化工具）
總結
您的網站是否太在乎獨樹一格的設計而缺乏實用性？
您是否堅持使用特殊字型導致網站下載數度變慢？
是否濫用蓋版廣告，讓用戶的體驗痛苦不堪？
上傳的圖片未經優化而影響了下載速度？
希望這文章能提供給您重新檢視您的網站是否犯了以上的錯誤。
延伸閱讀
43 web design mistakes you should avoid
1. 用戶必須在幾秒鐘內知道該網站的內容
2. 幫助客戶篩選網站內容
3. 不要使用無法讀取的花俏字體
4. 不要使用微小的字體
7. 除非必要，否則不要逼用戶註冊
8. 不要在未經同意的情況下將用戶成為訂閱者
9. 不要過度使用Flash(到2020年完全無法使用)
10.不要播放音樂（小編常在沒有心理準備的情況下被音樂驚嚇到）
11.如果您真的很喜歡播放音樂，請讓用戶啟動它
14.確保您的網站有『聯絡我們』頁面
16.不要使用”一閃一閃亮晶晶“的文字
17.避免複雜的網址結構
18.在HTML表格上使用CSS（參考：如何在WordPress文章插入表格）
19.確保用戶可以在網站搜尋
20.避免使用“下拉”選單(除非網站內容很多)
22.如果要連結PDF文件，請不要對PDF加密
23.不要讓訪客選擇版本。(56Kbps？還是128Kbps？，Flash?還是HTML？，有完沒完！直接給我內容！）
24.不要將廣告與網頁內容混在一起。（內容穿插著廣告真的讓人惱火）
25.少即是多，讓網站的導航結構更簡單
26.不要讓用戶必須經過『迎賓頁』才能達到的主頁
28.確保你的網站可跨螢幕瀏覽(Google推薦使用RWD響應式網頁設計)
29.確保所有連結網址設定錨文本(請參考：如何製作錨本文)
30.不要隱藏連接(否則你的網站將失去信譽）
31.讓用戶清楚識別哪些文字是可以連結(以不同的顏色顯示，或使用底線)
32.對於無法連結的文字避免使用其他顏色或底下(否則訪客會誤以為可以點擊到其他頁面)
34.不要使用動畫GIF(本文為了加強說明，用了幾張GIF圖檔）
35.確保為圖像使用ALT和TITLE屬性(除了具有SEO優勢之外，圖像的ALT和TITLE屬性對於盲人用戶將扮演重要角色)
36.不要使用刺眼的顏色（參考：什麼？顏色也會影響SEO優化？）
37.不要使用彈跳視窗(小編真的很討厭)
39.在頁腳(footer)設定功能連結(如果用戶沒有找到特定的信息，他們就會習慣向下滾動到網站的頁腳)
42.避免錯別字
43.如果您使用驗證碼(CAPTCHA)，請確保字母可閱讀
