標籤為 “Web design” 的頁面如下
reCaptcha 越來越令人討厭,我們有甚麼替代品?
Google 的 reCaptcha 是網站用來辨別訪客是否真人的工具,我在多年前曾經推介過它,認為 reCaptcha 既能有效防止濫發文章,又容易安裝,還能對公益事業作出貢獻。Google 在 2009 年收購了 reCaptcha 後大力推廣,現已成為最普遍使用的 Captcha 工具。很可惜 reCaptcha 現在變得越來越難辨認,網上不少人高呼「reCaptcha 令人討厭」,也有人認為 reCaptcha 令網站的使用率下降,reCaptcha 原來的公益成份在被 Google 收購後也變了質,現在解讀 reCaptcha 等於無償替 Google 當人肉 OCR,包括辨別 Google 街景圖中的文字。反對 reCaptcha 的氣氛在用戶和網站站長之間迅速蔓延,大家紛紛尋求 reCaptcha 的替代品。
網站開發人員必備的 20 張速記片 (cheat sheet)
網站開發人員每天需要周旋於 PHP (或其他伺服器端編程語言)、SQL、JavaScript、HTML、CSS、數據庫預存程序及一些不同用途的開發架構之間,總會有「執筆忘字」的時候,這時你可能會向 Google 或編程書籍求教。不過,網上不少好心人替我們便製了一些「速記片」(cheat sheet),方便我們隨時查閱,Anson Cheung 在他的網誌蒐羅了 20 張網站開發人員必備的速記片。
20 個線上測試網站速度的工具
人人都知道上網的人對於網站的速度耐性有限,所以你的網站的效能和顯示速度,是網站的可用性,甚至成功與否的關鍵。Jacob Gube 在他的網誌分享了 20 個線上測試網站速度的工具,可以用來測試網站的速度,和找出哪裏是效能的瓶頸,他建議你同時運用其中數個工具 (沒有一個工具具備所有功能),作為恆常性的測試手段。
利用 Data URL 加速你的網頁
對優化網頁效能有研究的人都知道,首要的任務是盡量減少 HTTP 請求 (http request) 的次數,例如把多個 JavaScript 檔案合併,把多個 CSS 檔案合併,利用 CSS 精靈和合併的小圖示等等,但是很多人都不知道還有一個 data URL 的密技,讓我們直接把圖像的內容崁入網頁裏面,這個密技的官方名稱是 data URI scheme。
幾件有關 favicon 你必須知道的事
甚麼是 favicon?
Favicon 是 favorite icon 的簡稱,幾乎所有專業網站都有 favicon,它是一個由不同解像度的圖標結合成的檔案,例如它可能結合了一個 16x16 和一個 32x32 的 .bmp 檔案於一身,Favicon 的檔案延伸名稱是 .ico。在大部分的瀏覽器,這個圖標會在網址旁邊或者在書籤頁裏面顯示。通常 favicon 反映了該網站的設計或者有關機構的商標。
助你節省油墨削減成本的 Ecofont
為你的網站制定備份策略
最近幾天接二連三有知名網站遭黑客入侵,包括討論區系統 phpBB 的官方網站(phpBB 仍然是安全的,漏洞出在網站上另一個應用系統)及網上書籤網站 Ma.gnolia,網站被入侵已經不是新聞,很多被入侵的系統內的用戶資料被盜取,例如網上求職者網站 Monster.com 上星期被入侵後,數以十萬計的求職者個人資料被盜;有些網站的資料被抹去而無法復原,例如 Ma.gnolia 便承認他們無法復原用戶的書籤,唯有透過網上其他資源盡力恢復用戶的公開資料,其中包括 Google 搜尋器的緩存影像。數據丟失固然嚴重,對網站聲譽和用戶信心的打擊更是無法彌補。
「確定/取消」還是「取消/確定」?
我們在設計用戶介面時經常會遇到一些細小、對易用程度未必有很大影響的問題,其中一個就是對話框中的按鈕次序:應該「確定/取消」還是「取消/確定」?用戶介面專家 Jakob Nielsen 分析了這個問題,他的建議是:跟隨平台的一般做法,比優化介面更重要。
靠右對齊的導航菜單減慢閱讀速度
網頁的導航菜單 (navigation menu) 的設計有甚麼要訣?有名的網頁介面顧問 Jakob Nielsen 的研究發現,文字靠右對齊的菜單令用戶讀起來更容易,除此以外,他還有幾項有關導航菜單的設計指引,見解獨到精闢,值得我們參考。
Yahoo! 專家告訴你怎樣為網站加速
Yahoo! 的首席網站優化工程師 Steve Souders 從去年三月至九月發表了一系列優化網站的 14 項原則性建議,他和他的團隊研究後發現,下載一頁網頁的時間,80% 是花在瀏覽器的工作上,這些工作其實可以透過簡單的優化來刪除掉,從而大幅提高網站的效率,我們不妨看一看這位專家給我甚麼建議。
防止濫發電郵或文章的線上工具 reCAPTCHA
曾經管理網站,特別是論壇、網誌之類容許訪客寫文章的網站,一定見識過濫發文章/濫發電郵的威力,所以很多網站管理員都會安裝/啟動一個稱為 Captcha 的驗證系統,當訪客貼文章的時候,要從一個圖像中辨認出其中的文字然後連同文章一拼呈交,這些圖像都是隨機產生、充滿訊燥、字體故意被扭曲的圖像,只有人類才有能力正確辨識,這樣便可以杜絕網絡上的壞蛋使用機器人大量貼出文章。
謹慎使用下拉選單
Jakob Nielsen 有一篇文章討論下拉選單作為用戶介面應注意的地方,文章寫於 2000 年,最近他針對滾輪滑鼠對下拉選單使用性的影響,補強了這一篇文章,對用戶介面有興趣的朋友,這是一篇不可多得的好文。
是時候放棄 Transitional DOCTYPES 了
Jack Pickard 在 Accessites.org 發表了一篇文章,建議大家以後在 HTML 中放棄使用 Transitional DOCTYPES。
教學文件:利用 DHTML 製作一個裁剪圖像的介面
網上有很多圖像處理、相簿管理的網上應用系統,容許我們把大圖像裁剪為較小的圖像,但是用戶必須輸入裁剪框的座標和大小,對一般人來說顯然十分困難,Dave Dash 在 Spindrop 發表了一篇教學文件,指導我們怎樣利用 DHTML(JavaScript + CSS + HTML)來製作一個靈活易用的圖像裁剪介面。
恰當地使用 Flash
在網站設計者的社區,Flash 一直是一個很具爭議性的話題,有些人認為 Flash 補充了 HTML 在互動方面的不足,使網頁更生動,提高了上網的趣味,但是有些人卻認為 Flash 屬於可有可無的花招,在某些情況下它反而成為使用者的障礙。
把文字大小的控制權還給用戶吧
Jakob Nielsen 是網上知名的網頁設計權威,他主持的 useit.com 被視為其中一個對網站/網頁設計理念影響最大的網站,這個網站在 Google 的頁面排名更是同類網站的表表者,網站內有關網頁設計的文章,全世界的網站開發者都視為金科玉律。
如何編寫動態網頁:結合 HTML、JavaScript 和 CSS 的範例
搜尋引擎編索引的極限:你的文章應該有多長?
網站的開發人員,特別是商業網站,對於如何針對搜尋引擎進行優化,使自己的網頁能夠在搜尋的結果中排得較為前列的位置,都進行過不少研究,也有無數針對「搜尋引擎優化(Search Engine Optimization, SEO)」的文章發表過,指導大家如何令搜尋引擎重視自己的網頁。
document.onload 完全破解
Dean Edwards 研究 document.onload 的缺點與及解決方法已經一段時間,現在他終於提出了一個跨瀏覽器而又簡潔的終極解決方案。
你的訪客來自哪些國家、哪些城市?
互聯網把全世界的網民聯繫起來,從地球的一端到達另一端只是數以秒計的時間,似乎大家所處的地理位置在現代的網絡世界已經沒有意義。但實際上我們仍有很多機會希望知道我們的訪客來自哪兒: