總統候選人網站比較

昨天有個朋友在他BBS個人版上比較起兩位總統候選人的網站，我也順便點過去看看，結果就促成了現在寫的這篇文章。

如同大家所知道的，明年的總統候選人目前有兩位，分別是馬英九和謝長廷，兩個陣營應該都有專門的部門負責網站建置，不過就我看來兩邊的成果其實差距不小，雖然我不認為所有的網站都要顧慮到網路標準、親和力、使用性等等，但是至少總統候選人的需要吧。

謝長廷

謝長廷的網站使用的是上個世紀的表格排版，從頭到尾看不到一個head標籤（h1～h6），從網頁標題和頁面主體我都沒辦法第一時間判斷是不是謝長廷的競選網站，雖然在Google上搜尋謝長廷時這個網站還是排第一，但是這些設計都是對SEO和親和力很不好的，而我覺得最糟糕的一點是政績，昨天進去看竟然是空的，今天看已經有些資料了，可能是某處的討論傳開了所以趕快放些東西上來吧，不過活動紀實還是空的，像這樣需要形象良好的網站放空頁面上去是很要不得的，就算放一個施工中頁面也是不好，最好是沒完成的部份就不要讓人可以連結進來看，把連結先disable掉才是比較好的作法，這樣訪客才不會有白跑一趟的感覺，尤其像是政績的介紹，竟然寫著「抱歉，目前尚無資料！！」搞不好會有人想說其實是沒有政績吧。

再來，HTML沒有通過W3C檢測，沒有指定DTD，並且首頁尾端在Firefox上有排版不正確的情形，圖片也沒設定替代文字，我想有接觸過親和力資訊的人都知道螢幕閱讀器(screen reader)在遇到沒有替代的文字的圖片時，會把圖片網址念出來吧，而這些圖片還包括導覽列的那些項目，所以會看到一個連結的code如下：

<a href="http://www.frankhsieh.org/mod/news/index.php?REQUEST_ID=cGFnZT1tb3ZpZQ==">
  <img width="75" height="41" src="http://www.frankhsieh.org/images/mod2.gif"/>
</a>

加上連結的URI本身也不具有意義，看不到圖片的人真的沒辦法知道這連結的內容是什麼。說到URI，它的網址路徑很像使用架站套件來建置的感覺，但是從頭到尾都找不到相關資訊，當然這只是我推測的，如果不是自己開發的系統，還把使用系統的相關資訊都刪除掉似乎不太好。

謝長廷的部份就先在這裡打住吧，其實要找問題真是找不完，感覺就像是台灣大部分的網站製作公司做出來的水準，而且有些頁面資訊還是空的，我逛了沒多久就沒興趣逛下去了，反觀馬英九的真是好很多。

馬英九

由於我是先看到謝長廷的網站，才看到馬英九的，所以一開始真是有點嚇到了，覺得怎麼差距會這麼大，讓我再次覺得找對的人做對的事真是很重要。不過花了一個晚上慢慢比較、檢查，就發現馬英九的網站還是有很多可以改進的地方，不過還是先來講講他的優點吧。

首先，網站的主題明確，一進來在頁面左上角最顯眼的地方就看得到馬英九三個字，加上其他顯眼的資訊，訪客一點都不會懷疑這是馬英九的競選網站，再來服務條款、內容政策、隱私權說明、著作權說明每項資訊都有，而且連結位置明顯，像這類資訊雖然大部分訪客都不會去看，但是其實是很重要的，使用Drupal系統也有註明。除此之外，整個網站也使用了不少網路服務，像是flickr、Google Maps、Google Video，行事曆還可以匯出給iCal（我想開發人員是Mac使用者吧），也因為使用Drupal，所以本身就支援資料來源(feed)，而且還有用feed burner燒過，不過feed burner因為還沒有中文介面，其實並不一定是好事。

簡單講完優點，再來說說馬英九的網站有什麼問題吧，其中最大的就是沒有考慮網站親和力，像是他的下拉式導覽列雖然Firefox也能正常使用，但是其實是完全用javascript產生的，所以像純文字瀏覽器和搜尋引擎的機器人就看不到導覽列，SEO就會變差，再來圖片也沒有替代文字，不過至少沒有排版用圖片，但是幾乎每個分區的標題都是用圖片。有不少贅餘標籤和class，雖然DTD指定是使用XHTML，卻有不少標籤沒有正確結束，當然也因此沒通過W3C檢測，而且錯誤還比謝長廷的多（不過謝長廷的網站因為沒有指定DTD，所以是用HTML 4的規範做檢測），以贅餘標籤和class為例，在行程的側邊欄的每一個項目的HTML code看起來都像下面這樣：

<li>
  <div class='view-item view-item-schedule-block'>
    <div class='view-field view-data-node-title'>
      <a href="/schedule/2007-09-22t09%3A00%3A00/554">蕭萬長--國民黨執政縣市長協調會報</a>
    </div>
    <div class='view-field view-data-node-data-field-date-field-date-value'>
      <span class="date-display-start">2007/09/22 - 09:00</span>
      <span class="date-display-separator"> - </span>
      <span class="date-display-end">2007/09/22 - 10:30</span>
    </div>
  </div>
</li>

不過這很有可能是Drupal系統自動產生的，而除此之外，網頁內還有些舊時代的餘毒，例如首頁最上面的

<a name="top"></a>

就是一例，另外還有一些奇怪的錯誤，像是style放在body裡面、不同區塊的頁內script有的用HTML註解有的用CDATA，而大部分是都沒有的，在SEO、文件結構和使用性三者還有一個共通的錯誤，就是開發人員自己把頁頂的h1標籤兼回首頁連結砍掉了，結果在header裡面沒有文字的網站標題、使用者按網站頂端的標題也不會回到首頁，沒第一級的標題造成文件結構不完整，網站標題不能回首頁是破壞使用者依循的經驗。

美國總統候選人的網站

昨天在HappyDesigner的IRC上提出一些討論時，lukhnos很快就找了很多對照組，我拿了美國總統候選人的其中三個網站來作對照：

三者在視覺呈現以外的部份其實都是比國內兩位候選人的網站還要來的好，不過不知道為什麼大家都不喜歡h1標籤，扣除這點，以上三個網站的圖片都有替代文字、不是表格排版、有使用h1~h6標籤（這可以讓螢幕閱讀器的使用者很容易的穿梭於各段內容）、沒有使用純javascript導覽列、而且也都使用了不少網路服務。至於視覺呈現，像是排版、配色等非我專長，所以我就都不做評論了。

另外本文中總共五個網站中有四個有使用Google Analytics，這是很不錯的方法，可以知道訪客究竟對什麼有興趣、流量、瀏覽方式等等，對於內容調整和網站更新都很有幫助，不過這也表示Google掌握了很多資訊XD。

結論

最後結論：「兩位候選人網址都沒有tw，都不愛台灣啦（投下廢票）！！」