Jane's Blog: Web Design

顯示具有 Web Design 標籤的文章。顯示所有文章

2/08/2009

談系統介面設計

Window Vista 的使用性與支援性不佳, 上市後願意升級使用的人不如預期. 系統使用性的好與壞牽涉到使用意願, 學習成本和訓練成本.

如果只考慮設計面, 做出具有美感的網頁是設計師最愉快的事情, 但是要考慮與功能搭配, 清楚傳遞訊息和符合產品形象的話, 就需要花心思做功課. 以系統介面設計來看: 要先了解使用的對象是誰, 知道建置的目的與功能架構, 才能設計與系統特性吻合的介面.

在分工比較細的公司裡, 系統開發人員包含系統規劃, 使用性測試, 視覺設計和程式設計. 工作流程應該是一個循環: 系統需求-系統雛形-使用性測試-圖形介面設計-使用性測試-程式設計-使用性測試. 而這循環也有順序, 先按照系統需求做雛形UI (User Interface), 再針對雛型的流程頁面做使用性測試 (Usability Test), 如果發現問題就回去修改雛形, 修改完整之後交付視覺設計做圖形介面GUI (Graphic User Interface), 然後再做一次使用性測試, 確認圖形介面設計完善, 最後再交工程師套程式完成系統, 然後再做一次使用性測試, 確認完成的系統設計無誤. 這個流程顛倒的話將造成必須從最後面回到最前面, 難度更高也更耗費時間的修改成本.

使用性人員的角色是尷尬的, 它可以是一個專門的角色, 也可以由系統分析師或視覺設計師兼任, 當缺乏專門的角色時, 系統分析師和視覺設計師都有責任扮演這個角色. 系統分析師主導的是屬於功能層面, 要將功能需求轉化成系統雛形; 而視覺設計師負責視覺層面, 將系統雛形轉化成更容易被使用者接受的圖形介面; 二者要能向下和向上延伸, 共同完成使用性的需求.

一般來說, 使用性原則只對通則做規範, 例如: 易懂易學的介面, 適度的容錯性, 適時的訊息提示…等原則, 很難具體指出哪個頁面一定有哪些功能, 哪些欄位應該配置怎樣的順序和訊息. 系統的需求不同, 功能架構和動線流程就不同, 無法期待在不同的系統都套用同一種規則設計. 這就好比廚師做菜, 無法只用一種食譜做出各式各樣色香味俱全的菜色.

怎樣的設計是好的使用性設計? 符合使用者需求的設計就是好的設計, 但是了解使用者需求不會是坐在辦公室裡冥想出來的, 需要實際調查與測試才能得到答案. 知道設計通則和擁有豐富經驗還不夠, 因為每個系統各有不同的建置需求和使用目的, 開發團隊在ㄧ開始就應該探討使用的需求和目的, 過程中不斷地做測試改善, 才能設計出符合需求的系統.

做使用性測試可先從內部尋找幾個非開發人員對系統雛型做測試, 在ㄧ旁觀察他們的使用情況及遇到的問題, 針對這些狀況做記錄並改善系統設計, 當然, 能夠直接找到真正的目標使用者做測試是最好不過, 但是初期先由內部找幾個人測試也往往能發現很多問題. 這種在每個流程中不斷修正的方式, 應當可以避免很多系統上線後才發現的問題, 也不會因為修改成本太高, 無法做過多調整, 導致難以挽救的情況.

10/12/2008

幫舊版IE升級到IE7或IE8的方式

最近瀏覽器的爭戰越來越激烈, 6月有 Firefox 3 和 Opera 9.5 版的發佈, 9月有 Google Chrome Beta 版發佈, IE8 正式版要在11月發佈, 中文正式版大約晚2個月, 預計明年初發佈.

Netscape 在不久前才表示不再發佈更新版本的瀏覽器, 等於宣告Netscape 將走入歷史, 但是又出現一個全新的 Google Chrome. 以 Google 的用戶數來看, 也是不容忽視的瀏覽器. 想必 Goolge 要藉由開發自家瀏覽器做更多Web應用和服務.

網頁設計師過去一直為不同的瀏覽器修改畫面呈現的問題(因為各家瀏覽器的開發缺乏標準), 瀏覽器版本越多就越麻煩. 但是拜 W3C 之賜, 這幾年強力推行 Web Standard, 原來只有 Firefox 遵行, 現在 IE8 也標榜支援 Web Standard 和通過 Acid2 檢測. Acid2 是檢驗瀏覽器對 Web Standard 的HTML、CSS 2.0、PNG圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Opera Mobile 行動裝置版, Firefox 3, IE 8 和 Chrome , 所以未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.

但是如果還要顧慮 IE5 和 IE5.5 甚至 IE6 不怎麼完整的 CSS2 支援性, Dean Edwards 的 IE7.js Version 就很好用了, 藉由在 <head> 連結一支 js 檔將舊版 IE 轉變成 IE7 或 IE8 所支援的CSS2 selectors 的方法.

例如要將 IE5~6 升級到 IE7, 可在 <head> 加上以下的 code:
<!--[if lt IE 7] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-- >

例如要將 IE5~7 升級到 IE8, 可在加上以下的 code:
<!--[if lt IE 8] >
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-- >

也可將這支 js 下載回來使用 http://ie7-js.googlecode.com/svn/version/2.0(beta3)/

但是這支 js 檔到底為 IE5~6 加入哪些新東西呢? 以下CSS2的用法將會通通支援:
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()

再加上支援 Doctype 標準模式 (Standard Mode) 和相容模式 (Quirks Mode) 的切換, 支援 fixed positioning (固定位置設定), min/max-width/height ( 最大最小寬度高度設定), 支援 PNG 透明圖檔等.

更完整支援內容請參考以下網址:
http://dean.edwards.name/IE7/
http://ie7-js.googlecode.com/svn/test/index.html

要幫 IE5, IE5.5 和 IE6 升級到 IE7 或 IE8 版本, 這方法一定要試一試!

7/23/2008

2007到2008網頁設計風格走向

水晶玻璃和所謂Web 2.0的網頁設計風格走紅了2~3年, 最近已經慢慢消退, 取而代之的是花草紋路, 插畫塗鴉, 材質拼貼和復古風 (Vintage) 照片等多樣化的網頁設計. 設計者使用的素材不再以圖庫照片為單一表現, 從當前的素材網站提供的筆刷和材質圖片可以看出這些改變.

網頁設計潮流每隔幾年就會有變化, 最初是以Photoshop切割大圖的方式拼湊整張首頁, 網頁色彩傾向灰暗色調, 如灰藍, 灰綠等, 選單喜歡加上半立體效果; 後來改為部份切割圖片, 搭配table的背景圖或frame做網頁延伸; 最近幾年則模擬水晶, 木質, 鐵質, 水彩, 潑墨, 塗鴉等更豐富的材質設計. 當然這些改變也和顯示器支援的色彩品質及網頁下載速度越來越好有關.

設計的趨勢潮流不應該忽視, 反觀原始的網站設計, 從現在的角度看就過於灰暗單調, 屬於老舊的設計方式. 所以設計師應該關心和留意目前的網頁設計走向, 更新表現手法.

但網頁設計也不應該一昧的跟隨潮流, 最主要還是從網站的訴求和目標使用者的特性做考慮, 避免做出與網站使用目的差異太大的風格, 盡量在網站訴求與趨勢潮流之間取得平衡.

有幾篇探討當前網站設計風格的文章做了分類和擷圖, 提供這些文章的網址給讀者參考. 另外也介紹幾個不錯的免費素材網站, 除了觀察素材應用的變化, 也可以下載回來使用.

網站風格分類:
2008 Design Trends
Vintage Web Design
2007: More Web Design Trends & Cliches
Best of CSS Design 2007

免費素材下載網站:
Squidfingers/Patterns
200+ Textures, Brushes, and Fonts: Ultimate Grunge Roundup
400+ Swirls, Curls, and Fleurons
300+ Vintage Style Textures and Photoshop Brushes

舉例說明 2008 Design Trends 這篇文章區分出11種表現方式:

1. Vintage / Retro Styles 復古風格圖片
2. Handwritten Notes and Paper Clips 便利貼(或迴紋針)方式
3. Grungy 雜亂方式
4. Splatter Ink 潑墨方式
5. Watercolor 水彩方式
6. Collage 拼貼方式
7. Sketches and Handwritten Fonts 手寫和手繪方式
8. Big Fonts 大字體方式
9. Script Fonts 手寫字體(指英文書寫體)方式
10. Wood Pattern 木紋材質方式
11. Zig Zag Pattern 水波漣漪方式

其他文章也有分成卡通類, 插畫類和其他紋路背景等, 分法大同小異, 沒有誰分的才是正確的, 但整體的風格走向總共有這些表現方式, 怎麼分類就讓大家自由心證, 各自表述.

5/31/2008

簡易的CSS彈性圓角邊框設定

彈性圓角邊框的傳統製作方式是利用 table 的 4 個角落各放一張圓角小圖, 再利用背景圖做上下左右 4 邊線條的伸縮效果, 在想避免使用 table 排版, 精簡原始碼的人眼中, 這種方式很多餘, 但又ㄧ直沒有更好的替代方式.

"101個您一定會遇到的問題與解答" 書中曾介紹 3 種製作彈性圓角的方式, 但都不十分理想:

第一種方式是用Firefox專用語法 –moz-border-radius 設定圓角邊框, 只有在 Firefox 瀏覽器可以看見圓角效果, IE 無效.

第二種方式是利用很多僅 1px 邊界設定差異的 <div> 包覆內容, 書中範例在內文上方用 9 個 <div>, 下方也用 9 個 <div> 才完成一個圓角邊框設定, 步驟繁複不說, 顯示的鋸齒效果也不太好.

第三種方式是先切好 4 張小圓角圖, 二張放 html 上, 二張放 css 背景裡面, 再用 class 設定圓角與邊線位置, 這不純是用 css 作成的, 比較像是傳統 table 方式的變身. 對還需要放 2 張圖在 html 上的做法不是很欣賞.

有ㄧ篇 Simple Rounded Corner CSS Boxes 是目前看起來最好的用法, 只用 4 個 class 和一張背景圖就完成圓角邊框設定, 而這張背景圖也允許有立體陰影等效果. 原文是做固定寬度 335px , 這邊我改為彈性寬度, 所以將 width: 335px 刪除, 也對內文與標題間距做點調整.

首先要設計一張夠大的圓角框背景圖 (寬 3200px, 應該沒有比這更寬的螢幕了, 高度也視需求製作), 如果要有陰影立體也直接畫好, 圖雖然大張, 但色階不多的話, 存成 jpg 或 png 也只有幾十 K 大小, 不必擔心檔案過大. 如果標題很長或可能有好幾行字, 可將標題區域高度做大一些, 讓文字有向下伸展空間. 然後再用 4 個 class 對同一張圖做標題及上下左右圓角顯示位置和間距的設定. 這方式不管是html或css設定都很簡潔, 效果可視需求做多元的變化.

Html範例如下:

<div class="cssbox">
<div class="cssbox_head"><h2>This is a header</h2></div>
<div class="cssbox_body">
<p>This is for your content. ... This is for your content.</p>
</div>
</div>

CSS設定如下:

/* 設定右下角圓角圖 */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(box.jpg) no-repeat bottom right;
}

/* 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.cssbox {
padding-right: 15px; /* 底圖右邊緣間距 */
margin: 20px auto; /* 地圖上下左右邊界 */
}

/* 設定右上角圓角圖 */
.cssbox_head {
background-position: top right;
margin-right: -15px; /* 右上角底圖向上拉高 15px */
padding-right: 40px; /* 右邊間距 = 圖片間隙 + 內側間距 */
}

/* 設定左上角圓角圖 */
.cssbox_head h2 {
font-size: 120%;
background-position: top left;
margin: 0; /* 邊界設定為 0*/
border: 0; /* 框線設定為 0 */
padding: 5px 0 5px 40px; /* 左側間距 = 圖片間隙 + 內側間距 */
height: auto !important;
height: 1%; /* IE Holly Hack 修正 */
}

/* 設定左下角圓角圖 */
.cssbox_body {
background-position: bottom left;
margin-right: 25px; /* 右邊間距 */
padding: 15px 0 15px 40px; /* 間距設定, 左側 40px 要與 .cssbox_head 相同 */
}

/* 內文與標題間距修改 */
.cssbox_body p {
margin-top: 0 ;
}

這是利用 cssbox 和 cssbox_body 做右下和左下圓角, .cssbox_head 和 .cssbox_head h2 做右上和左上圓角, 並針同一張圖的背景 (background-position) 做置左置右或靠上靠下設定. 所以 4 邊的 margin 和 padding 必需互相對稱搭配, 才能做出無縫隙, 上下左右均衡的圓角邊框.

好用的 "CSS彈性圓角邊框設定" 推薦給各位!

3/09/2008

免費icon圖示介紹

介紹幾個屬於公共版權 (Copyleft, 相對於 Copyright 的一種公共分享方式, 允許所有的人自由複製, 散佈, 修改的權利, 相關授權說明請參考自由軟體網站 ) 的免費 icon 圖片下載網站.

第一個是 Iconfinder, 用查詢方式輸入關鍵字 (例如 arrow, folder, search, book, user等), 或到內頁用標籤雲 (Tag Cloud) 點選標籤文字查詢. 在查詢結果頁的右上角可設定icon圖示大小, 共有12x12, 16x16, 22x22, 32x32, 48x48, 64x64, 128x128 7種規格和背景色設定. 下載圖檔為 png 格式, 每張圖片按照原作者提供的授權方式有 GPL, LGPL 和 Creative Commons 等 (都屬於公共版權授權條款的一種).

第二個是 Freeicon, 總共提供 15,000 個免費 icon 圖示做為非商業目的使用, 商業目的使用者仍須取得授權. 這網站將 icon 圖示按照主題分類, 有 png 和 gif 二種類別, 可找到相同風格的一系列圖示, 下載時建議點選右下角的 "Download" 下載, 圖片的解析度比較高.

第三個是 Wikimedia, 這網站提供 300 個免費 icon 圖示, 點選 icon 圖可看到每張圖的說明和大圖(128x128)

做網頁如果為了幾張 icon 圖示傷神的話, 這三個網站可以先去找找!

1/01/2008

IE8 Beta 1 版本將在2008上半年公佈

根據PC World 12月19日的新聞, IE8 Beta 1 的版本將在2008上半年公佈, 這次IE8的最重要目標除了要相容於既有版本的網站呈現, 更要朝web標準方向發展, 提供user更好的使用經驗.

web標準意味著與所有瀏覽器有ㄧ致的呈現與反應, 開發人員不需為了各家瀏覽器做不同版本設計. 但是這需要幾年時間轉化, 因為IE6, IE7的使用者仍會存在好一段時間.

至於IE8 final 版的時程則視各方對beta版的使用回饋意見而定. 詳細新聞請參看PC World:
Microsoft to Release IE 8 Beta 1 in First Half of 2008

10/15/2007

談SEO

網際網路的世界有成千上萬的網站, 而且還在持續的增加當中. 記得在初始的網路發展階段會需要記得某些網站的網址, 現在則用搜尋的方式找了. 只要Keywords下的準確的話, Google通常能在最前面幾筆資料就出現要找的網頁. 這種精凖除了技術之外還包括他們對搜尋品質的堅持 - "致力於讓網際網路內容能公平正確的呈現", 所以Google拒絕任何造成網頁排名不公的方式.

很多搜尋引擎採用收費方式讓某些網站在搜尋結果的排名變高 - 錢付越多排名越高, 所以使用者最先找到的會是付很多錢的網站, 不是真正想找的網頁. 因為Google準確的搜尋結果聚集更多的使用者, 也因此決定很多網站的流量和曝光率, 讓 "要如何提升在Google的搜尋結果排名" 變成是一件很重要的事. 所以標榜SEO網站建置的公司開始出現了!

SEO (Search Engine Optimization 搜尋引擎最佳化) 是一種利用搜尋引擎的搜索規則提高網站在搜尋引擎的排名的方式, Google有自己一套複雜的演算法去擷取和比對資料, 真實的排名基準Google不願公開, 但是在Google Webmaster "網站管理員指南" 中所說的 "設計、內容和技術指南" 和 "品質指南" 要請牢記, 尤其違反 "品質指南" 8項中的任何一項, Google會讓該網站從索引中移除, 也就是你的網站不會在Google出現了, 不管下任何Keyword, 不管到幾萬筆資料之後. 這8項分別是: 隱藏的文字或連結, 偽裝的重新導向功能, 寄自動查詢給Google, 載入不相關關鍵字網頁, 建立大量相同內容網頁或網域, 植入病毒或惡意程式網頁, 使用專為搜尋引擎建立的入口網, 極少或無原始內容網頁.

有誰的網站曾被除名過? Wikipedia SEO 一文的垃圾索引 (Spamdexing) 段落中提到: 在2006 年2月, Google拿掉BMW 德國站和Ricoh 德國站, 因為他們用垃圾索引的方法企圖影響排名. 被除名的一定不只這2個站, 只是這2家公司比較知名, 特別被提出來舉例.

怎麼知道你的網站還存在於Google否? 檢查的方式是在Google的搜尋欄位鍵入 "Site: 你的網址" , 例如: Site: jane-wu.blogspot.com (這不是上面所指的自動查詢)
查詢結果的第一筆就出現這個部落格, 所以這部落格還在. 但是萬一很不幸找不到怎麼辦? 這表示你的網站可能不小心觸犯某些規則, 必須先將違規的地方改善然後提交審查通過, 你的網站才得以重生. 這些規則細目和審查網址可以在 "網站管理員指南" 中找到.

Google不喜歡網站為了提升排名, 以欺騙或隱藏等負面方式降低他們網頁搜尋結果的品質, 但是他們鼓勵適當使用關鍵字和建立優質的網頁內容讓他們網頁搜尋結果的品質提高. 要做SEO搜尋引擎最佳化網站並不難, 最重要是朝正面效果的方向走並儘量避免負面效果的因素. Google的 "設計、內容和技術指南" 雖然列出幾項建議, 但是說的還不十分完整, 本文另外參考幾篇關於SEO製作的文章, 將重點整理歸納如下.

影響SEO的因素區分為二種類型: On page 和 Off page

‧On page指在單一網頁上能產生影響的因素, 包括keyword的關連性與密集度, 重點在title和meta的描述, H1, H2, … H6, strong, em tag的運用等, 以及所有可以放在頁面上對內對外的連結, 網頁內容的豐富性與品質等.
‧Off page指從其他頁面連到某單一網頁的連結(由本站其他頁面或由其他網站連過來的都算), 網站流量越高, 站齡越久, 規模越大, 經常更新等項目的評估都是影響排名的因素.

On Page的部份:

1. Keywords(關鍵字)的應用
如何下正確的Keyword? 以商務網站來說, 必需先知道自己最重要的產品與服務有那些? 如果是自己要購買和搜尋這些產品與服務會用那些Keywords搜尋? 找出這些Keywords之後, 再用這些Keywords做搜尋, 檢查下的對不對? 如果搜尋結果最上方幾筆資料出現的產品與服務正好與你的類似, 就表示下對了. 將來別人使用這些Keywords搜尋時, 你的網頁才能對準目標使用者適時出現. 相反的, 如果下錯Keywords, 只在非目標使用者眼前出現, 爭取再高的曝光率和排名也沒用. Google Adwords suggestion tool是協助找出Keywords的建議工具, 可以參考看看!

Keyword應用的層面很廣, 包括

a. URL: 在網址列上包含keyword可讓排名提升, 如: http://www.books.com/abc.htm 或 http://www.books.com/english/abc.htm 能讓某書店網站的英文書籍中的ABC這本書網頁排名更高. Keywords可以是books, english和abc. Google認為以Keyword為網址名稱意味著他的重要性也很高. 如果是動態網頁, 網址包含了 " ? " 等字元的話, Google 網站管理員指南提到應該讓參數儘量簡短, 因為並非所有自動尋檢程式都能檢索到這樣的網頁. Dynamic URL Rewriting Done Right 文中建議將冗長的動態網址改寫成以數字序號顯示, 例如: 可以將
http://www.books.com/post-edit.g?bookID=29982455&postID=7022406442842187241#
改成
http://www.books.com/104596.htm

直接以產品,服務名稱或文章標題的Keyword為網頁命名會比用參數或不相關的名稱為佳.

b. Domain Name: 和URL一樣, 如books就是很好的Keyword應用到Domain Name上的範例. 但請使用最上層網域, 例如使用 http://www.example.de 會比 http://www.example.com/de 或 http://de.example.com 的辨識度好 - 更容易辨識是德國網站.

c. Title: 和URL一樣, 在網頁title名稱顯示Keywords對排名也很有幫助, 例如 xxx 網路書店-中外書籍雜誌, 生活百貨, 3C家電, 線上優惠訂購 ! 搜尋結果頁出現的就是這行title標題, 要善加運用讓使用者可以一目掃過. 如果只寫 xxx 網路書店未免可惜, 寫太多又模糊焦點! (使用者一目掃不完的就會放棄)

d. Meta Tag: Meta Name 的description (描述)儘量維持在255字元以下, 使用的Keyword也應該和該網頁內容直接相關; Meta Name的keywords 只有少數搜尋引擎在用, Google已經不對此做檢索, 因為太多人濫用這項功能, 填塞關聯性很低的Keywords.

e. Head標題: 將Keywords放到網頁文章標題中, 並以等級最高的H1為tag標籤, 如果需要的話可搭配H2做為次標題, H4, H5, H6的重要性就很低了, 希望排名高的話不建議經常使用.

f. 內文: 文章內容中如果出現Keywords, 最好能用strong 或em強調, 讓它的重要性提高. 網頁中Keywords出現頻率越多次, 密集度越高, 排名也會越高. 但是如果過度濫用, 甚至Keywords與網頁內容無關也會引起Google不悅, 後果堪慮!

g. 替代文字Alt: 替代文字Alt可以使用到keyword也很好, 重點是只要是圖形文字一定要有Alt描述, 因為搜尋引擎無法檢索圖形文字.

h. 錨點連結: 善用錨點連結增加Keywords的密集度, 例如在頁面上方條列內文標題(最好包含keyword), 將這些條例項目用錨點方式連結到該段落, 也是讓增加Keyword重要性的方式之一.

2. 連結的應用

a. PageRank的定義: Google的PageRank有一部份是用連結數量計算, 例如:有A網頁連到B網頁, 就表示A網頁投了一票給B網頁, 如果有其它C,D,E等網頁也都連到B, 就表示B的總票數比較高, 排名會提升. 當中如果A網站是數於專家級或重量級網站, 則A那一票的權重又比C,D,E的高. 所以讓更多有份量, 優質的大型網站連到你的網頁對排名有很大的幫助.

b. 增加站內連結: 增加站內連結也是A網頁投給B網頁的一種, PageRank是以網頁對網頁計算, 不是站對站計算. 所以在網站中先分組建立條列項目, 再連進單一內容頁是增加票數的一種方式. 又在內容頁建立 "上一頁", "下一頁" 可再為其他二頁各投一票. 有沒有發現Google Blogger也善用這樣的機制, 在內容頁下方有 "較舊的文章" 連結, 左邊除了文章分類連結之外, 左下角還有個Archives按月份再分類連結一次. 所以Google Blogger的SEO也做的很讚的! 如果後來的文章有提到之前的文章時, 也記得要連過去再投舊文章一票!

c. 不管連內或連外, 連結的形式最好以Keywords方式呈現, 例如: 用 ABC Book 連到該網頁會比直接用 http://www.books.com/english/abc.htm 網址連結好.

d. 連結最好固定, 不要經常更動, 否則會被評估為網站穩定性不佳.

3. 網頁內容品質
網站內容越豐富, 提供越多實用或獨特的資訊, 自然吸引更多訪客. Google也建議要善用Keywords和標題讓使用者更容易找到你的網頁.

4. 其他On Page 項目
a. 檢查html的正確性, 可參照W3C建議.
b. Google建議單一頁面的總連結數量應該少於100, 如果多出來, 最好分頁放置.
c. 單一網頁檔案大小最好少於100K.
d. 避免過度優化, 如過度使用Keywords, H1, Meta tag等.
e. 避免無效連結.
f. 避免過多的相互交叉連結.
g. 避免連到惡鄰居, Google認為各網站有責任管理好自己的網站, 要定期檢查是否連結到 "品質指南" 所提到的惡意網站, 如果有也會影響網站的評分. (如果有惡意網站連到你的網站呢? Google認為這非自己可以控制的, 所以排除這項評估因素.)
h. 最好以文字顯示重要的文字, 連結或內容, Google檢索器無法辨識圖片中的文字.
i. 以JavaScript, Frame, Dhtml, Flash製作網站內容, 則檢索器在檢索網站時可能會有問題.

Off Page的部份:

1. 網站年齡, 成立的歷史越悠久越好.
2. 內容年齡, 建立的歷史越悠久越好.
3. 流量越高越好.
4. 越多人將網頁加入我的最愛越好.
5. 越多其它網站連結到你的網頁越好, 如果是重量級優質網站則權重更高.
6. 越常新增網站內容越好.
7. 避免任何為了提高排名的偽裝技巧和不實網頁.
8. 避免 "大量" 重複內容網頁或網域, 如果有, Google會保留先建立的網站, 後建立的則除名. 這也提醒最好不要原封不動複製別人的網頁內容到你的網站上.
9. 在網頁伺服器使用robots.txt檔案, 協助搜尋引擎有效率的檢索網站, 目前已經成為 Yahoo!, Microsoft 和 Google 等搜尋引擎的共同協定, 相關作法請參考 Sitemaps.org

以上是製作SEO網站應該注意的重點事項, 諸多項目不全屬於網頁設計領域, 但大部份是. 即使不敢就這麼自稱是SEO建置專家, 但是能做到這些已經非常足夠. 是否可以因為這些讓網站建置增加附加價值多收點費用就看網站的規劃/設計和客戶的良心了!

本文使用的原始參考資料如下, 如需參考更詳細內容, 請到這些網站:
Google Webmaster 網站管理員指南(有中文繁體版)
Google Adwords
Google Ranking Factors - SEO Checklist
SEO Guy's Free Seo Tutorial
Wikipedia - Search engine optimization (有中文簡體版)
Dynamic Website SEO Terror Level Downgraded to Yellow
Dynamic URL Rewriting Done Right
Google Dropped My Website! What Should I do?

9/22/2007

IE6/IE7 bug 蒐集

今年二月寫過一篇IE7的bug, 根據IEblog的官方說法: 在 positioniseverything.net 中所提到的 IE5/6的bug, 唯一延續到IE7的是" Escaping Float Bug".

有個網頁專門蒐集各瀏覽器的bug: Browser bugs section, 裡面匯整出 Mozilla有1個bug , Opera 9有33個bug , IE6有75個bug(positioniseverything.net 說的沒這麼多) , IE7有70個bug, 每個bug還有圖示範例. 感謝有這等閒工夫的人的貢獻, 但是當中獨缺Firefox的bug. 不敢相信Firefox都沒有bug, 到Google搜尋一下還是有的 - 懷疑這些bug是不是Firefox蒐集的.

IE6, IE7的bug加起來真是多啊, 一時間很難消化, 實做上也不認為都遇得到. 但不管怎樣, 列的非常詳盡, 遇到莫名難解的情況時, 可以到這個網頁追查是不是bug問題了!

8/06/2007

訪故宮有感

上一次去故宮是國中的時候, 只在門口照照相, 沒有走進去看. 去年看見”Old is New 時尚故宮”的活動及最近博客來故宮授權商品販售, 引起我的注意, 所以趁休假期間實地造訪一趟故宮. 故宮周圍景觀和國中時的印象差不多, 只是正對大門那三棟高聳的住宅大樓很煞風景, 不知道是什麼時候蓋的, 不然這裡也算好山好水, 適合不論從哪裡來的人有個美好的文化之旅!

據說故宮的館藏是全世界排名前幾名的, 只是知名度一直不高, 外國觀光客也不多, 連台灣本地的訪客都少, 在非假日期間恐怕只淪為小學生的戶外教學場所. 畢竟會只爲了參觀故宮來台的遊客不多, 這需要比較成熟的觀光環境做配套.

故宮的主要展覽區在1~3F, B1是紀念品區和候車區(公車和遊覽車等候區), 我從3樓開始逛. 3樓是玉器, 青銅器和多媒體介紹區, 從樓梯走上去會先看見多媒體介紹區, 基於職業因素, 這一區想當然耳要仔細的瞧一瞧.

為了燈光和液晶螢幕的展示效果, 整個房間是暗的. 配合著音樂, 這個展區充滿了遠古時代神秘緩慢的節奏. 門口一台觸控式螢幕的介紹也以黑色為基調做透光效果的動態文字, 與整個空間的氣氛是可以互相融合的. 很多知名建築設計也講求將空間納入整體設計中, 以不著痕跡的手法將設計融入自然環境, 或者也可以說是將自然環境融入設計之中.

配合展區主題, 另外幾台螢幕是介紹青銅器製作方法的動畫. 在英國唸書期間有去大英博物館, 好像沒有類似的設施, 當時因為時間因素, 只參觀埃及館和中國館(想看看他們火燒圓明園時搶走那些東西), 不是很肯定其他館有沒有. 這樣的設施是可以肯定的, 透過這些多媒體輔助介紹, 能幫助參觀者了解更多時空背景, 歷史典故和製作方法, 因為這些資訊光看文物是看不出來的.

以歷史來說, 青銅器展區的文物是最悠久也最陌生的, 以前唸的歷史書只記得有鼎這一項. 而這些奇怪形狀大大小小的"鼎"不知道是什麼用途, 各有我認不出也唸不出的名稱寫在一張小小的牌子上, 短短幾個字的說明又很文言, 一般民眾的文學造詣應該沒這麼好吧! 文字中也沒提到是那一項器具, 做什麼用的? 門口牆上是有酒, 食, 樂, 兵, 量器的說明表, 但這是要考驗我的記憶力進來做對照嗎? 幾位外國觀光客頭上戴著語音導覽器, 不知道是不是有更詳細的說明, 我自以為不是外國人就沒借, 要在一樓入口處借, 我又很懶得再走下去! 以網頁設計語言來看, 這個導覽做的不好, 我不知道現在看的是什麼東西, 說明既不易讀也不易懂, 這一點需要改進! (職業病做祟)

接著參觀玉器, 這一間展區人最多, 都是為了"翠玉白菜"吧! 但是實際看這棵白菜有點失望, 印象中是晶瑩剔透的大白菜, 但真實的卻是很小棵的青江菜, 質地也不是那麼透亮, 所以看照片是不準的. 也可能其實是不錯的, 只是我既存的印象對它期望太高. 我反而喜歡放在後面的"白玉錦荔枝", 是二個苦瓜疊在一起的白玉, 非常精巧細緻, 稱錦荔枝是因為苦瓜之名不雅而另外起名的. 另一個"肉形石"也很巧奪天工, 是玉雕的一塊控肉, 肉皮雕的真是唯妙唯肖, 連毛細孔都做出來了.

2F是從隋唐至宋元明清的陶器瓷器和彫刻工藝展, 這些文物比那些"鼎"好辨認, 茶壺, 花瓶, 碗盤, 筆筒硯臺, 玉器飾品等, 和現代人所用的器皿差異不大, 沒有清楚交代用途的說明文字也無坊, 只標示年代, 材質(陶, 瓷, 玉, 石)和名稱也可以理解. 我喜歡 "明宣德時期　祭紅霽青刻花蓮瓣滷壺一對"是一對深藍與略為深紅的茶壺, 祭紅霽青是二種顏色的形容詞, 古人對器皿和形容詞的命名也很講究, 如果能用這樣的茶壺喝茶會不會更有文化一些?

有一隻宋元時期的"墨玉貓"我也很喜愛, 身體還蜷縮著, 剛抬起頭, 睡眼惺忪的黑色小貓, 模樣很可愛, 如果可以把它複製成公仔收藏有多好呀! 還有幾個像糖果盒大小的"剔紅漆盒". 在這個展區多數是陶器瓷器, 像這樣的大紅漆盒就顯得特別醒目, 故宮網站首頁的紅色雕花圖片就是這種漆盒. 其他還有金彫葫蘆, 象牙彫刻, 橄欖彫刻等做工很細的彫刻, 櫥窗內也有一只放大鏡讓人可以看清楚細部.

這裡看見的是每個時代最精湛的工藝作品, 可以看到它的材質, 色彩和審美觀的演變, 再來是創作者的巧思與手藝, 這些作品如果拿到IF 或 Red Dot這類世界級產品設計獎評比也絲毫不遜色吧! (2F有個咖啡廳可以進去喝茶或喝咖啡, 歇歇腳, 走完2, 3樓腿已經很痠了. 非假日期間很清靜, 沒幾個人, 在這裡看書也很適合.)

1F 是家具書籍繪畫展, 除非對中國書畫有些研究, 不然很難談得上喜不喜愛. "清明上河圖"是最耳熟能詳的, 有個長型觸控螢幕的"清明上河圖"放在1樓中間, 圖中有三個點可以觸發牆上的投影片, 播放圖中人物從碼頭開船, 在街道行走和開啟城門進城的動畫, 畫中人物的生活起居就在眼前活了起來! 這樣的互動效果很能加深訪客的印象, 也是多媒體應用到博物館很好的方式.

"舊"要好好保存, 但是"舊"要用何種方式和"新"接軌, 讓更多新世代的人重新認識"舊"是值得思考的. 很贊同故宮這1, 2年的改變, “Old is New 時尚故宮”相信是可以走向另外一條不同路的新希望. 故宮網站有故宮出版與圖像授權等授權規章出來, 要用祭紅霽青茶壺喝茶的機會很高了, 當然還有那隻"墨玉貓"公仔.

B1紀念品區已經有不少複製品, 但很多是重新設計或材質不佳, 重新設計沒有不好, 但是把"翠玉白菜"設計成像卡通造型的"菜頭"我就沒有很喜歡, 也許我不夠年輕, 無法將卡通菜頭和翠玉白菜聯想在一起. 要列為可以收藏有文化品味的藝術品, 質地做工一定要講究, 和買一堆粗製濫造的紀念品的意義不同. 我在紀念品區逛了好一會兒, 買一個沒有手把的茶杯(它的圖樣類似古時候的衣飾紋路, 也有做成手提袋, 錢包化妝包, 手機袋等物品)和仿"嬰戲圖"的立體文鎮.

有一本" 新美學商機", 范子凡著, 談的是藝術授權(可複製藝術作品的權利). 書中提到在國外不論是卡通造型授權, 時尚授權, 運動授權, 娛樂授權, 商標授權還是藝術授權, 都已經行之有年, 所衍生的產品附加價值很可觀. 例如一組白色沒有圖樣的咖啡杯賣399元, 另一組印上名畫圖樣的咖啡杯賣799元, 這就是附加價值的產生, 賣的是美學和藝術生活的市場. 藝術授權是一種文化產業和文化輸出, 會著重於商業價值而非曲高和寡的藝術性. 書中還提到: 目前的高科技產業硬體發展已經飽和趨緩, 紛紛訴求提供更精緻豐富的軟體內容, 如手機要加值服務, 電腦要下載內容, 電視要頻道供應. 所以, 以內容和服務為其他產業提供附加價值的"內容創意產業"的需求會逐漸增加.

"當功能發展到極至時, 就是美學取勝"這說法可以在PC, NB或手機產品得到印證, 各家廠牌的硬體技術都達到差不多的高點時還能比什麼? 市面上的PC, NB要應付一般的上網, 遊戲和文書處理需求早已綽綽有餘, 能比的當然是設計, Apple就是最好的例子. 本土的華碩(ASUS)近年表現也不錯, 不斷追求不同造型和材質的突破(皮革, 法拉力跑車NB), 也不斷得獎. 對照曾風光一時的宏碁(Acer)是不是就能感覺出差異? 去年我也買一台ASUS W7 白色的NB, 評比幾款價格功能差不多的廠牌和機型後, 最後決定的關鍵因素是: 我喜歡W7的設計.

我的職業病又犯了! 又要轉回網頁設計的角度看. 網頁設計的工作也應該以創造附加價值看待, 除了為網站設計易讀易懂, 有清楚導覽機制的網頁外, 也要能合宜表現出網站的意涵與外觀, 增加客戶滿意度, 減少企畫網站和程式coding的時間等, 都是提升網頁設計附加價值的方式, 而不是用按件計酬(時)的方法計算(雖然這是目前普遍的情況). 網頁設計師價值的建立是在創造附加價值, 不在加工. 所以, 要以"設計師"自許的話, 請以此自勉吧!

7/29/2007

新的Web 標準- Html5

27日參加一場由資策會創新應用服務研究所舉辦的"W3C網頁標準-推廣與應用研討會", 會中提及W3C新的推薦web標準已經從Xhtml1.0改成Html5了. (Html復活了! 太久沒上W3C網站, 連標準也改了.)

之前因為Html的語法不夠嚴謹, 希望以Xhtml1.0做為銜接Xml的橋樑, 況且Xhtml2.0還在草案階段中. 顯然使用Xhtml也有它的問題存在: 如實際上並未真正扮演橋樑的角色, 與Html無太大差異; 另外就是瀏覽器開發者的支援問題- Apple，Opera及Mozilla已經表態支持以Html5做為新的推薦web標準(Proposal to Adopt HTML5).

從W3C最近公佈的"Html5與Html4的差異性" (HTML 5 differences from HTML 4)文件可以看見Html5新增很多element(元素)和attribute(屬性), 尤其是關於表單的部份(稱Web Form2.0). 而header, footer, nav, article, section, vedio等慣用的css名稱也將直接定義在Html的element裡面. 再來, 喜歡用frame做系統平台或網頁的要注意了: frame, frameset, noframes 因為違反使用性的原因將不存在於Html5中, 但是建議改由css呈現frame的類似外觀.

Html5預計2010年要完成制定, 詳細時程如下 (Schedule of Deliverables) :

2007 Mar: convene the HTML Working Group
2007 Aug: First Working Draft
2008 Q2: Last Call Working Draft
2008 Q3: Candidate Recommendation
2010 Q2 Proposed Recommendation
2010 Q3 Recommendation

但是要落實到各家瀏覽器廠商都支援的階段恐怕還有一段路要走, 所以還可以觀察一陣子!

7/04/2007

網頁設計思考之一

一直在思考一個問題: 怎樣的設計算好的設計? 是否有規則可循? 應該注意什麼?

一個很漂亮的網頁模板應用到不同案子往往呈現出不同的效果. 例如: 韓國網頁設計模版的顏色和圖形配置都很漂亮,但是要套用到我們的專案時總有不對勁的地方, 經常從上百個模版來來回回找不到一個合適的.可能我龜毛, 但這不是主要的原因. 原因是網站的主題不同, 區塊數量不同, 擺放位置也不同, 如果要置換掉圖片, 畫面整體色調和風格就差很多, 如果要新增或刪除某些資料區塊, 原來很平衡的版面配置和結構就破壞了, 所以最後還是選擇自己重新設計.

當然認為省時省力用的很高興的人也大有人在, 可能神經敏感度比較弱吧! 顏色亮一點暗一點, 位置左一點右一點, 字大一點小一點, 都是影響畫面的因素之一. 如果分辨不出這些細微差異也不用期待有什麼好作品產生. 從事設計的人得把"眼光"和"敏銳度"調高一點才有可能做出好作品, 才有進步的空間.

我是不喜歡讓規則綁死的人, 但是規則沒有原則應該有的, 可能一直依照某些原則做. 只是長年累月下來已經內化成為直覺, 如果要再外化成語言文字形容出來就需要仔細回想和整理. 這就好比回答穿衣服是先穿左手還是右手, 先穿左腳還是右腳一樣, 需要模擬一下才有答案是吧!

按照設計流程歸納出應該注意的幾點:

1. 清楚網站需求和規劃

好的設計除了自我的主觀認知外, 應該要符合客戶, 使用者和企劃的期待, 在操作介面, 使用功能, 資訊結構和視覺感受上都能滿足需求. 所以漂亮不是好的設計唯一追求的目標. 在開始設計時要清楚整個專案的需求和規劃的方向才好做整體思考, 並預留近期內(2~3年)可能新增資料的擴充性. 漏了其中一二項要再找空隙補進來都很容易破壞畫面, 需要重新調整版面. 時程掌控和團隊成員也很重要, 總是有機會遇到老在狀況外或傳遞錯誤訊息的天兵, 沒法殺了他就只能自立自強一點另外找人問清楚. 因為事情最後沒做好要再去責怪誰都無濟於事.

多數設計人員會本能的以視覺為優先考量, 一旦要求顧慮其他功能需求總會有顧此失彼的情況. 例如無障礙化或web標準化的要求下, 很多動態呈現效果必須放棄, 限制了畫面的可變化性. 當功能為必需時, 設計之前一定要先將這些因素考慮進來.

2. 區分網站型態和主題

以資訊為主的網站本身資料多, 設計時以能夠協助讀者區隔和辨識資料並流暢的引導閱讀內容為主要目的. 很忌諱加太多背景圖和琳琅滿目的icon, 造成畫面擁擠, 找不到喘息的空間. 企業網站的話, 視覺感受可以強一些, 表現希望傳達的印象和公司理念, 重點資訊應該擺在主推的產品介紹, 其他的是其次, 不需佔用太大面積. 而資料少的網站就要仰賴技巧性的留白, 色塊或者裝飾圖片撐版面, 避免看起來空洞. 但是資料太多也不是好事, George Miller有項心理學法則(1956年): "魔術數字7加減2" 指出人一次能處理或記憶的資訊數量大概只有7項, 多了也記不住, 反而模糊了焦點. 網站首頁設計也一樣, 只需把希望人家知道的重點依序強調出來就可以.

主題清楚的網站很好選擇插圖和背景, 例如介紹農產品的知識網站, 是鳳梨的就擺上鳳梨照片, 是水蜜桃就擺水蜜桃照片, 絲毫不含糊. 但是像範圍涵蓋台灣風土民情, 資訊科技, 生活體育, 衛生保健等主題廣泛的網站就很難只選擇其中一二項圖片作表現. 如果只放科技圖片會被誤以為是科普網站, 只放風景照片也容易被誤認為是旅遊景點介紹, 侷限了這個網站的主題. 如果要用合成方式縮小照片同時放很多張的, 又容易看不清楚照片內容, 造成圖片雜亂混合在一起不好看的情況. 所以經常有人為了要選哪一張主題圖片和客戶糾纏不清.

比較好的解決方式有三種: 一個是採用多張照片輪播(Flash或程式控制), 可一次清楚呈現多個主題; 一個是允許客戶自己依照當時的焦點內容更換主題圖片, 但是這一點必須視客戶的製圖能力而定, 避免讓他"上窮碧落下黃泉去找一張圖"的困擾(一位客戶就是這樣形容他的痛楚); 另一個是乾脆不要放主題圖片, 將網站的Logo和Title名稱修好看一點, 取代主題圖片成為視覺焦點. 很多所謂web2.0 的網站是這麼做的, 可以減少像這樣的爭議問題.

3. 構思網站版面和層級

了解需求和主題型態之後就依據資料結構做版面配置和風格設計. 先從重要性分配資料區塊的面積和位置, 再設定合適的風格繪製主題icon圖像. 基本的要求是文字排列要工整(注意中英文版文字表現的差異), 段落與邊界的距離留白適當, 色彩的選用搭配協調等. 以資訊網站來說, 做到這幾點就成功一半了. 不需要堅持一定得放多少圖片才對得起客戶. 和歐美的網站比較起來, 台灣的網站設計花俏繁複了點.

網頁一致性原則也很重要, 內容文字的連結應該統一一種顏色表示, 使用者才容易辨認出這是可點選的連結. 除了選單按鈕之外, 應該避免上面區塊的連結一種顏色, 下面區塊連結又一種顏色, 到另一個頁面又有各自不同的顏色. 標題也是, 相同層級的標題應該用相同的圖示或大小粗細相同的字級表示. 這觀念和書籍排版一樣, 每本書都有目錄, 對照目錄的層級在內頁看到的大標小標都有一致的樣式呈現, 才能辨認目前這段文字在整本書中屬於哪個層級. 但是很多網站設計沒有這種觀念, 每個頁面使用各自不同的標題設計.

4. 與客戶溝通

客戶的意見需要尊重, 但是發現有疑慮時應該提出來討論, 另找一個合適的解決方法. 設計師的專業就表現在可以預先知道可行和不可行的情況. 一味遵照客戶意見做容易有才改了一個問題又衍生另一個問題的情況, 拉長修改的時間. 但是要設計師像拼圖一樣拼湊出客戶腦袋中的想法是頗高難度的. 有一種客戶無法清楚描述想像中的畫面, 但是又很堅持一定要做出他要的樣子, 所以就藉用你的手不停的修改. 遇上這種客戶是設計師最無奈的事!

也有一種很害怕被貼標籤的人, 明明不喜歡藍色想改成綠色, 又不方便明說, 於是"指鹿為馬"改這改那的, 看你什麼時候可以猜到他要的顏色. 如果不識相的直接問喜歡什麼顏色? 只會得到"依照施政方針"這類模糊的答案. 有時候客戶說出來的不見得是他真正的想法, 設計師可能要像"決斷2秒間"這本書提到的: 做準確的"薄片擷取", 找出真正關鍵的點才能對症下藥. 所以做設計不是太難, 要面對這些難搞的客戶比較難.

上述整理的多半是實務上容易遇見需要注意的地方, 不著重在畫面的細節, 因為設計的基本功夫參考網頁設計或平面設計這類書籍就可以, 像之前介紹的幾本書都不錯, 不需要談相同的東西, 我也不會寫的比這些書好.

正常來說, 每一段時期應該有不同的想法出來, 表示有進步. 用"看山是山; 看山不是山"來比喻設計應該是很貼切的. 隨著認知了解程度的不同, 看法也會不同. 希望以後我還有另外不同的想法出來, 寫成思考之二, 之三... .

5/06/2007

談網頁"設計"標準

多了"設計"二個字就不是"Web標準", 這裡要談的是Jakob所說的網頁設計標準, 非W3C的Web標準.

Jakob也談標準, 但是他談的是網頁元素的配置, 屬於視覺呈現和使用者行為分析的部份. 以下是重點翻譯, 詳細內容請參看原文 The Need for Web Design Standards .

Jacob認為所有網際網路中的網站會形成一個整體, 使用者瀏覽眾多網站之後會產生一個整體印象, 之後再使用時就會有預期心理, 開始猜測現在正在瀏覽的頁面和先前造訪過的網站應該有相同的呈現方式. 所以, 脫離使用者預期的設計就是很難使用的設計了.

Jakob先定義三種標準化設計的層級, 再用兩種統計分析來比較網頁介面設計標準, 一個是他自己的研究—55個企業網站首頁上的24個元素, 一個是華盛頓大學碩士研究—75個商務網站上的33個元素. 以下列出二個研究統計的平均結果:

一. 標準用法的元素: 有80%或者更多的網站使用相同的表現方式. 當使用者瀏覽未曾造訪的網站時會篤定的預期某些元素是以特定方式呈現. 這些標準元素是
1. logo在頁面左上方
2. 首頁中有網站搜尋輸入區
3. 沒有跳出視窗的設計
4. 如果有路徑顯示, 以水平方向列示 (例如首頁 > 路徑1 > 路徑2)

二. 習慣用法的元素: 有50-79%或者更多的網站使用相同的表現方式. 當使用者瀏覽一個未曾造訪的網站時會習慣性的預期某些元素的呈現方式. 這些習慣性元素是
1. 使用"sitemap"名稱表示網站導覽
2. 造訪過的連結要用不同顏色區別
3. 將購物車放到網頁右上方
4. 將類似的連結群組起來放到左邊欄位

三. 不特定用法的元素: 這些元素並沒有單一的呈現方式, 即使是比較受歡迎的也只有49%的網站使用, 所以當使用者瀏覽一個未曾造訪的網站時是無法對這些元素做預期的. 這些不特定元素呈現的方式有很多種, 包括
1. 導覽列的呈現有放置左手邊的, 橫跨上方的, 或像Yahoo一樣在中間等等
2. 網站搜尋的呈現有右上方的, 左上方的, 中間的和其他地方的
3. 網站登入的程序
4. Help的位置

以第一眼來說, 大約只有1/4的設計元素是不特定的, 對大部份的網頁設計決策而言, 標準或習慣性的建立意味著人們可以沿襲這些標準和習慣知道如何使用這個網站. 不確定的設計元素是使用者瀏覽網站時, 要熟悉應用這個網站比較大的挑戰, 因為每一頁都需要單獨再理解. 例如不確定導覽列會怎麼顯示, 網站搜尋不確定, 登入不確定, 甚至Help也不確定-這個最後可以求助的地方的使用性也很低.

為何標準的設計對使用者有幫助? 標準可確保使用者:

1. 可預期到頁面上會有什麼元素
2. 知道這些元素在介面上看起來會是怎樣
3. 知道在網站或頁面上, 那裡可以找到這些元素
4. 知道如何操作這些元素及達到目的
5. 不必思考某些未知元素的用義
6. 不會在快速瀏覽元素時錯過一些重要的東西
7. 某些事進行的不如預期時也不會得到令人討厭的驚奇

這些好處可以增加user應用網站的熟悉度, 增加達成目的的能力, 和提昇使用經驗的滿意度. 但為何應該和網頁設計標準趨於一致? 一個簡單的理由:

Jakob's Law of the Internet User Experience: users spend most of their time on other websites.
Jakob的"網際網路使用者經驗定律": 使用者花大部份的時間在別人的網站上.
(反喻使用者只用很少比例的時間在你的網站)

當瀏覽其他網站時, 人們習慣了普遍流行的習慣性設計, 因此當使用者造訪你的網站時, 他們也會假設你的站應該和別人的站一樣以相同方式操作.

Jakob 2004年的網站研究, 使用者在平均1分49秒後離開一個網站, 這也包括了不能完成他們需求的網站. 要在這麼短的時間內說服使用者你的站對他們具有價值的話, 就不應該讓他們浪費一丁點時間在你不好使用的介面上面掙扎.

但比起公眾網站, Intranet 設計標準的狀況會更好, 主要是Intranet擁有唯一的負責單位, 這個負責Intranet的團隊能夠定義標準並將之推廣到整個企業, 確保設計的一致性.

不管是Intranet或是Internet, 有件事情很清楚: 和習慣性設計越趨一致並提供使用者想要的, 網站就越成功. 區隔內容, 服務和產品當然重要, 但是在這兩者的介面上, 最好的策略是去遵循其他人的用法.

--------------------------------------------------------------------------------------------

以上是Jakob對網頁設計標準的定義和做法, 我們的”政府無障礙網頁設計”也有極為類似的網頁元素配置建議, 對象主要是政府機關或學校教育單位, 相關規定可參考無障礙網路空間服務網的規範和文件.

Jakob的論點是以使用性為出發點, 希望網站的設計符合使用者習慣, 要易學易用. 但是放眼網際網路的眾多網站, 製作炫麗特效的網站比比皆是, 如果這種網站真的這麼不堪使用, 有怎會有那麼多諸如此類的設計存在?

以製作經驗來看, 可能有兩種原因: 第ㄧ種是網站管理者的個人喜好, 他喜歡這種動態效果的設計, 認為只要加上炫麗的效果就能吸引更多人來看他們的網站. 我也經常收到友人轉寄的Flash特效網頁, 真的羨慕有人可以用Actionscript把Flash做的這麼好, 但也純粹是為了特效去看一兩次, 而這到底是什麼網站, 寫些什麼內容卻沒有太多工夫研究.

另一種原因是這網站屬於遊戲娛樂型的網站, 它的使用者本來就是上來打發時間的, 有足夠的精神和耐心來看這裡會有什麼新鮮事發生. 所以這種網站如果做的不夠炫, 還真不足以吸引這些人的目光.

所以, 該製作怎樣的網站就要歸結到網站製作的目的. 為什麼建立這個網站? 打算提供什麼服務(提供資訊內容或遊戲娛樂)? 目標使用者是誰(來找資料的或來打發時間的)?

以資訊服務為主的網站的使用者可能是上班族, 學生或是研究人員, 他們的時間有限, 網站的設計以能夠幫助他們迅速準確的找到資料為目的, 就請不要浪費他們的時間在你的網站重複看一遍又一遍的動畫, 非得要放不可的話請提供Skip功能.

娛樂型網站就無所謂了, 請儘量的炫吧! 不管是驚奇的還是神秘的, 它的使用者有的是時間去發掘和探險. 而Jakob的論點在這裡恐怕難以派上用場.

所以, 請考慮清楚網站建置目的, 不要浪費金錢和時間做不該做的, 放不該放的東西在上面.

4/22/2007

W3C Xhtml 驗證問題經驗分享

近日將公司執行的一個專案網頁送W3C的Xhtml檢測工具做驗證, 並將顯示的錯誤一一修正, 直到全部通過檢測為止. 修改的錯誤包括:

1. <form>標籤應該有action值, 例如: <form action=”searchresult.htm”>.
2. 如果在表單使用<legend>, 外圍就應該有相對應的<fieldset>包覆.
3. <option selected>下拉選項</option>應該改成<option selected=”selected”>下拉選項</option>
4. <form>要在<table>外面, 不能包在<table>裡面.
5. <span> 裡面不應該包覆<div>, <span>通常只用來改變字型/顏色/大小/靠左靠右等細微外觀, 不能像<div>一樣當成區塊使用.
6. 多媒體檔案(如swf, mov, wmv) 的code無法通過驗證.

1~4 修改的多半是tag標籤順序以及一定要有屬性值設定的細節問題, 在Dreamweaver 8版本按照次序由程式自動產生的文件多半是正確的, 只要注意順序即可, 但如果像我ㄧ樣習慣手動加tag就容易產生這類的錯誤.

5 的錯誤一開始誤認為是不應該用<div>包覆連結文字, 應該加上如<p>或<li>等tag, 後來發現只要將<div>拉出<span>外面就可以了. 用<div>包覆文字雖然無法辨識語義(不知道這段文字屬於標題<h>, 段落<p>, 還是<li>條列項目), 卻是Xhtml驗證工具允許的.

至於6 的錯誤就很麻煩了, Dreamweaver產生的多媒體物件(如swf, mov, wmv) 的code通通無法通過驗證. 在W3C的標準定義中, 影音檔或Flash檔等物件應該都用<object>這個tag, 但是Dreamweaver用的卻是不在標準中的<embed>; 而Flash的swf檔雖然是<object>, 但是裡面的classid值和<embed>仍然無法通過驗證, 於是在Google找尋解答.

A List Apart有ㄧ篇 Bye Bye Embed 介紹如何通過W3C驗證的解法, 分別詳列如下: (原文是用絕對路徑寫, 這裏改用相對路徑, <p>的說明文字則是政府無障礙網頁規範的要求 )

MediaPlayer的wmv檔


<object type="video/x-ms-wmv" data="images/test.wmv" width="172" height="160">
<param name="src" value="images/test.wmv" />
<param name="autostart" value="false" />
<param name="controller" value="true" />
<param name="qtsrcdontusebrowser" value="true" />
<param name="enablejavascript" value="true" />
<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

FlashPlayer的swf檔


<object type="application/x-shockwave-flash" data="images/title.swf" width="172" height="160" id="VideoPlayback">
<param name="movie" value="images/title.swf? docId=8755581808731033658" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

QuickTime的mov檔


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="172" height="160">
<param name="src" value="images/sample.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />

<object type="video/quicktime" data="images/sample.mov" width="172" height="160">
<param name="autoplay" value="true" />
<param name="controller" value="true" />
</object>

<p>請輸入多媒體內容說明文字, 以符合無障礙第一優先等級規範</p>
</object>

QuickTime的mov檔寫法比較特殊, 上方有classid的寫法IE不支援, 所以下方用IE特有的”條件式註解( [if !IE] )” 再寫ㄧ組給IE瀏覽器專用.

* 以上的寬度高度最好以原尺寸顯示, 否則在Firefox會有無法顯示或者裁切的情況發生.

原以為仰賴Dreamweaver通過W3C驗證不會太難, 但還是有死角存在, 這過錯不全是Deamweaver, 有很大原因是IE或其他瀏覽器的支援程度仍然不足的關係.

在The Web Standards Project 看過一篇 Dreamweaver Task Force 文章, 在2001年 Web Standards Project這組織就成立" The WaSP Dreamweaver Task Force"小組, 任務是協助Dreamweaver朝Web Standard目標改善他們的應用軟體, 讓程式產生的文件符合標準需求, 也讓大部分的預設項目改用符合標準和使用性 (Accessibility) 的選項. 可以感覺出MX版本開始朝這個方向走, 但還不夠完整; Dreamweaver 8的版本看起來除了影音檔, 都支援了; 不知道最近剛出來的CS3版是否解決這個問題. (ps. 來自Amos測試結果是CS3版和8的版本相同, 並未解決這個驗證問題 )

除了Adobe, 這個組織也有ㄧ個Microsoft Task Force小組在Micorsoft要完成相同的任務, 所以The Web Standards Project是很積極在推動Web標準, 不是嘴上說說而已. 這組織最近還很無情的批評Adobe’s Spry Framework for AJAX (還在Beta版階段, 這裡曾經介紹過 Adobe Max 2006 課程範例 -- 如何以Spry與Dreamweaver開發AJAX )是違反Web標準的應用程式, 呼籲大家要勇於指正Adobe的錯誤.

Adobe和Microsoft這兩家公司會這樣”備受重視”大概是怕他們有可能成為製造網頁”亂象”的根源, 必須儘早介入導正才行!

4/09/2007

談Web標準 (Web Standard)

Web標準是W3C和一些團體組織共同制定的製作網頁的技術, 目的是讓網頁內容在不同的瀏覽器和不同的平台都能閱讀, 這樣的目的就仰賴建立”結構化的文件”和”能自文件中抽離的網頁呈現”方式.

早期的瀏覽器多半是支援標準不一致的瀏覽器, 造成網頁設計或開發人員必需爲各家瀏覽器製作不同版本的網頁, 很耗費成本和資源. 但是從2000年開始, 各家瀏覽器開始向web標準靠攏, 支援所謂標準的文件結構和樣式呈現(使用Html /Xhtml與CSS建構網頁). 現在大部份瀏覽器已經支援web標準, 但仍有很多設計和開發人員繼續使用過去的方法做出不合語法, 難以使用的網頁, 例如結構上沒有意義的標記、肥大的影像地圖(image map)、過度使用巢狀表格等都是.

這裡要介紹一下W3C. W3C成立於1994年, 由美國的麻省理工學院, 歐洲的INRIA, 和日本的 Keio大學三個公共調查協會組成. 成員包括Microsoft, AOL(Netscape), Apple, Adobe, Sun, 其他軟體硬體公司, 研究所和電信公司. 這個由協會成員和專家組成的工作小組制定的規範會提交給W3C的公司成員並一同參與製作支援標準的網路應用軟體.

使用web標準建立的網頁有哪些好處:

1. 結構化的網頁能讓別人更容易理解所編寫的文件, 更容易新增或修改, 讓網頁的開發維護更簡易.
2. 使用web標準的網頁就表示能與未來的瀏覽器相容, 不需擔心將來可能不相容的問題.
3. 去除不合語法和難用的網頁結構之後將讓網頁下載讀取速度更快, 可節省頻寬; 網頁的使用性將提升, 也會有更高的造訪率.
4. 語義化/結構化的標記會提升網頁在搜索引擎中的排名.
5. 語義化/結構化的網頁可以適用在列印或其他設備(像PDA, 手機, 數位電視, 投影機等), 而這些只是透過連接不同的CSS檔案就可以完成, 不需要另外製作不同的版本.

目前被廣泛使用的網頁標準技術為Html, Xhtml和CSS. 而Html 4.01是最後final版本,以後不會再有新版本的發展. 由於Html語言格式不嚴謹以及爲了走向Xml的過渡時期, 建議的標準網頁語言為Xhtml 1.0 Transitional.

Xhtml技術的實行包括下列幾項:

1. 聲明正確的文件類型(Doctype)
2. 聲明文件類型定義(DTD, Transitional過渡的, Strict嚴格的, Frameset框架的)
3. 用meta 聲明使用的編碼, 例如utf-8或big5
4. 所有屬性值均爲英文小寫字
5. 所有屬性值都要加引號, 屬性值之間以空格分開
6. 關閉所有的標籤, 例如 p, li
7. 空標籤(例如 br, hr, img) 要在標籤尾部使用”/”關閉(<br />, <hr />, <img />)

如果用的是Dreamweaver 8的版本, 開啟Html新檔的話, 上述所說的項目都會由程式正確產生出來(Dreamweaver 8 已經支援web標準), DTD預設為Transitional. 如果用的是8以下版本(如MX), 設計人員就要自己注意. 也或者使用轉換功能選項(Convert)將Html轉換成Xhtml語言格式.

以上是關於Xhtml的使用技術, 至於建立結構化標記的文件請參考先前已經談過的”支援各種平台的網站製作方式”一文, 這裡想再加強說明的是關於CSS的應用. 大家熟知的”避免使用巢狀表格排版”有很多網站提供應用範例, 利用Google查詢"CSS Layout"可以找到很多, 就不多做說明. 要說的是“能自文件中抽離的網頁呈現”方式.

CSS (Cascading Style Sheets)是網頁外觀呈現的樣式. 目前的瀏覽器多半支援CSS2.1所定義的樣式. 將來的CSS3在W3C網站也已經有草案公佈, 但尚未定案, 目前的瀏覽器也不支援. “能自文件中抽離的網頁呈現”表示CSS的使用必須是採”外部連結”的方式加入網頁結構中, 例如:

在 < head> 中加上
< link rel="stylesheet" type="text/css" href="styles.css" />

所以, 將CSS樣式寫在標籤中或< head>中的方式應該盡量避免，因為這種方式會把結構和外觀呈現混在一起, 無法分開. 這二種方式舉例如下:

寫在標籤中
< h5 style="font-weight:normal;" > Test< /h5>

寫在< head>中
< style type="text/css">
h5 { font-weight: normal;}
< /style>

運用CSS時很容易犯的錯誤就是: 使用多餘的div和class(或id), 這雖然不違反標準, 卻悖離希望維持網頁”簡潔”的原則. 例如:

< div id="content">
< div class="headline>
< p class="text"> CSS測試網頁< /p>
< /div>
< /div>

可以簡化成

< div id="content">
< div>
< p> CSS測試網頁< /p>
< /div>
< /div>

也或者第二個div是不必要的, 可以去除.

CSS可以寫成

#content {……}
#content div {……}
#content p {……}

當然我們也可以反過來看, 如果是用web標準技術建立的網頁, 表示該網頁包括以下的特性:

1. 用符合標準的Xhtml語言所建構

2. 用可抽離的CSS樣式來佈局(非表格)及呈現外觀

3. 使用結構化的標記建立網頁文件

4. 能在任何瀏覽器或平台正常顯示

Web標準的技術除了Xhtml和CSS, 在Web Standard Project還介紹了DOM (Document Object Model) and ECMAScript (standard Javascript), 這兩部份屬於網頁行為, 非我可以理解的範圍, 有興趣的人可連結到該網站閱讀.

最後是驗證的部份. 使用web標準技術建構網頁, 對沒有經驗的人來說, 很難確認寫的是對或錯, 所以有html和CSS驗證工具可以參考使用, 通過驗證的話還可以在你的網頁中掛上該項驗證的標章. 關於網頁驗證在”IE Developer Toolbar”有談到一部份, 以後會再詳細介紹各項驗證工具.

後記: 爲了寫這篇介紹, 閱讀一些相關文章, 再用比較簡要的方式說明, 參考的網址如下:

4/06/2007

IE Developer Toolbar 介紹

Beta 3 免費下載網址:
http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

微軟有個好用的開發工具” Internet Explorer Developer Toolbar”, 目前是Beta 3版提供免費下載(565KB). 這Toolbar下載安裝之後, 會掛在IE瀏覽器工具列中(如下圖所示). 系統需求為Windows 2000; Windows Server 2003; Windows Vista; Windows XP, 和IE6以上版本. 安裝過舊版本的要先移除舊版再安裝新版.

這個Developer Toolbar的主要功能是幫助開發人員快速檢視Html網頁結構; 顯示表格, 圖檔, Tag名稱; 顯示Div / Id / Class / 快速鍵 / Tab鍵設定名稱及位置; 顯示有效無效連結的路徑; 尋找特定元素; 關閉Script, Css和圖檔的功能選項; 設定800/1024/1280的螢幕寬度檢視(大螢幕才有作用); 還有提供該頁面的Html, Css和國外版無障礙檢測連結服務.

以往當設計師拿別人製作的網頁修改時, 因為習慣不同, 網頁的寫法和設定也會不同, 通常會藉由Dreamweaver檢視Html結構及Css設定的Div或Cass/Id名稱, 但功能仍然有限. 對程式人員來說, 如果設計師的Css寫的很複雜, 註解又標示不清楚時, 要辨識就更困難了. 這工具就提供一個方便之門, 不需Dreamweaver就能直接在IE上面檢視所有的網頁設定.

以下是幾個應用的範例說明:

這是選擇特定元素, 勾選這個項目之後, 在網頁上點選的任何元素的結構, 連結路徑和Css屬性質都能顯示出來.

這是選擇顯示網頁上所有Class和Id設定名稱和位置.

這是連到W3C提供的Xtml驗證服務, 這項驗證會根據網頁宣告的種類 (如Html 4.01或Xhtml 1.0等) 驗證網頁結構的寫法是否符合標準. 驗證頁面上方會顯示驗證是否有誤, 檔名, 編碼和宣告種類, 如果有誤, 會一一條列在網頁下方. 這個範例表示有4個錯誤, 分別是3個連結項目的Tag包覆錯誤 (Span裡面不能包覆Div); 另一個是Form應該要有Action設定.

這是連到W3C提供的Css驗證服務, 是驗證Css寫法是否正確, 數值設定是否有效, 字體顏色和背景色設定反差是否夠大, 容易辨識等. 這項服務如果是中文網頁, 會有簡體中文顯示驗證結果.

這是外國版的無障礙檢測. WAI (Web Accessibility Initiative)是W3C的檢測標準, 分3級, 台灣版的政府無障礙檢測應該是源自於這裡; Section 508是美國聯邦政府的檢測標準, 不管選WAI或Section 508, 都會連到同一個網頁作檢測, 然後在該網頁選擇想要檢測的項目.

但是這些檢測項目是有必要的嗎? 是否必要是政策問題 (政府的政策或公司的政策), 不過, 身為網頁設計人員是應該了解有這些檢測項目, 並且能試著使用看看, 或者試著開始從Web標準 (Web Standard) 的方向設計網頁. Web標準是W3C一直在推動的, 目的是希望透過標準制定, 讓所有除了電腦的平台都能正常瀏覽網頁, 例如: 數位電視, PDA, 手機等. 坊間有Css書籍會標示Web標準設計, 其實Web標準不單是Css, 而是標準的網頁結構(如Xhtml)加上可以從結構中抽離的Css設定. 關於Web標準會在往後的文章再詳細介紹. 今天就先將這個好用的工具介紹給大家!

3/31/2007

違反網頁設計原則的前十大要項

http://www.useit.com/alertbox/20031110.html

Jakob在2003年11月useit.com發表這篇文章, 雖然經過3年多, 仍然認為是很值得推薦給網站設計人員的文章, 以下只有選擇性的做重點翻譯, 如果方便的話, 還是希望到他的網站看更詳細的說明.

Jakob針對一些已知的使用性原則, 提出設計人員最常違反的前十項. (從文意來看, Jakob認為大部份的網站使用性設計專家都應該讀過他的書, 但是錯誤還是照樣出現, 所以他有必要一一指出來改善. )

1. 強調你的網站為使用者提供什麼價值? 你的服務和主要競爭者有什麼區別?

這是首頁設計最重要但也是最少人遵循的. 網站很糟糕的一點是沒有明確的說出要提供給使用者什麼, 導致顧客對網站只留下一點點印象而已. 而這些說明也應該要寫在搜尋引擎可以找到的地方, 例如title和metadata.

2. 使用彈性寬度讓使用者可以自行調整首頁大小

不需要為那一種固定寬度爭辯, 不能假設每個人的螢幕寬度都是800像素: 那對某些使用者來說太大, 對其他的使用者來說又太小. (這一點可以參看”最大寬度與最小寬度網頁設定”一文, 最大寬度設定仍然保留某種程度的彈性寬度: 1024寬度以下為彈性寬度, 但不超出1024寬度)

3. 用顏色區分已點選及未點選的連結

知道”你到過哪裡”是所有導覽設計中, 三個基本要求的一個. (另外二個是”我現在在哪裡?”和”我能夠去哪裡?”) 請讓已點選及未點選的連結用不同顏色顯示, 違反這一條原則對年長的使用者特別不利.

4. 用圖像展現真實內容, 而不是只為了裝飾首頁

不相關的圖像會將使用者的注意力從重要內容中分散出去. 使用者不會因為首頁有個正在微笑的女士就認為你的產品可以讓他們感到愉快. 展示真正的產品照片會比較好.

5. 用一句話明確簡述這個網站或公司是做什麼的

我們最近研究人們如何使用網站上”關於我們” 的資訊, 但是大部份的人還是無法從中發掘這個網站成立的目的是什麼. 建議將slogan(口號)用圖形方式顯示在logo旁邊 – 這是一個可能被忽略的地方. 然後在人們容易看見的內容區域再加一段文字格式的說明.

6. 將最新議題放在容易被接觸的首頁

通常使用者會記住在首頁看過的有趣的內容, 但是卻永遠不會記得他們在次頁看過的. 建議首頁的最新議題應該有ㄧ個歷史檔案連結, 方便使用者找尋曾經讀過的文章.

7. 在視窗標題加上簡短的網站說明

這一點在搜尋引擎的能見度上很重要, 對網路行銷來說, 何不善用這項不花什麼錢的優勢?

8. 不需用標題標示出搜尋區塊; 用文字輸入區右邊的”搜尋”按鈕代替

如果已經有個叫”搜尋”的按鈕在右邊的話, 就沒理由再去標示這個搜尋區塊. 互動設計”少即是多”的原則告訴我們, 多餘的元素會分散使用者對重點的注意力和降低對介面的理解能力. 換句話說, 需要思考的越少, 人們就越容易了解那是什麼. (無障礙網頁設計要求應該標示label, 這是為有障礙人士考慮的使用性)

9. 在股票行情中, 標示出變動百分比, 而不只是標示利得或損失

這項原則只適用於提供股票行情或投資訊息網站. 一般是幫助使用者了解相關的重大改變及其重要性. (類似的原則適用於其他統計資料的變化) 股價增加$0.75對起始價格是$8(巨幅攀升9%)和起始價格是$60(緩增1%)的意義不同.

10. 首頁裡面不要再有一個連到首頁的連結

這種連結導致3 種問題:
1. 如果按了它並連到目前網頁是很浪費使用者的時間.
2. 這樣的連結會讓使用者質疑他們現在是在那個位置.
3. 如果使用者跟隨著這沒作用的連結, 他們會對新的位址感到混淆, 特別是這個頁面只是捲回頁面上方.

首頁有個回首頁的連結是起因於導覽列中包含了”回首頁”的選項. 這很好, 但是應該取消這個目前所在頁面的連結狀態並且用一種方式強調出目前所在的位置.
(對用程式產生的網站來說, 會希望首頁和內頁的GUI設計都採用同一個版式, 如果要達到這點要求就要讓首頁和其他內頁的版式分開, 也就是讓首頁的”回首頁”選項不顯示或者取消連結狀態, 程式工程師一般不太喜歡這種多工的建議)

Jakob 有一本書”Homepage Usability: 50 Websites Deconstructed”, 書中詳列113條首頁使用性設計的指導原則, 2001年出版, 台灣曾出過中文版, 現在似乎找不到了, 但是博客來網站有英文版可以購買.

這本書在英國唸書時曾在學校圖書館借來看, 是寫網頁設計論文的學生必參考的書, 書裡面有50個企業或商務網站的範例解析(這部份so so), 那113條指導原則就條列在書本最前面幾頁, 還有ㄧ部分是網頁UI配置調查分析, 這兩部分是最有可看性的, 即使已經出版很多年, 那些原則還是適用在目前的網站, 有興趣的人可以問問上奇出版社還有沒有庫存?

2/28/2007

瀏覽器的顯示模式

DDOCTYPE 有很多種, 除了識別html / xhtml版本, 也告訴瀏覽器該以哪一種模式顯示網頁
W3C (http://www.w3.org/TR/html401/struct/global.html#version-info) 公佈HTML 4.01的三種寫法如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD 就是「文件類型定義」（document type definition）的縮寫。Strict對html採嚴格定義, 禁止使用過時語法; Transitional採比較寬容定義, 允許使用部份即將過時語法; Frameset是frame網頁使用

瀏覽器顯示可以簡單歸結成二種: 標準模式(standard mode)和相容模式(quirks mode)

加網址的顯示為"標準模式", 不加網址的顯示為"相容模式", 不加宣告的則反應為 "相容模式"

目前常用的html宣告為 (標準模式) --> 有加網址
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

還有一種html宣告為 (相容模式) --> 沒加網址
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

老舊版本的瀏覽器多半是相容模式, 新的標準的瀏覽器則是標準模式
有支援切換宣告模式的瀏覽器為IE6以上, Netscape6以上, Firefox1以上版本

二種模式的差異為: 標準模式 CSS padding寬度外加, 相容模式 CSS padding寬度內含 (所以造成寬度顯示不同)

舉例: IE5, IE5.5, IE6 + 第一行xml宣告 --> 會顯示為相容模式
IE6, IE7, Firefox1.0, Netscape6.0 --> 會顯示為標準模式

(但是IE6 + 第一行xml宣告顯示為相容模式 (IE6 bug 之一), 在IE7和firefox不管有沒有 + 第一行xml宣告都會顯示為標準模式)

為了畫面正常而拿掉宣告不是很好的解決方式, 採用不加網址的宣告則不確定是否符合無障礙規範, 設計時仔細檢查調整css各區塊padding的設定應該都能解決

YouGov報告: 網頁設計不良損害健康

以下是國外ㄧ篇很有趣的調查報告, 做網頁的人要有良心啊!

原文刊載於: Poor website design may have negative effects on users' nervous system
http://www.publictechnology.net/modules.php?op=modload&name=News&file=article&sid=7223

以前有消息說，如果你擁有一個大螢幕顯示器，卻使用較低的解析度（800*600或更低），可能會讓你患上腦瘤。現在最近的一份報告表明，長期流覽設計不良的網頁也會損害你的健康。

這份報告綜合了YouGov對2500位使用者的調查，這些人被要求在不同的網站尋找需要的資訊，然後檢測他們的物理和生理反應，例如腦波、心率、肌肉緊張程度和皮膚傳導現象。檢測結果表明，設計不良的網頁會導致壓力和精神暴躁等，並可能導致“滑鼠狂躁綜合症”。

最讓人鬱悶的原因前五名分別是“慢”、“導航混亂”、“彈出窗口過多”、“不必要的廣告”和“打不開”。大家的期望是希望所有的網頁都能高速、功能全面和準確，就像Google那樣。

“滑鼠狂躁綜合症”的初期症狀包括心率加快、出汗、亂點滑鼠、詛咒系統、摔打滑鼠等。各位想一下，平時是不是會有這樣的情況呢？如果經常發生，那你就要注意平和一下自己的心態了。

使用者介面設計權威 - Jakob Nielsen

Jakob Nielsen 是網站使用者介面設計的權威, useit com中有很多他的文章和書籍介紹
useit.com: Jakob Nielsen's Website:
http://www.useit.com/alertbox/
Taiwan.CNET:
http://taiwan.cnet.com/builder/authoring/story/0,2000020511,20009862-5,00.htm

Jakob的研究採用所謂 "使用者測試(Usibility Testing)"
就是找幾個目標使用者(通常是6~7個就夠了)做些任務型測試.
例如到網站中找一筆資料, 然後仔細觀察紀錄這些人花多少時間完成任務?
中間曾遇到哪些問題? 需要提供什麼提示? 如果找不到又是為什麼?
最後再歸結出問題點做改善.

他根據多次測試歸納出所謂"好用的網站"應該遵循的設計原則(和無障礙設計有些區別),
當然也指出了一些誤導的或不好用的設計, 他說使用者平均只花1分49秒逛一個站, 雖然有點驚訝, 但是想想自己, 似乎就是這麼回事.

網頁設計不是只有漂亮而已, 客戶花一筆錢做網頁更重要的是可以達到的功能和目的為何? 或說希望向他們的目標使用者傳遞什麼訊息或留下什麼印象, Jakob的文章和書籍絕對值得網頁設計人員研讀

訂閱：文章 (Atom)