Showing posts with label UI. Show all posts
Showing posts with label UI. Show all posts

Monday, July 18, 2011

beta.tw.news.yahoo.com

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...

Monday, June 28, 2010

總統府新網站

總統府新網站 竟花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:手機殼不見了,看起來更蠢了,這包商到底知不知道手機版網頁的重點啊。

Thursday, April 08, 2010

維大力網站

維大力網站


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

點下同意之後:


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

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

Tuesday, March 03, 2009

中華電信首頁

中華電信首頁


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

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

Thursday, January 15, 2009

檢閱 Mr.6 的 beta20.org

各位或許還不知道 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 已經有造訪過這兩個網站:


Thursday, December 27, 2007

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

這裡不是「白木怡言」部落格。 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. 寫這個部落格程式的人,趕快去把程式輸入檢查做好。(謎)

Tuesday, September 04, 2007

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

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


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

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


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


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

Wednesday, January 10, 2007

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

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



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

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

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

Tuesday, January 02, 2007

創見T.sonic 520產品網頁

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

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


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



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



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



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

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

Thursday, December 21, 2006

越將網站設計 www.sifon.cc



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

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