網頁設計不必無懈可擊

無懈可擊的網頁設計

不知道有多少人看過這本 Bulletproof Web Design(無懈可擊的網頁設計)?本書主要是教大家用 XHTML 及 CSS 去設計一張無懈可擊的網頁。哪究竟甚麼是無懈可擊呢?

無懈可擊的網站是指無論網頁在何種環境下,包括被禁止顯示圖片、停用JavaScript、無樣式(即無CSS)及字體大小被改後的瀏覽器下,網頁都不會殘殘破破、阻礙讀者閱讀。一般嚴格依照網頁標準制作的網站都能輕易做到前三項。但對於最後一項,幾乎所有網站在字體放大好幾倍後或多或少都會有些走樣,或者在 IE6 下跟本無法放大字體。

一個無懈可擊的網站應該是怎麼的樣子呢?請在宜家傢私的網站上試試放大瀏覽器的字體,你可以在工具列上的 View > Text Size 中調較。我第一次看到這種效果時,曾有一種驚艷的感覺。但再看真一下,發現原來它們並沒有嚴格遵照網頁標準去制作…所以呢,在整個網路上稱得上無懈可擊的網頁設計,大概只有 Yahoo! 一家而已。Yahoo! 的首頁在 Firefox 下可以放大 3 次,相等於 Internet Explorer 6 中的1 Largest Font Size。但無懈可擊的也僅僅是首頁,Yahoo! 內頁還是老樣子。

無懈可擊很難做到嗎?談不上難,但這是一項極花時間的工作:

  • 需要加入一堆無意義的 <span> Tag。雖不能說這是違反 Web Standard (Span 本來就無特別意義),但讓 HTML 變得冗長難讀卻是事實。
  • 相應地令 CSS 變得冗長複雜,日後維護工作變得麻煩。
  • 原本一張圖片可以搞定的事情,現在要兩、三張圖才搞定。
  • 以上各項都增加了網站的大小,拖慢了下載速度。
  • 會改變文字大小的用戶肯定是少數中的少數。
  • Internet Explorer 7 提供 Zoom 的功能,幾乎所有網頁在 IE7 下都是無懈可擊的。
  • 有其他更好的方法去改變文字大小,例如 JavaScript。
  • 無懈可擊的設計需要花上比一般網頁多兩至三倍的時間,而實在有太多的事情比無懈可擊更值得花時間了。
  • 其實只要做到不影響基本瀏覽就好了。

總的來說,無懈可擊的網頁設計可謂多此一舉。當一個設計理念連 Yahoo! 這樣精益求精的大公司都覺得沒有意義的時候,這個理念大概可以被所有網路公司所忽略。

(全文完。碎碎念始。)

每次遇到可讀性極差的網頁的時候,一般家儒我都會直接用 Firefox 的 No Page Style 再 Ctrl ++ 放大字體。

但遇到一些設計不良又不開全文RSS的網站,例如 Mr.6 的 Blog,仍然會讓我很煩。都用到了 CSS 去排版了,為甚麼不把正文放到 Sidebar之上呢?無論在 SEO 還是 Web Standard 的角度去看都應該這麼做啊。我們提倡依 Web Standard 做事不是因為這個技術看上去很酷很 Web 2.0

還是把提供個全文 RSS 吧。

This entry was posted in Web Design. Bookmark the permalink.

16 Responses to 網頁設計不必無懈可擊

  1. moming2k says:

    想不到有人和我一樣對 Mr.6 不提供全文感到煩厭,當其他 RSS 都提供全文 RSS,方便使用像 Google Reader 的人,尤其在 iphone 上的 google reader , 還要 click 一個 link 去看全文實在是反潮流的事,真的使人覺得很納悶

  2. jaceju says:

    To 家儒:

    雖然我贊同你的說法,但是…

    「Internet Explorer 7 提供 Zoom 的功能,幾乎所有網頁在 IE7 下都是無懈可擊的。」

    這個推論怎麼忽略了你在第二段的介紹的其他特色?這樣會讓整篇文章感覺上只要能 Zoom 就是無懈可擊耶?

  3. 家儒 says:

    re jaceju:

    我的確犯了錯,無懈可擊的確不光指 Zoom。
    感謝指証。 ^^

  4. 查斯特 says:

    贊同。其實一個網站設計得多美觀,沒有具水準的內容也是徒然。我寧願用RSS去看有用的純文字資訊,也不看美麗浮誇的廢話。

  5. 半路 says:

    請問一下,你所指的”把正文放到Sidebar之上”是什麼意思呢?
    因為我瀏覽 Mr6 網站時,看起來感覺還滿正常的,Sidebar有乖乖待在文章右邊不是? @_@
    另外不提供RSS全文的確是有點困擾沒錯。

  6. 半路 says:

    另外有個疑問:當文章長度過長時,不用more tag的話會使得首頁內容過長,但是使用more的話,在RSS中也看不到全文了。應該選擇什麼方式比較合適呢?

  7. 家儒 says:

    Re 半路:
    >>”把正文放到Sidebar之上”是什麼意思呢?
    用 Firefox 的 No Style 一看你就知道是甚麼意思了 ^^

    >>不用more tag的話會使得首頁內容過長,但是使用more的話,在RSS中也看不到全文了。應該選擇什麼方式比較合適呢?
    請見:
    http://blog.tinyau.net/archives/2006/06/13/solution-of-full-text-feed-and-more-tag-in-wordpress-21-alpha/

  8. 無懈可擊中,應不應該加上這點??「無論在Resolution800x600或1024×764的時候都能做到設計者期望的效果。」

    我的Blog是以800×600設計,我經常在想有沒有辦法可以令訪客的電腦自動變成800×600來閱讀我網,哈~

    CO2

  9. 家儒 says:

    CO2

    這裡也是基於 800*600 設計的,但在 1280 * 800 (甚至更寬)下仍能獲得不錯的效果 ^^。

  10. 網頁設計 says:

    很不錯的看法,為了做出無懈可擊的網站似乎不合經濟效益比

  11. 網頁設計 says:

    真不錯。不過我這裏還有個更精彩的網站,希望能和大家一起分享其中的樂趣,一起去看看網頁設計

  12. 我是做網上產品銷售的,想找一個網站行銷服務,將我的網站進行SEO搜尋引擎最佳化,將網站設計網頁設計做的更加具有市場競爭力,促使搜索引擎及更多的客戶能夠查看到我的網站。哪位朋友介紹個好點的網頁設計公司吧!謝謝啊!

  13. Anonymous says:

    我們是在做雞排加盟加盟總部,如果你有需要可以找我唷.

  14. 網路開店 says:

    多多交流設計方面的資訊,可以增加自己的知識唷

    網路開店

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>