網頁標準化負面教材 – PChome 樂屋網

[備註] 各位,這是 2009 年 01 月 04 日的樂屋網問題,但是現在的樂屋網已經完全不一樣了,HTML 結構符合語義與結構化的原則,使用方式也有遵循W3C的規範,CSS的使用也相當精簡而且有整合過,因此千萬別將我這篇文章的評論加諸在現在樂屋網的標準化頁面開發人員喔~這樣他們就未免太冤枉了 :D 。有問題的地方我們要給予批評指教,但是有改進就要大大鼓勵唷!大家給新的樂屋開發人員掌聲吧~

前幾天突然發現 PChome 首頁多了個 樂屋網,上面還有個奇怪的長腳屋子,於是乎我就忍不住好奇心點進去看,當然,不可免俗的我又去檢視人家的原始碼,看了之後,實在是為台灣的網頁標準化發展感到悲哀跟無力。

在網頁標準化技術儼然成為全球網際網路發展普遍的必然趨勢後,PChome 看起來也是不得不跟進這股標準化的潮流,不過自從 PChome 首頁改版至今,好像還沒有看到 PChome 真正在自家網站上完全落實網頁標準化技術。首頁相簿、還有分紅網,頁面看似標準化,卻硬是留了個 table layout 的尾巴,不知道是在想什麼;線上購物24h購物、和女性購物就更不用說了,根本就是慘不忍睹的 table layout 過時網頁;至於部落格商店街露天拍賣則都是雖然有做標準化,但是大概都只有部份頁面,好吧,那就慢慢來,起碼有在做。

這個剛出來的樂屋網是怎樣?要嘛像首頁那樣做不完整的標準化,要嘛像購物系列網站那樣不鳥標準化完全用 table layout,沒事做個錯誤百出的標準化是在幹嘛?在幫 PChome 集團增加笑點嗎?

因為很多是屬於非常經典的門外漢錯誤,通常出自於那種自以為會網頁標準化,但實際上卻完全不瞭解網頁標準化的人手中,每次光靠嘴巴講大家都感受不到,這會子讓我逮到這個千載難逢的好機會,全部整理在這裡,省得我還要想破頭找例子。

Error 1:<span> 和 <div> 濫用病
HTML 給你 <span> 和 <div> 不是讓你拿來亂用的,見什麼包什麼,整個網站看不到一個<h1>,<div> 和 <span> 倒是多到滿出來
Error2:行內元件不得包區塊元件
用 <span> 就算了,怎麼會把 <span> 包在 <ul> 外面,難道連 <span> 是行內元件這種基本常識都不知道嗎?這樣用是想要讓 W3C 中風嗎?

 

這是什麼東西?

這是什麼東西?

Error3:不要把沒有意義的東西放到HTML當中
什麼叫做沒有意義的東西?所有裝飾性、效果用、不具備實質內容的東西就叫做沒有意義的東西,這些東西嚴格來講都不應該出現在HTML內容當中,要如何檢查自己的網頁有沒有出現沒有意義的東西?很簡單,拿掉你的樣式檔就知道了,如果沒有套用樣式的網頁請人來看有出現那種看不懂的鬼,就代表你沒有把網頁標準化做好,請回過頭去好好修改你的HTML,直到誰來看都可以看得懂為止。

 

這又是什麼東西?

這又是什麼東西?

這又是什麼東西?

這又是什麼東西?

Error4:無意義 <div> 的使用
樂屋網原始碼另外一個重大的特色,就是特別喜歡在一個 <ul> 外面莫名其妙的包上一個 <div> ,而且感覺上相當明顯只是為了幫 <ul> 加上一個包含 class 的 <div> 。在這裡,我要告訴每個撰寫 HTML 的人,如果你無法為你的每個標籤說出一個它結構上或樣式上必須存在的理由,就代表你的標準化工作有待加強,樂屋這樣的結構,除非有很特別的理由,否則這可以說是非常莫名其妙的垃圾碼,難道你不知道 class 可以直接下在 <ul> 上面減少無聊的 <div> 嗎?

上面的部份只是提到一些初學者或是狀況外人員容易犯的錯誤,其他那種什麼連結沒有加上 title ,或是 img 應該加上 alt 而不是 title 這種小地方就不想講了,接著我只想講樂屋的 CSS 內容,否則大概寫到明天都寫不完。一般來講,標準化程度的好壞看 HTML 就知道,看 CSS 只是順便讓更多人瞭解哪些基本錯誤不應該犯,更不要連這些東西都不知道還想要做標準化,這是會被人家笑掉大牙的。

Error5:莫名其妙的CSS樣式
仔細看看,居然會看到有人對標籤下 dispaly:inline 以後,又幫它加上 width 和 height 的屬性,拜託一下,這是忘了刪掉嗎?行內元件你是要怎麼指定寬高啊?但是寬還是有作用,為什麼捏?因為它加上了 float:right  的屬性,這個屬性加上去了以後, dispaly:inline 就失去作用了,整個元件會成為區塊元件,也就是說,這個寫 CSS 的傢伙基本上是可以把多餘的垃圾 dispaly:inline 拿掉,因為完全不知道它寫在這裡是要幹嘛的。很多人剛開始寫 CSS,會用亂猜的方式來寫,這個屬性不行就換那個屬性,結果寫了一堆莫名其妙自己也說不出所以然的屬性在上面,但是 CSS 其實是很講邏輯的,就如同程式一般,寫 CSS 的時候請使用邏輯來思考,不要亂猜一通,增加 CSS 的體重。

 

Error6:善用簡單表示式來最佳化 CSS
這個嚴格來講並不算是Error,但是卻是應該要改善的地方,CSS 檔案裡面到處都是 margin:0px 0px 0px 0px 或是 padding:0px 0px 0px 0px 這種東西,幹什麼不直接用 margin:0 和 padding:0 處理掉?還那麼特意要加上 px,0 就是 0 了,加上 px 也沒有任何意義,這種不深思熟慮的作法平白無故增加了多少字元跟檔案大小?做網站的人,如果不能夠對自己嚴格要求的去考慮效能與檔案大小,怎麼能夠算是專業?

樂屋網只是一個例子而已,在台灣,有著許多跟樂屋一樣不但談不上標準化,甚至還做出錯誤標準化的網站,這種網站,與其跟著標準化的腳步走,不如還停留在 table layout 的舊網頁技術還比較好一點。標準化技術並不是鬆散隨便的,它有著很嚴謹的規範與技術規格,做網站的人,無論是標準化工程師或是網站開發工程師,甚至包括網頁設計師,都必須要有足夠的專業知識來面對,如果不能夠無時無刻的要求自己、檢視自己、深刻的反省自己不足的地方,你就沒有辦法把你的工作做到最好。

如果不能夠時時刻刻的要求自己,還做出這種錯誤連篇的偽標準化網站,在我眼裡看來,就是在拿自己的專業當笑話而已。

Advertisements

26 thoughts on “網頁標準化負面教材 – PChome 樂屋網

  1. 晴天霹靂、醍醐灌頂或許不足以形容大師文章的萬一
    巫山行雲、長江流水更難以比擬大師的文才…

    期待更多大師的見解!

  2. 不過看作者的筆調挺有意思
    妳比CSS的傳奇人務 eric meyer在書中的筆調嚴格許多阿
    呵呵
    相當嚴格喔

    • 唉,那是因為 Eric Meyer 才是真正的大師啊~像我這種咖小就算走去W3C跟他們說,我願意免費爲W3C努力,他們大概也只會告訴我:不好意思,我們這邊沒有需要你的地方喔~你要不要考慮捐錢就好…XD

      大師的氣度畢竟不是我這種粗人可以去相提並論的,我只是順便舉個例說明罷了,平常講話太直接,雖然這篇文章有特別收斂一下,不過好像還是不太有氣質…:D

      嗯~我也真是沒辦法

  3. Error 3 的第二張圖不是什麼鬼東西,那東西叫做CSS Sprites (減少 HTTP Request 的一種作法)

    有時候,專業也不是能當飯吃的

    上級、使用者只會看你的結果,不會看你做的過程怎麼樣

    一定是先求 “有” 再求 “好”

    至於這個網站怎樣,我也不想多說什麼

    因為這個網站,本來就沒有打算做網頁標準化

    給人家亂扣帽子,我覺得對 PCHome Web-developer 們根本就不公平

    • CSS Sprites 是 CSS 裡面非常常見而且沒什麼難度的技術,我也常用,但是沒人像樂屋這樣用,如果您沒有耐心等我寫 CSS Sprites 教學文章,建議您可以先看看這篇初學者的文章,相信您看了就會了!

      我不知道這樣寫對於 PChome 的網站開發工程師公不公平,但是同樣也是 PChome,露天也有使用大量的 CSS Sprites,顯然不是所有 PChome 的網站開發工程師都是這德性,如果不會用 CSS Sprites,也可以學商店街一樣用一張一張小圖啊!不然就不恥下問的好好去跟露天的人問一下也可以,不需要把 CSS Sprites 用成這樣,CSS Sprites 不是這樣用的。

      另外我也很同意您所說的「先求有,再求好」,但是這句話得真正意思是「先求有一個紮實的基礎,再求更好的功能」,不是像樂屋這樣「先求有個能看但是錯誤百出的東西,再求更好的時候就是打掉重弄」,想來您是誤解這句話真正的意義了。

      開發網站的確先求有,寧可功能陽春,但是程式核心要紮實健全,之後則是在這個健全的核心之下慢慢的擴充更多更好用的功能;不是每次都急就章做一堆爛東西,沒想前也沒想後,只是想應付老闆,結果每次後續要增加功能動不動就得打掉重寫,開發人員天天把同樣的東西用不同的方法重複做來做去,徒然浪費生命也沒有效率,這樣的網站開發方向,是事倍功半的,偏偏台灣許多人都是這種心態在做事。

      老闆其實要求的沒有錯,但是聽老闆要求的主管往往會錯誤解讀這句話,如果不巧你老闆跟你主管都把這句話解釋成第二種,建議你可以把我的留言貼給他們看。

      另外,這個網站如果不打算做標準化,可以不要做標準化,沒有人強迫他要做標準化,就像 PChome 購物中心那個樣子,一堆 table layout,我也不會有太多意見:當然它也可以就自己的需要做部份的標準化,反正一步一步慢慢來,沒人會催它,但是樂屋的重點不在於有沒有標準化(這種東西樂屋要談還太早 :D),而是根本就是錯誤連篇的東西。

      對就是對,錯就是錯,作法可以有很多種,但是錯的就是錯了!

      當然,我也很同意你,這種責任要讓網站開發人員扛的確是有點沈重,畢竟網站可不可以上線也不是他們說了算的,所以我認為樂屋的技術長也要負責,開發人員寫錯的東西是他自己專業不足,身為技術管控的技術長居然連這麼天大的錯誤都看不出來還讓這種東西上線,這豈不是要丟全技術部門的臉?如果樂屋的技術長不懂這東西,大可以去請教商店街或是露天的技術長啊!起碼請人家給點意見吧?這是 PChome 的東西ㄝ~又不是什麼創投公司阿貓阿狗的網頁,好歹也是台灣第二大入口網站。

      • 這應該是技術的運用的好壞與否有關才是,與尊不尊重有何關聯??似乎拿不一樣的標準的東西,去評判完全不相關的東西的好壞不是嗎??難道無障礙物的使用者都是看html、css嗎?

  4. 你好喔!
    刚刚看了不少你写的文章, 感觉你的文章好生动呢.
    特别是这篇 <>

    也学习到了很多东西, 谢谢!

    然后, 我是想说, 关于Error5的问题.
    虽然我没有去看他的样式表, 不过float:left要加上display:inline却是有原因的喔.
    因为IE6有一个margin加倍的Bug, 所以才要加上display:inline这个奇怪的属性上去吧!

    • To izyA:

      由衷的感謝您細心的提醒,因為我沒有把樂屋那段完整的CSS放上來,所以讓您認為這個做法是為了修正 css 的 double margin 的Bug,不過其實它原來的CSS長下面這樣:

      .listing_01 ul li {
      padding-right: 5px; display: inline; padding-left: 0px; float: right; padding-bottom: 0px; margin: 0px auto; width: 80px; color: #ffffff; padding-top: 4px; height: 25px; text-align: center
      }

      正常來講,如果我對區塊下 float:left,並且設定 margin:0 10px,在 IE6 裡面,最左邊的地方就會出現愚蠢的 double margin ,這個時候,加上 display:inline 就可以修正這樣的問題。不過如果是使用 margin :0 auto,則不會出現什麼 double margin 的狀況,因為它根本不知道 float:left 之後搞個 margin:0 auto 是要幹什麼,所以基本上是不會幫元素加上左右邊界的,自然也不會有 double margin 的問題,因為 0 邊界乘以任何數都還是 0 啊~管他是兩倍還是三倍,都是 0 啊~

      所以,樂屋這樣的做法,並非是為了修正 IE 的 double margin 問題,而是單純的不知道在寫啥~XD(笑)

      • 自認CSS還有點程度,這串還真讓我有點匪夷所思想!

        大概整理一下,沒用的屬性真的一堆…..

        .listing_01 ul li {
        padding: 4px 5px 0 0;
        display: inline;
        float: right;
        margin: 0px auto;
        width: 80px;
        color: #ffffff;
        height: 25px;
        text-align: center
        }

        浮動靠右,左右margin設auto的意義何在,display是行內,那應該也是設line-height,設height是什麼意思?text-align是置中,那最上面那條的padding意義在哪,寬度這個我反而覺得算是最有意義的,不然宣告這麼多,沒有這條,應該只有color那條看得出效果

  5. 有同感!目前國內許多的網站號稱「無障礙」、「遵守網頁標準」,但實際上很多只是半調子。很多網站的原始碼,可以看到和
    這真令人無言…

  6. 剛看到嚴厲的用詞挺嚇人的, 想必該是苛刻的人吧, 然而看看內容發現批評的夠專業, 至少比一些一般想做網站的人士還專業, 在此只能感謝你的 熱心分享, 更謝謝你提供一個至少屬於專業應有的基本知識分享.

  7. 嗯…貴站使用的wordpress theme裡面也是不少 ul 包在 div 裡面啊…

    意思絕對不是說自己沒整理好,就不能批評別人,而是可以想想貴站當初選擇這個theme的依據,是文中提到的嚴格檢視(原始碼)角度,又或者易讀美觀的版面設計跟使用方便的角度呢。

    版面設計、程式設計再加上HTML/CSS規範的角力,實際運作的網站總是會有某些不如意之處,但(大部分時候的)重點是網站本身設計能不能滿足使用者、能不能實現設計者的想法、或者是能不能賺到錢吧(!)。

    正常我也是不會留言的啦,的確文裡的字詞相當嚴厲啊…倒是逼出了不少回應吧。

    • Dear Nail:

      首先,我並沒有架站,這個部落格本來就是Wordpress官方的網站,您如果對他們的Wordpress的HTML語法有問題,建議您可以直接向他們反應。

      其次,我從來沒有說 <div> 裡面包多個 <ul> 甚至是巢狀 <ul> 是錯誤的,這本來就是正確的 HTML 語法結構!我指出過去樂屋網的錯誤結構是行內元件包區塊元件,如果您不甚明白我所說的意思,請您可以直接在 Google 上面搜尋「HTML 區塊元件 行內元件」,這樣您就會明白我當初所指出的樂屋網錯誤並不是包不包 <ul> 這種事情。也因此您拿 WordPress <div> 包很多 <ul> 這種說法來替過去樂屋網的 HTML 嚴重錯誤來比較,可以說是不恰當的比喻。

      其次您所說的東西,我只能說因為 WordPress 不是我架設的,所以我沒什麼好評論的,但是我想 WordPress 的 HTML 有沒有整理好,建議您可以直接向您身邊真正了解標準化與HTML的信賴人士來請益。

      我很能夠贊同您所提到關於HTML程式碼與設計之間,的確需要找到一個平衡點,我在文中並沒有要求過去的樂屋網再 HTML 上要做到完全的精簡或是完全不能有冗碼,如果是要做標準化網站,我們只要求兩件事情,那就是:

      1. HTML 不應該有錯誤
      2. 視覺裝飾的圖像顯示請完全交給 CSS

      如果僅此兩件也沒有辦法辦到,我想那不如就直接使用 table layout 還好一點。

      我還是相當感謝您的留言與指教,但是我還是誠懇的希望,在您想要為標準化這件事情提出有力的反駁時,您必須要客觀的了解我文中所提到的每一個論點。或者我用字嚴厲,語氣強烈,但是並沒有盲目批判,不符合事實與真理的地方。對就是對,錯就是錯,對我來講,正確與不正確雖然只有一線之隔,但是卻黑白分明,我同樣也希望您能夠充分了解我所批評的事實,因為那正是許多人會犯的 HTML 錯誤。而我依然要非常遺憾的對您再次說明,這裡所提到的每一項錯誤,都不是在考量所有設計效果之後應該發生的,而是打從一開始就不應該犯的超超超基本錯誤。

      再次感謝您的意見,也希望您未來若有更多的想法或建議,也非常歡迎繼續讓我知道。:)

      PS. 雖然已經說過了,但還是要再次強調,這些都是過去樂屋網的問題,但是現在的樂屋網已經不存在這樣的問題,請大家為樂屋的進步給予更多的鼓勵與讚美 :P

  8. @@”…
    此文章的說法,大概就是說我我這種業餘的玩家。
    因為不是很了解W3C的定義,只是東看看、西參考,可以用的東西就借來用一下。所以,程式碼一定有一些很奇怪垃圾存在。

    不過你的文章讓我受益良多,非常感謝!!

    • To KevinHsin:

      如果文章無意冒犯到您,還請見諒,希望您不要見怪。:P

      我希望能夠有時間把正確的東西告訴更多的人,也希望越來越多人能夠更加了解 HTML 和標準化,我也曾經對 w3c 不了解,透過很長時間的摸索跟了解,我開始能夠較為清楚的理解每個HTML標籤。如果我的文章能夠讓其他人省去無謂的摸索時間,我就覺得相當值得。

      希望您能夠繼續提供我意見,再次感謝您的留言以及意見。:)

  9. 小弟是初學者,查了一些資料後,大概理解CSS sprites的功用了,但不太理解樂屋網是錯用在哪呢??

    ps.獲益良多感謝:D

    • To GR,

      您所看到的 Error3 的截圖,都是在我拿掉 CSS 之後所看到的網頁內容。

      樂屋當時的問題,不在於錯用 CSS Sprites,因為它根本就沒有使用 CSS Sprites。

      CSS Sprites 是利用 CSS 可以更換背景圖座標的特性,將很多瑣碎的裝飾圖和 icon 等圖檔集合在一張圖裡面,最主要的目的是要壓縮圖檔大小並且減少網頁對伺服器的 request。Error3 裡面樂屋的裝飾圖,根本就是直接用 <img> 嵌在 HTML 當中,跟 CSS Sprites 一點關係都沒有!阿白留言辯解說樂屋這是在使用 CSS Sprites ,其實文不對題的留言。

      回到重點,樂屋錯在哪裡?

      樂屋的錯跟 CSS Sprites 的錯用完全沒有關係,它的錯在於把裝飾用的無聊圖檔放到 HTML 裡面,還放得很莫名其妙。

      一般來講,假設我們的網頁上面有個很可愛的回首頁按鈕,我們不會直接把有寫「返回首頁」的可愛按鈕圖放在網頁上,而是使用另外一種方法:

      <a href="/index.html" title="返回首頁" rel="nofollow">回首頁&ly;/a>

      然後再用 CSS 把連結裡面的文字藏起來,用可愛的按鈕當成背景圖取代掉。

      為什麼我們要這麼麻煩?有兩個個理由:

      1. 把視覺的圖檔跟 HTML 分開,這在多人開發的網站尤其必要
      2. 讓無法讀取圖檔的使用者也可以清楚知道這是什麼東西,而不是一個看不出是什麼意思的圖(樂屋可是連個 image 的 alt 都沒有放)

      一個好的網站,需要的是一種尊重。

      • 尊重看不到圖檔的人
      • 尊重不想用 JavaScript 的人
      • 尊重用 eeePC 那種小小電腦的人
      • 尊重用手機看東西的人
      • 尊重不方便使用鍵盤的人
      • 尊重每個想看你東西的人
      • 尊重不想看螞蟻字的人

      這些東西,如果小網站做,我也不會有什麼意見;不過樂屋好歹是在台灣 Yahoo! 之後的第二大網路公司生出來的小孩,難道連對使用者做出最基本的尊重也這麼難以迄及嗎?

      我關心的從來就不是 CSS Sprites,而是最基本的網路使用權;要有尊重,才能讓世界變得更好更友善。

      • 路過看到這篇的文章,學習到許多技術與觀念,但是對你的論點感到不以為然,技術方面你說的都對,但是你以一個網頁標準就這樣評斷一個網站說實在也太過偏頗,扯到尊重更是莫名的指控

        現今網站泛用的AJAX就跟你所主張的”尊重不想用 JavaScript 的人”所違背,拖曳式的UI等等,我就不一一列舉了,試問現在商業網站有哪幾個能照顧到這些族群?

        一個網站的好壞有許多面向,技術很重要但不是絕對,你文中一直強調”台灣第二大”不應該是這樣的技術水準,但對我而言並不是那麼感到驚訝,pchome之所以會是”台灣第二大”並不是因為他”技術卓越”,而是因為”商業策略”的成功,這是必須要有的認知

        當然技術方面盡可能的追求完善,但是在執行上可能會有許多因素必須納入考量,人員,時間,成本等等,而不是一昧的球追技術面的完美

        有時候跳脫自己技術人員的角色來看事情這些事情並不是那麼難以理解

      • 好吧,其實我不是那麼懂,樂屋網其實都已經進步那麼久了,怎麼還有那麼多朋友不去正面肯定樂屋網的成長,反倒不斷的幫過去樂屋網的謬誤辯駁?

        合者…樂屋網今天的改變與成長不符合社會期待的嗎?XD

        既然各位還是有諸多困惑與想法,我就直接了當的來說明我的想法。

        PChome 之所以可以成為台灣第二大入口網站,不可諱言,得歸功於成功的行銷策略,但有好的行銷,就代表可以忽視產品的品質嗎?行銷不是萬能,就算有一流的行銷手法、一流的產品包裝、一流的公司形象,但如果遇到糟糕的產品,我想就算有賈伯斯站在台上掛保證,也不會有什麼未來。

        樂屋網就是 PChome 的產品,至少在我看來,維持產品「最基本」的品質是起碼的工作。

        HTML ,就是網頁最基本最起碼要有的東西。

        現在網路如此的發達,會寫部落格的小學生只怕都可以隨便在編輯器上面按出 HTML,事實上,這個東西也的確簡單到不需要演算法或是 C++;也就是說,樂屋網在 HTML 這快要做的事情,就是把小學生都在用,也常常誤用的的東西,用對地方。

        HTML 對一般不是網頁開發的人來講也許是件有點深的東西,但講穿了,它就是網頁的文件格式而已;既不用 compiler,也不用在特別的環境或是特別的平台上才能用,更看不到 if else switch 這類的東西。也就是說,我批評的重點壓根兒不在於有沒有卓越的技術,而在於有沒有基本的知識。

        但是如果你今天跟我說,當初開發樂屋的其實是樂屋的會計,那我就二話不說的收回這篇文章。

        當初的樂屋網可以選擇習慣的 table layout,也可以因為沒時間人力考量選擇只做一小塊標準化,沒人會抱怨;但是要做又把東西做成這樣,擺明了對這個產品的品質漫不經心。

        如果各位認為這是因為我一直不願意跳脫技術人員狹隘的視野,從更多的面向來思考這件事情,那麼我也只能很現實的講一件事:

        這本‧來就是技術的問題。

        一個技術人員連自己技術都做不好,我不知道他還打算跳脫到哪裡來看待技術的問題。就算跳到更高的層級去看,也只是本末倒置而已。一件事情,時間不夠有時間不夠的做法,人力不足有人力不足的做法,經費不夠也有經費不夠的方法。既然當初樂屋網選擇使用網頁標準化技術,通常也代表這是評估過後的決定;現在因為我很機歪的說三道四才提出成本經費與人力的託辭,我想這也讓人感到萬分的困惑,難道樂屋網一開始在這些東西做之前都沒有評估嗎?

        更遑論如果真的這麼在意成本,更應該第一次就做出對的東西,花錢花時間又花人力做出問題重重的東西出來浪費成本還要花時間改,難道就比較省成本嗎?

        至於尊重這件事情,我是覺得,如果大家都這麼的不想考慮,也不想尊重「目標族群」,也就是使用者的使用利益與方便性,我也可以請問當初付錢投資樂屋網的五大房仲業老闆一句話:

        拿了錢、排了人力、花了時間,做出一個品質不好,還需要重新花時間、人力、當然還有金錢額外修補製作的網站,對各位而言是否是一種尊重?

        請原諒我說一句造次的話,有些事情,即便沒有跳脫,也應該是不證自明的。

  10. 看到板大的回應先說聲謝謝 讓大家可以在這邊做交流
    ,我也要謝謝你在本篇文章中分享的CSS錯誤案例,藉由實例讓大家能夠快速學習

    我不是pchome裡面的人 我也不必為pchome做任何辯駁或是護航,我覺得你解讀過度了,會po那篇留言只是對你評判一個網站的方式有不同的看法,提出來跟你討論

    對於妳文章中提到的技術論點,我都很認同,就技術面你要對他做嚴格的批判,我也都認同,
    但是你以技術論點過度解讀來去批評一個站的好壞
    實在沒有立論基礎,我要表達的就是如此

    試問你對這類型房仲網站”最基本品質”或是”最重要的要素的是什麼呢?
    你可以跟身邊從事不同職務的人討論看看,相信會有不同的答案,這也是我想要跟你分享所謂”跳脫技術人的角度去評斷一個網站”的主要想法,而所謂”跳脫”是要以更全面的角度去評論並沒有說要捨棄技術

    當你上一個房仲網站你最在意什麼? 物件的正確性? 操作的便利性? 就我的觀點,符合使用者的需求才是網站成功的第一要素

    換個角度想想為什麼”網頁標準化”的推廣會那麼無力?
    因為他並不是站台營運成功的必要條件,很少老闆願意在這塊投入太多資源,會賺錢的講話才大聲,現實就是如此

    • To YC,

      事實上,我很認同你所說的最後一段,因為我所看到的現況也的確如此;另外還有就是,每個人對於網站的基本品質有不同定義的這件事情。毋庸置疑的,如果要更多不同領域的人來提供意見,一個好網站的定義顯然不只我所提到的這樣。

      但是網站的本質就是網頁,作為網站主體的 HTML 與如同衣服般的 CSS 似乎是不可或缺的部分(當然我個人是覺得裸體也很不錯);如果想要讓使用者順利的搜尋到所需的資料,PHP 或是其他 Server Side 的語言也是非用不可,沒有這些東西,不用說老闆的賺錢需求了,連網站都出不來。

      因此,如果我將作為基本的 HTML 與 CSS(PHP 不可能看得到就無法多談)視為樂屋網甚至網站的基本要素並不為過。 ;)

      沒有 HTML,就沒有網頁;沒有網頁,再多的好點子與行銷都是徒勞。

      不過很多人都覺得,HTML 跟 CSS 好不好,根本感覺不到也不會嚴重的影響網站好壞,講網頁標準化、講無障礙、把一小撮人的利益當一回事,根本都只是對網站沒有實質幫助也不會賺錢的學者論調。

      真的是這樣嗎?

      講技術也許太遙遠,我們就拿建成屋來當做例子比喻這件事情。

      建成屋的鋼筋長什麼樣多數買屋的人其實都看不到,房子好不好、賺不賺、評價高不高,跟鋼筋弄得好可以說是沒什麼直接關係;至於房子本身有沒有無障礙設計,若不是買屋的人或是買屋的人的親朋好友本身有不方便的地方,一般也不會特別考慮。更何況標榜無障礙的房子難找就算了,自己想要弄成無障礙環境還要費一番功夫,工程浩大不說,改造的花費也很可觀,住起來說真的也不會有特別幸福或是財運滾滾來的感覺。不過也有可能會有幾種情形你會熊熊發現鋼筋或是無障礙的重要性:

      • 什麼時候人們會關心自己的房子鋼筋好不好?通常是發生天災人禍住家毀損想要求償或是找出責任歸屬的時候。
      • 什麼時候人們會關心自己房子的無障礙設計?通常是自己或是家人發生意外或生病行動不便的時候。

      在不需要它的時候,會覺得這都是種無謂的浪費;當迫不得已需要它的時候,才會感嘆早知道。

      HTML 就像是網頁的鋼筋水泥,但幸運的是,就算做得很不好,也不會造成人們生命財產的損失;頂多浪費使用者的頻寬、浪費使用者的時間、浪費那些為了提高 SEO 所做的開銷、偶爾讓使用者抓狂。不過這些狀況在很多人的心中,跟有形的廣告收入和金錢比起來,其實也算不上什麼,不能用的反正只是少數例外的人而已。

      • 因為習慣網路,所以對不習慣網路的使用者行為一概不列入考慮。
      • 因為網路頻寬總是又快又穩定,所以對網路太慢的使用者都視為例外。
      • 因為永遠都在正常甚至是更大的螢幕上看網頁,所以螢幕太小或解析度太低一概列入少數例外。
      • 因為有 Flash 又有 Javascript,就把沒有安裝 Flash 不打開 Javascript 的人當成怪咖。
      • 因為都是用滑鼠,就把那些用鍵盤瀏覽網頁的人當神經病。

      不管這些在當初樂屋網所認定的「少數例外」實際上究竟有多例外,終究都只是突顯了開發人員的偏見與敷衍了事(我不想認為開發者對這些技術不了解);而這些敷衍了事所造成的問題,就像鋼筋與無障礙設備一樣,只有遇到的時候才會怨嘆。就像我每次要用天空影音找我想要的 Michael Jackson 音樂來聽時,就會對天空那種對連結標題截字又不加上連結 title 的行為發出二十字經的怒吼。

      天空影音搜尋 – Michael Jackson

      天空影音 - Michael Jackson 的搜尋結果

      這些東西雖然可以說是無障礙,但同時也影響到易用性,就算我不是視障朋友都會很想打人,加個連結的 title 不用多大功夫,但是如果開發人員良心不足沒有加上去,有時候就真的會令人抓狂想拍桌大罵。

      奇怪的還有,既然我們認為 PHP 甚至 JavaScript 的開發人員有責任要確保程式無誤並且要有最基本類似 try catch 的 error handling,何以撰寫 HTML 和 CSS 就覺得不用要求?更遑論 HTML 要做的事情可是比 JS 和 PHP 來得單純許多。

      1. 把<h1>加到主標題,<h2>加到副標題這件事情,就算我用手一個字一個字打也不用兩分鐘,但是有了它,對提高 SEO 就會有實質的幫助
      2. 沒什麼特別理由,不用花額外的時間在外面多包一個<span class=”xxx”></span>或是<div class=”xxx”></div>,只需要直接在 ul 加上 class=”xxx” 就可以了,字打少一點,時間不但省一些,網頁的負擔也會少一些。
      3. 把裝飾用的 icon 或是圖檔集合起來變成一張圖一起壓縮,花不到十分鐘,圖檔 size 變小、數量減少,loading 跟 request 也會相對減少
      4. 把字還原回來,圖檔用 CSS 來取代,花不到三分鐘,就算沒有圖也看得到字知道該怎麼用
      5. 就算一定要把圖加在網頁上,也請在圖檔上加上 alt=”find result” 之類有意義的人話,這不用一分鐘就可以加進去了
      6. form 的 submit 按鈕請使用 submit ,不要用 button 或是 image 的類型來當送出按鈕,想幹什麼別的事情,請交給 JavaScript
      7. a 連結加上 title,讓使用者可以不用點連結就可以知道連結的內容,說真的也不用花什麼時間,而且加了就算截字也不會讓人想拍桌。
      8. 上面的事情都做到後,想寫 JavaScript 之前 HTML 寫完記得先花兩秒鐘驗證你的 HTML,有錯的地方就把它修好,舉手之勞讓你的 HTML 看起來更環保

      這件事情既不難也不麻煩,如果有任何開發人員跟別人唬爛說這個很麻煩、那個很費工、哪個又花時間成本超高,我建議你要嘛送他去進修,要嘛就把他辭掉。今天如果叫一個 PHP 工程師把不該出現的 Error 修好,他跟你說這個很麻煩、那個很費工、哪個又花時間成本超高,你難道摸他的頭這樣對他說嗎?

      「我能夠理解你的困難,那就不要修繼續給他 ERROR 到天荒地老吧!」

      就算應該要從多面向的看待一個網站,但東西寫錯跟格局應該沒有關係;今天如果瀏覽器學 PHP 那樣,處理 HTML 的時候遇到 Warning 就會出現 log,遇到 Fatal Error 就會網頁掛點,我相信每一個人都會乖乖把 HTML 寫對而不會理由一堆。

      瀏覽器給大家方便,不代表開發人員也理所當然要跟著隨便。我認為這是作為一個開發人員最起碼的專業道德與良心。

      網頁標準化和無障礙之所以難以推動,不盡然是因為很難實踐、做起來又很費工、不符合成本效益;我倒覺得對單純到猶如脫光光給你看的 HTML 做出不符合事實的擔心與憂慮恐怕才是這件事情窒礙難行的最主要原因。既然不認為寫 PHP 不出現 Fatal Error 叫做增加成本,我同樣也不覺得把寫出來的 HTML 寫成對的會變成成本。

      樂屋網的事件反映出的並不只是樂屋網自己的想法,而是在台灣這塊土地上許多人內心的疑問與 OS,我相當清楚,你只是代替其他有同樣想法的人,說出心裡的疑惑與質疑而已。

      不過從結果來看,不管是不是 PChome 或是樂屋網的工作人員,我都希望大家能夠正視到樂屋網對過去的錯誤作出全盤修正的成果,至少樂屋網選擇用對的技術來修正當初所呈現的諸多問題。光是這一點,我覺得任何人都應該給予高度的肯定,更重要的,是要從樂屋網的處理方式學習到正確的態度。

      遵循網頁標準寫出正確而且合理的 HTML,順便幫連結加 title,幫圖片加 alt 並不是高不可攀的深奧技術,而是一件最起碼該去做好的事情。

      最後,我很同意用這些理由來說之前的樂屋網不是個好網站有偏頗之虞,所以我決定改成:之前的樂屋網是個品質不佳的網站。(但現在的品質已在水準之上

      PS. 雖然我並不是在詛咒人們,但是我常在想,難道非要等到自己感受到不方便了才能夠了解到這些細節的重要性嗎?
      PS. 只要回頭看看留言,真的蠻多人會替樂屋網之前的做法想原因和理由以及困難點,雖然說這樣也不錯,不過我的重點其實一直都在於開發人員的良心啦~XD

  11. 真的是很貼切的一篇文章,看完了你的內容,我知道我明顯的不足,需要再加強的地方很多,原來自以為的了解標準化,實際上什麼都不是,需要再加油的地方太多了。感謝版大的這篇文章。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s