愚蠢網頁設計蓋觀

beta.tw.news.yahoo.com

2011-07-18T19:49:00.000-07:00

http://beta.tw.news.yahoo.com/100m%E5%B0%8D%E7%A8%B1%E5%AF%AC%E9%A0%BB-%E4%B8%AD%E8%8F%AF%E9%9B%BB%E6%98%8E%E5%B9%B4%E6%8E%A8%E5%87%BA-190516184.html

除了這陰暗又醜的藍色配色以外，最大的問題在網址(上圖的標題故意不縮網址)。

把新聞標題塞到網址最大的原因是為了 SEO，可是這網址根本就是礙事得很，常常會超過一般 BBS 的畫面寬度(80)，甚至連 twitter 的寬度(140)都塞不下(註：twitter現在會自動縮掉過長的網址)。要是直接用 http://beta.tw.news.yahoo.com/100m對稱寬頻-中華電明年推出-190516184.html 這樣的網址還不一定會通，因為瀏覽器不一定會吃中文編碼，而且中文編碼還有 big-5 和 utf8 轉換的問題，更難用。

看看別家的做法，像是 amazon：

上面這三個網址都會通，就算亂改中間標題的部分也不影響網頁的讀取，相較於 beta.tw.news.yahoo.com 只要動到標題就讀不到網頁，實在是ooxx...

[好文共賞] 公司網站的七大錯誤

2011-05-03T20:05:00.000-07:00

公司網站的七大錯誤

掛著台灣名號的僞台灣真陸資網頁

2010-09-14T00:48:00.000-07:00

韋禮安[韋禮安首張同名全創作專輯] ｜新浪娛樂

簡體字看了就討厭。

2010台灣美食展官方網頁

2010-08-25T22:08:00.000-07:00

2010台灣美食展

這張截圖已經可以說是最正常的畫面，請直接到網站上面看會更囧。

這哪家外包做的？好慘烈的畫面，原始碼更是品質低落。還是官方單位給錢太少，還是給得拖拖拉拉不夠乾脆？

金漫獎 GOLDEN COMIC AWARDS

2010-07-21T21:14:00.000-07:00

金漫獎 GOLDEN COMIC AWARDS

這個網站對台灣的漫畫產業有沒有實質幫助或正面意義，不是這篇的目的，也用不著信任政府的表面功夫能有多大的幫助。

這首頁表面上看起來還算正常，實際上問題很大。
(畫面上那個劣質小圖放大圖的中式服裝娘就不用提了，美術人員該砍掉重練。)

首先，這頁除了綠框框起來的「政府網站」「執行單位」還有一篇內文是正常的連結，紅框那一大塊都是flash做出來的，所有網站本身的連結全都等於是廢物，搜尋引擎無法正常的爬網站內容建立索引，沒有裝flash的瀏覽器也不能正常瀏覽網站內容。

點進去內文：

同樣的，紅框的部分是用flash做出來的，一樣全部廢掉。

其他需要點flash連結的內頁就略過不提了，一開始就是 0 分的網站就不用談內容了。

--
叫首頁原始碼出來看看：

這是找學生做的便宜網站沒錯吧？

總統府新網站

2010-06-28T23:13:00.000-07:00

總統府新網站竟花7百萬

喔喔，當然要來看看有多蠢....

這網站是用 DotNetNuke 架設的，早上看的時候首頁原始碼還有版權宣告(長得類似下面這樣)，現在已經被拿掉了，中國華民國總統府實在是很注重著作權啊！　

首頁的檔案載入分析，這張是平均左右的水準。

用 firebug 看看網站的下載記錄，結果第一行就直接不及格，堂堂總統府網站的第一頁檔案要花一秒左右才會有回應資料出來，最糟的情況下還有超過五秒的，而且不只第一頁，而是每一頁都是這種低水準的速度。

---request begin---
GET http://www.president.gov.tw/ HTTP/1.0
Accept: */*
Host: www.president.gov.tw

---request end---
Proxy request sent, awaiting response...
---response begin---
HTTP/1.0 200 OK
Cache-Control: private
Content-Length: 57760
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.0
X-AspNet-Version: 2.0.50727
Set-Cookie: .ASPXANONYMOUS=(略); expires=(略); path=/; HttpOnly
Set-Cookie: language=zh-TW; path=/; HttpOnly
X-Powered-By: ASP.NET
Date: ####

好吧，先天不良....

靜態檔案跟網頁放在一起，真是沒有效率的做法，還會拖慢網站載入的速度。

最下面還有一個 piwik 分析器，從 IP 來看大概是架在網站主機附近的另外一台機器，執行效率甚至比網站本身更差，有出現超過10秒的反應時間。

然後，這是手機版網頁.....

在真正手機上面看的效果是這樣：(轉載自 AC個人作品網站)

連螞蟻都看不到字啊！（╯‵□′）╯︵┴─┴

花了七百萬的價值到底在哪裡啊？

--
Update：有人開始玩新聞稿

Update：手機殼不見了，看起來更蠢了，這包商到底知不知道手機版網頁的重點啊。

維大力網站

2010-04-08T06:52:00.000-07:00

維大力網站

第一次看到有網頁做得這麼蠢有特色，連同意的按鈕都用 flash 做，避免搜尋引擎爬進來掃網站。

點下同意之後：

網址列的 %A5D%AD%B6.html 是主頁.html .... (無言)
最佳瀏覽解析度為1440x900 .... (依然無言)
網頁內容設計與排版 .... (還是無言)

這網頁的作者真是太有才了。

中央氣象局全球資訊網 V6

2009-04-29T21:18:00.000-07:00

(我的 Firefox 有裝 adblock 擋廣告，所以 flash 的上面或下面會出現「封鎖」的功能)

中央氣象局全球資訊網

用動畫 GIF 就可以做到的事情，為什麼要用 Flash 來拖累使用者的瀏覽器呢？

１週天氣預報

我把工作中的 Firefox 一開這頁就立刻爛掉，哪個白痴把中間幾十個圖樣全部都用 flash 做的啊 -_-

中華電信首頁

2009-03-03T10:36:00.000-08:00

中華電信首頁：

此圖來自 othree 的錯誤的替代文字使用範例第2號。

其實這個 icon 是很小的一個，可是卻沒有先 load 進來，讓人看到長長的 img alt 破壞畫面。

只要三小時學會專業三年功？

2009-02-09T20:56:00.000-08:00

Mr.6每周六網站實作小聚 + 專為創業家設計的PHP、CSS/切圖、Flash、Photoshop、AJAX快速訓練課程

photoshop？真高級，不知道學員捨不捨得花錢買正版來用，亦或者是(嗶~~)一份來用。以我個人經驗來說，教教小畫家(對，就是那個小畫家)，和一些免費的圖形處理小軟體的活用還比較重要，不過，或許Mr.6只會用photoshop？

flash？這個說簡單是可以教得很簡單，說難也有很特別的應用，更不用說版本之間的差異導致瀏覽器和網站系統來回的問題了，三個小時夠嗎？現在做flash的軟體應該是Macromedia Flash...喔，現在是叫Adobe Flash了，也是要花錢買的，怎麼教人創業都在用商業軟體啊...

html/css切圖？(看了看 beta20.org，到現在都還沒修好)連網頁基本切版的穩定和文字處理的專業性都有問題了，還拿出來誤人子弟？拿 dream weaver(這也是商業軟體，要錢的)隨便切一切就當作是教切圖切版，倒是不用三個小時就能學會了。更何況切圖切版大部分時候還要跟其他部分的人員合作(像是程式或是flash)，不知道身為總經理的經驗夠不夠多？還是自己發想後叫下面去做，或是改爛後叫下面去收拾而已？

ajax？現在要學javascript網頁互動技術的是從jquery最快最容易上手，Mr.6 該跟上時代了，不要閒著在那邊曲解國外訊息又寫落落長的怪文章了。

網站創業家有程式能力是好事，可是有錯誤的程式能力，或是半調子能力還對員工~~頤指氣使~~要求甚嚴的，那就是災難了。

成本低？我怎麼覺得這樣教出來的先期投資(尤其是軟體)應該會不小？不要再把黑的說成白的啦~

--
如果有上課的學員照著這些課程內容做出拿上檯面的網站，請通知我去觀摩一下，謝謝。

這個網頁的設計並不蠢

2009-02-08T21:26:00.000-08:00

喬立達數位媒體|Elidot Digital

我只是看到這頁的內容笑了出來而已.... :D

電子報：金石堂網路書店向您拜年

2009-01-26T08:59:00.000-08:00

金石堂網路書店的電子報：

此圖來自 othree 的錯誤的替代文字使用法。

看到 img alt 這樣用... XD

檢閱 Mr.6 的 beta20.org

2009-01-15T22:04:00.000-08:00

各位或許還不知道 Mr.6 是誰，請參考 mr6.cc 或是下圖：
(只剪接用到的地方，其他用不到的地方都塗掉了)

簡單說就是一位有高學歷和豐富經驗，程式技術可以到開班授課程度的網路創業達人。

beta20.org 是 Mr.6 的「讓你紅工具網」或是「爆紅工具網」或是「網路爆紅工具網」。
(名稱的問題後面再說....)

這首頁表面上看起來很正常，實際上問題還不少。

首先，先點選左上角的「首頁」：

俗話說「好的開始是成功的第一步」，很明顯的，連最基本的上線檢查都沒做好的網頁，是失敗的第一步。身為一個網路工作者，不該犯這種新手才會發生的錯誤。

文字的切字也有問題，仔細看就發現是什麼字爛掉了....

來看一下 html 原始碼(「首頁」的錯誤就不用再看了)：

一個好的網頁，就該設定好文檔類型(DOCTYPE，Document Type)，並且遵照這文檔類型的設定來撰寫或產生整份 html 的內容，理所當然不應該有任何 html warnning 才對，除非遇到不得已的情況。可是，這份首頁原始碼就有 20 個 warning 存在，而且幾乎都是明顯可以改到好的問題，這是一個不嚴謹的做事態度，也可以看出網頁編寫者的專業度不足。
(首頁 20 個 warning 已經是最少的，其他頁面的數量比這個還要多....)

而且這份原始碼的 doctype 配合 html 的內容來看，也有用錯的地方。因為 html 有特定的某段內容，所以 doctype 的內容也不能這樣寫。

<TITLE>的內容竟然是空白的，以一個搞網路趨勢及SEO行銷的人來說，這是不可原諒的大錯誤。

再往下看：

這份原始碼應該有經過人為再次的撰寫或修改，而不是以工具(像是 dream weaver)來產生的完成版本，所以明顯看得出來格式不一致，且有一種這是新手寫 html 的感覺。當然，專業人士就算是手動編修 html 內容，也是會符合工具產生 html 的樣式(style)。

裡面還有一個自以為是正確，實際上是新手才會犯的嚴重錯誤，仔細看就看得出來喔。

看了一下「關於本站」：

又看到一個初學者才會犯的錯誤：前後文字不一。

這邊寫著首頁版面設計是 DreamLogic，連過去看了一下(以及 html 內容)，DreamLogic 網站應該是提供網頁版型讓網頁編寫者直接使用的，而以上的錯誤跟網頁版型無關，幾乎可以確定是 beta20.org 網頁編寫者自己造成的問題。

看了一下「使用條款」：

首頁沒有寫明網站名稱已經是個大錯誤(標題是空白的，內文也沒寫)，再看過「關於本站」(或是「關於我們」)「使用條款」之後，會發現有嚴重「名不正」的問題，也就是上面為什麼會寫出「讓你紅工具網」或是「爆紅工具網」或是「網路爆紅工具網」三種名稱的原因，這是網站及網路行銷的大忌，是絕對不該犯的錯誤。

請搜尋下頁中的笨點在哪裡：

找到了嗎？我絕對不是在說這簡介是笨點喔。

最後，把「讓你紅工具網」和「黑白網站庫」的網址丟到 pagerank checker 看看，順便查一下 whois 的記錄：

Domain Name:BETA20.ORG
Created On:20-Oct-2008 07:04:06 UTC

Domain Name: BLACKWHITEWEB.COM
Created on: 26-Nov-08

兩個都註冊超過一個月的網站，雖然 Google 沒有公開 pagerank 的更新週期，可是這兩個網站在這個時間點(2009/01/16)竟然 pagerank 還是 0，對於網站行銷來說完全是個失敗的範例，想要透過這兩個網站來行銷網站，以 pagerank 0 來說，大概等於是沒用吧。

有圖有真相，下面兩張圖片是證明 Google 已經有造訪過這兩個網站：

這是一個急就章+治標不治本的典範

2008-04-23T11:56:00.000-07:00

原帳號被刪 Yahoo用戶無法使用無名服務

把這一篇和下面的相關新聞一起看，相當有趣啊。

未支援分頁瀏覽的 PChome 24h 購物

2008-03-24T01:20:00.000-07:00

今天本來想買個硬碟用的3.5吋外接盒，連上去找了一下....

圖一：產品的圖和文都是執行javascript做換頁。

圖二：五個相似產品。不過左邊的排行榜是用<a> tag做換頁。

現在已經是IE都有分頁瀏覽(tabbed browsing)的時代了，竟然還會看到這種用javascript換頁的設計。更加鳥蛋的是，這還不是開一個新視窗來看詳細產品內容的javascript，而只是做個href的動作重導到指定的網頁去。

商品無論大小圖和文字的連結都是這個 javascript的指令，結果導致我想要一次點出五個相似的商品來做比較，卻得多手多腳多弄幾次才能把這五個商品都開出來，真是讓人不愉快。

--
之前講過遊戲基地(Gamebase)購物區的狀況，目前已經沒用javascript來做跳頁的設計了。

興奇購物網結帳程序中, 填寫資料的問題

2008-01-20T00:08:00.000-08:00

這是跟聯合新聞網合作的興奇購物網，以超商取貨付款的方式來結帳。

咦？都已經是超商取貨付款了，為什麼還要我填身分證字號？姓名和手機電話還不夠用來確認是取貨者本人嗎？會不會是便利商店系統要求的呢？來看看另一家網路購物的系統....

這是博客來系統的結帳畫面：

同樣是便利商店取貨付現的方式，卻不像興奇購物網那樣「一定」要填寫身分證字號才讓訂單通過，所以很明顯「身分證字號」不是便利商店系統要求要有的資料。

再來看看興奇購物網的隱私權政策說明：

我看不出來身分證字號跟「興奇科技確保僅為履行訂單及行銷之目的使用消費者的資料」有什麼關係，更何況「我們絕不會將您的個人資料提供予任何與本購物網站服務無關之第三人」並沒有積極保護個人資料的意思。

那麼，為什麼這個購物網站一定要取得訂購者的身分證字號呢？

「白木怡言」部落格的設計問題

2007-12-27T22:44:00.000-08:00

這裡不是「白木怡言」部落格。 XD

這個部落格是用asp開發架設的，操作流程表面上是沒問題的，不過有幾個問題存在著：

1. 左下「留下您的足跡」的「主旨：」「內容：」的td應該要加上nowrap避免文字自動換行。不過加上去之後會產生別的問題，後述。
2. 「其他主題」「下一頁」和左邊選頁數的連結，其實是用javascript做submit的動作，所以搜尋引擎是找不到這些後續的內容。若是有人想把「其他主題」的某一篇標記到書籤網站或是嵌入內文連結，就沒有正確的網址能用。(或許這是故意的？)
3. 內文切頁看起來像是用每行字數來除，然後以行數做切頁的依據，就會斷文斷得怪怪的，加上字體又不是用monospace這種固定字寬的字型，當全形字半形字混用的時候，會導致每一行的長短不一。

這是用網頁工具把做排版的table/cell以框線方式顯示出來的畫面，明顯可以看到幾個問題存在：

1. 文章標題/內文/分頁應該要包在同一個 table 裡面，這樣頁面寬度看起來才一致。
2. 「主旨：」「內容：」加上nowrap避免自動換行後，會導致藍框整個往右擠，導致其他主題所在的綠框也往右移動而不在預定的位置，「內容：」右邊的textarea寬度應酌量縮小，或是綠框的寬度(甚至是表格分佈)重新設計。

其他不明顯易見的問題：
1. 叫出原始碼來看，會發現有 CSS style 寫錯。網頁完成請記得找個CSS Validation Service檢查一下。
2. 都什麼年代了，網頁還在用big5編碼，該換UTF-8了。
3. 寫這個部落格程式的人，趕快去把程式輸入檢查做好。(謎)

桃園長庚醫院外科系網頁的問題

2007-09-04T20:45:00.000-07:00

桃園長庚醫院外科系的網頁，有一個做網頁的人常發生的毛病，那就是抄別人網頁裡的東西，沒有把屁股擦乾淨，尤其是用FrontPage或是DreamWeaver之類的網頁編寫軟體，常常會忽略檢查屁股乾不乾淨。

姑且不論這種愛心的圖案適不適合用在這種地方，外包著愛心圖案的連結也該記得清掉啊，要不然大家都知道這是去日本網頁抄來的圖了。

--
遙想當年2004年2月的時候，大陸浙江大學數學科學研究中心抄襲台灣清華大學的網頁，經披露後幾天就消失了。不過web archieve的記錄還在，直接網頁原始碼叫出來一看：

這還真是明顯的抄襲證據啊。

這是當時清華大學的網頁，可惜 web archieve 沒存到背景藍色的橫條圖片，要不然看起來就一模一樣了。

新竹科學工業園區勞工育樂中心的網頁

2007-09-03T20:24:00.000-07:00

今天因為要去某個活動，所以上網路找了一下新竹科學工業園區勞工育樂中心的網頁。

很奇怪的，Google 是直接找不到這個網站的，都是其他一些活動辦在這個地方的訊息，裡面有些才有連結到上面這個網站。

看了一下新竹科學工業園區勞工育樂中心網頁的原始碼，如下圖：

喂喂，連堂堂「新竹科學工業園區」這個名號都沒掛上去啊，難怪搜尋關鍵字下「新竹科學工業園區勞工育樂中心」會找不到。那好，我找找「勞工育樂中心」看看：

每一頁的列表我都看過了，全部都找不到新竹科學工業園區的勞工育樂中心網頁，限定搜尋網址再找一次看看：

真是太偉大了，完全找不到真正的網頁。
試了一下，還真的有個 robots.txt 叫搜尋引擎滾蛋咧。

--
這是一個很明顯的沒用網頁範例。

標題記得要放完整。
網站要能讓搜尋引擎找得到。
網站請放在網路穩定的地方，動不動就連不上或是查不到網址是怎樣。

做這種網站有什麼怕人知道的啊..... -_-

愚蠢的首頁：台視文化全球資訊網

2007-07-03T03:52:00.000-07:00

這年頭網頁頗流行第一頁先放個 flash 或是影片之類的，然後再讓使用者點進去到真正提供內容的主要頁面去。就像下面這一頁一樣：

這個 flash 的大小有 2402977 bytes 這麼大，以現在一般 ADSL 2M 保障頻寬來算，至少也得 8 秒才傳得完，若是以 512K 來算的話，那至少得 32 秒才傳得完。

放 flash 的網頁為了頻寬不大的使用者著想，不需要浪費時間去傳完整個 flash 就可以直接進去主要頁面，所以才有了一個 SKIP 按鈕的設計放在 flash 外面來跳過載入 flash 的時間，以達到友善使用者介面的效果。

為什麼我會特別提出這一點，因為台視文化全球資訊網這個 flash 一開始是一個載入的畫面，得等到整個 flash 都傳完之後才會開始動，然後開始動了以後，右下角才出現 SKIP 的按鈕，完全沒有任何意義嘛，浪費使用者的時間和頻寬。更何況這網站還放在中華電信機房裡，應該浪費了不少頻寬費用在這上面吧，大概試了一下，這應該是租 100Mb 的頻寬吧，本錢很粗喔。

--
另外，這個 flash 檔名叫做 example.swf，網頁標題也叫做 example，只要花點時間還可以找到網頁後台的進入點，再花點時間就可以... 咳咳，我沒有看到什麼管理介面的，真的。

這樣的網頁竟然還能拿出來用，做這個網頁的人到底腦袋裡面裝的是什麼東西啊？(其實這網頁和主要內容頁都還有幾個明顯的問題，我懶得寫了，台視又沒付我顧問費 :P)

未支援分頁瀏覽的遊戲基地(Gamebase)網頁

2007-01-10T04:04:00.000-08:00

下圖是遊戲基地購物區的產品列表畫面。

早些時期 FireFox 之類可以分頁瀏覽(tabbed browsing)的瀏覽器不普遍也就算了，現在連有分裂遊覽功能的IE7都光明正大藉由 Windows Update 硬幹強姦迫使用者升級，而遊戲基地的購物網頁卻還在用沒有必要的 JavaScript 阻礙使用者以分頁瀏覽的方式來觀看產品網頁。

不只上圖中最下面的分頁處，頁面上還有幾個超連結也是不友善的使用 JavaScript，更不用說購物車的結帳程序只有IE能夠正常執行。

--
這招超連結故意用 JavaScript 也對 Google 之類的搜尋引擎不友善，難道是怕被使用者用搜尋引擎尋價的時候，發現遊戲基地賣得比較貴而不來消費嗎？ :P

創見T.sonic 520產品網頁

2007-01-02T23:59:00.000-08:00

其實這一篇不是寫網頁設計的問題，而是一個產品網頁該有卻沒有的內容。

因為某個原因，我在看創見 T.sonic系列產品的網頁，符合我的需求的是T.sonic 520這個產品，產品的網頁如下圖：

唔，我想看看耳機孔位置、各個開關、USB孔、電池孔是放在側面哪些個地方，確定在使用中不會壓到或是發生進水之類的問題，所以點了一下顯示更多圖片.....

喂喂，這幾張圖片根本沒用啊，去看看T.sonic 310的網頁，下面這張才是有用的產品圖片啊 -_-

結果最後是在產品手冊裡面找到下面這張解說圖片，可是還是看不出來實物的 USB 孔是不是有防水的橡皮蓋...... -__-

我想一個產品的網頁，提供給消費者應該是能夠快速讓消費者查看及比對的內容，而不是讓消費者還得去下載一個 PDF 檔案在裡面找所需的資訊，找到的竟然還不是實機的圖片解說。

Update: 拿到實機後，下面的 USB 孔沒有橡皮蓋，旁邊 line-in 的孔也沒有，感覺上很容易進水就完蛋似的.... -___-

越將網站設計 www.sifon.cc

2006-12-21T20:51:00.000-08:00

這是越將網站設計的公司網頁，愚蠢判定如下：
1. 一頁式網頁設計通常是以直的 A4 來做設計，哪有肥成這樣子的啊。
2. 本頁用的顏色頗怪異，表面上看起來是要做明亮的設計，卻用了偏暗沉的顏色。
3. 左右很明顯是要拿來當廣告條列表，可是風格跟本頁不合。
4. 左邊廣告數量不足，下面留空白很難看。
5. 右邊的是會上下移動的廣告條列，很蠢。
6. 部分內容強調的方式不恰當，反而造成突兀的感覺。

你會相信這家網站設計公司做出來的網頁嗎？