很久以前在Smiley Cat看過一篇教學，將整個區塊元素變成可連結，並且在滑鼠移過時變換背景顏色：

要完成這個效果，有兩個重點：

• 必須讓整個區塊產生滑鼠移過會改變背景顏色的hover effect。
• 必須讓整個區塊可以連結。

在Smiley Cat的教學中，利用CSS設定將 a 元素改為display:block，因為 a 元素除了可以連結之外，在CSS中，又能使 :hover 這個偽類別（pseudo-classes）產生作用（:hover如果不用在 a 元素，而用在其他區塊元素如 li:hover，IE 6是不支援的）。

而最近Web Designer Wall則有一篇jQuery十大特效的教學（jQuery Tutorials for Designers），裡面的第六項：Entire block clickable，提到如何用jQuery來達成相同的效果。我借用了它的XHTML原始碼與部份的CSS，並做了一點修改，讓區塊變換背景顏色與連結的效果都採用JQuery控制，成果請見demo頁面。 | 繼續閱讀…

雖然已經邁入2008年的2月了，不過我還是想分享一下今年的Bad Usability Calendar。這個月曆從2005年發行至今，每年都會依月份列舉出12個錯誤的網站易用性範例，從最早只有挪威語的版本，到今年連同英文在內，已經有五國語言的版本了。

今年的12個範例中，有幾個我覺得蠻有意思的，像是：

• 六月的「誰說易用性一定很無趣（Who said usable has to be boring）」：範例圖片拿Jacob Neilson的useit.com開個小玩笑，還加上一個「Web 2.0 Can Be Dangerous」的連結……



• 九月的「不要複製每一個你看過的Web 2.0酷炫特效（Don’t copy every fancy web 2.0 element you see）」：還好根據我們觀察到的趨勢，今年這些閃亮的玩意會慢慢退出江湖了。



• 十一月的「過度分享（One word: Oversharing）」：還好臺灣的書籤服務沒那麼多家啊！



• 十二月的「我們已經看夠Facebook的複製人兄弟了，謝謝！（We’ve all seen enough Facebook clones now, thank you）」：不只是UI會有複製人，之前還有原始碼複製人，不過這就不是這份月曆要關注的部份了。

如果你也喜歡Bad Usability Calendar的點子，可以把這份月曆印出來貼在牆上然後拍張照，再去calendars worldwide登錄你的位置並上傳照片，加入這個大家庭。當然（像我這樣）沒放照片還是可以登錄的，一起去玩玩吧！

Rachel Cunliffe再度為文，描述她觀察到的2008年的blog設計趨勢如下（說明的部份是我的詮釋）：

• 美化的日期區塊（Stacked entry dates）

我去年曾經用Blue Zinfandel 2.0作為兩個網站的佈景主題，也逐漸發現到美化的日期區塊真的是個潮流，其他的還有：


• 各種手繪風格的元件（Handmade elements）

全手繪風格的Web Designer Wall是今年讓我最驚豔的網站，其他各種精彩的元件設計還有：


• 再見了，標籤雲（Farewell thee tag cloud）

許多網站把標籤雲從首頁拿掉了，但也有人創造了新的用法。

• 再見了，Web 2.0的設計（Goodbye “Web 2.0″design?）

其實所謂「Web 2.0的設計風格」這種東西一直是個假議題，我很同意Elliot的看法。從前面提到手繪風的流行，也表現出大家對於圓角、漸層、閃亮按鈕（rounded corners, gradients, shiny buttons）這些東西膩了，相信大部份的設計師都會對此感到很開心。

• 舊的不去新的不來（Out with one trend, in with another）

Blog的sidebar到底應該放些什麼？雖然有過比較正式版的建議，但新興的網路服務（Flickr、Facebook、MySpace、LinkedIn、Twitter）所提供的各種小元件一定不能少，吾友江媽媽的部落格用的那個Twitter Ballon我很喜歡。

• 版面變寬了（Stretching it out）

為了要放更大幅的照片、更大幅的廣告、更大幅的影片、更大幅的頁頭圖片，blog的版面也漸漸朝橫向發展。我想這和目前使用1024*768以上解析度的人已經超過80%也有關係。

• 靠右邊的sidebar（Goodbye left hand column）

為了讓網頁的內容可以配合由左至右的閱讀習慣被突顯出來，把sidebar放在右邊的風氣越來越盛。拜版面變寬之賜，右邊的sidebar甚至可以擴張成兩欄，我最近很喜歡的The Morning After佈景就很典型。

• 自我介紹（Introducing…）

Jacob Nielson鼓吹那麼久，大家還是有把他的話聽進去的，越來越多部落格會在顯眼的地方放上自我介紹，甚至是作者的照片。

• 不再侷限某些字型（Branching out with fonts）

SIFR的技術讓網頁的不再侷限於Arial、Helvetica、Verdana、Tahoma這些系統字型，甚至還有相關的Wordpress plugin可以使用。這一點是我自己最感興趣的部份。

• 歡迎集思廣益，繼續補充（But wait.. there’s more!）

有更多想法的話，歡迎在留言裡面和我分享～

同場加映：
Hand-Drawing Style In Modern Web Design (Smashing Magazine)

雖然Web Developer Toolbar這個套件已經非常好用了，但是很多時候，能夠直接按一下就啟用的bookmarklet（書籤工具）還是稍稍方便一些，並且也兼具了跨瀏覽器的優點。

Allen Jardine製作的Design Bookmarklet一共有四種功能，如果你和我一樣，做網頁時，有非得把各種元素對齊不可的強迫症，那麼這個工具將非常實用：

1. Grid：可依需求直接輸入數據（尺寸、欄位數和列數、邊距等）在頁面中產生格線。
2. Rule：在上方和左側顯示尺規，並且可以拖曳出準線（guides）。
3. Unit：在頁面中測量任意兩點間的距離。
4. Crosshair：隨滑鼠游標出現的十字瞄準線，並提示座標。

上述的四項功能可以同時使用，介面也很美觀。這個小工具目前支援的瀏覽器有：Internet Explorer 7、Firefox 2+、Safari 2.0.4+、Opera 9.2+。至於為什麼沒有支援IE 6呢？Allen說，因為這是給開發人員和設計師用的呀。

是的，Jacob Neilson已經告訴我們幾百次了：不要使用「按這裡」或其他不具描述性的連結文字（Don’t use “click here” or other non-descriptive link text），很多研究機構的報告也支持他的論點，證明使用者討厭這種缺乏資訊的連結。我是個好學生，老師在講我真的有在聽，不過其實我個人倒不是那麼反對這樣的用法。

Copyblogger的這篇「Does Telling Someone to “Click Here” Actually Matter」，已經累積了172篇的引用和回應。Brian在文章裡面提出了Marketing Sherpa近期的研究數據，顯示在電子報中使用「按此繼續」（Click to continue）作為連結文字，可以提高8%的點閱率，來支持自己的論點：「當你希望人們去做某件事的時候，就直接教他們那樣做」（if you want someone to do something, you’ll get better results if you tell them exactly what to do）。

確實，我自己還蠻習慣看到「按這裡、這裡還有這裡」這樣的連結文字時，就乖乖去按了。之所以願意去按，是基於這篇文章能帶給我信賴感，讓我相信連過去看的東西必定有其價值。所以如果是我平時經常閱讀的一些blog，出現這樣的連結文字，並不會損害我對他們的評價。

然而我也知道，對於只是為了某篇「偽Vista」而闖進這裡的訪客，如果我只是賞他一堆「按這裡、這裡還有這裡」的連結，然後一點過去又是長篇的英文網頁，是很容易傷害他幼小心靈的。假如再加上SEO的考量，尤其是推自己舊文的時候，使用明確而具描述性的連結文字絕對毋庸置疑。

其實關於usability、web standard這一類的事情都是這樣，「XXX」不是各好主意，但也沒多壞。叫使用者「按這裡」不是個好主意，但也沒多壞；他可能會在心裡面咒罵你幹麼不寫清楚，但還是會乖乖地按。不過他下一次還會不會來，會不會想訂你的blog，假如這些是你在乎的價值，那也許多聽聽老師的話也好；假如那不是你在乎的價值，也不代表你就沒機會寫出有172篇回應的文章。

這就是我看Copyblogger筆戰的心得。