MSN.com改版,翻譯自Stopdesign

伴隨著微軟對新搜索引擎 作出的努力, MSN 也出現了一些十分重大的革新。之所以重大, 并不是因為它的新外觀, 也非因其試圖把Google擠出頭號搜索引擎的multi-million-dollar ad campaign 。之所以重大是因為其主頁架構體現了對Web 標準的大步邁進。

現在請記住, (在我看來)MSN的新視覺設計是比較庸碌的。它單調乏味，四四方方。(不要怪責那位設計師吧,假如有的話。) 看起來它就像是直接從產品經理的草稿中直接就跑到編碼人員的手中一樣。頁面的設計當然沒有提供什么新穎或創新, 而更像是在模仿 Google 和 Yahoo, 明顯在嘗試急起直追。(也許有人或說 MSN 的設計, 尤其是頁面最上方的部分, 有一點太新奇?？雌饋硐褚粋€Yahoo的 pointy tabs根Google簡化模式混合起來，讓人感覺迷惑的模仿。搜索頁面的簡化版本 太簡單了, 看起來好像還沒有完成。

除去沒趣的外觀設計, 我看到了一些值得提及的有趣事情值得引起重視:

XHTML 1.0 Strict

不但新的 MSN 頁面可以當之無愧的炫耀它的 XHTML 1.0 Strict 文檔類型聲明, 而且跟它一起制作的主頁— 在寫作本文的時候— 僅包含了28 個驗證錯誤,(*譯者注:翻譯時已下降到8個),而搜索頁面僅包含1處錯誤。不完美, 但是跟過去幾年創立的大網站來說就更接近完美了。絕大多數的驗證錯誤都是簡單而易于更正的問題。然而廣告所使用的IFrame將成為一個問題:XHTML 1.0 Strict 中不允許它的存在。

CSS 布局; 更清晰的語義

這個新站點與眾不同也因為它使用了CSS來進行頁面布局和提高了語義的清晰度。使用了眾多的標題和無序列表。適當的使用了一個表格來顯示股市匯總;另外一個可能是一個 legacy ad 系統的一部分。

升級信息

一個某程度上不存在偏見的 (或者說: 不是完全以 IE 為中心的) 耐人尋味的升級信息會在CSS不可用的情況下顯示在主頁的上方:

為什么 MSN 看起來會像這個樣子?


您的瀏覽器無法找到我們的樣式和外觀表現信息。如果您愿意，可以繼續使用這樣的頁面，或者可以升級您的瀏覽器到最新版本。如果您正使用 Internet Explorer, 請轉到Microsoft Internet Explorer 網站來安裝其最新版本。如果您正使用其它的瀏覽器, 訪問您瀏覽器的網站以獲取更多信息。

樣式切換

一個比較突出的功能，使用了一個簡單的客戶端樣式切換器來讓用戶在藍色和白色主體背景中進行選擇。

手持媒體設備類型

查看在主頁中的包含的樣式表 , 您會看到用了一些@media handheld {} 來為手持設備定義的規則。像這樣的規則:

@media handheld {

  #sitenav,#content1,#content2,... {float:none;}

}


可以禁止很多的浮動對象?？吹较筮@樣大的站點也開始考慮手持媒體設備真是然人鼓舞。這樣是有道理的, 尤其是隨著像PocketPC這樣的平臺流行。希望說明PocketPC Team正是這些手持設備類型背后的有力支持。

然而, 我注意到很多單獨使用的@media handheld {}, 僅僅包含了一條規則, 而不是使用分組來包含所有的手持設備規則。奇怪?？聪乱稽c。

動態樣式表

使用請求字符串(Query string)來指向他們的樣式表，這樣做很明顯說明動態腳本在背后運作。 動態生成CSS的其中一個副作用就是樣式表里幾乎所有的空白字符都被去掉。這讓它很難使我們讀懂, 然而他們還能很容易升級(也可能是因為要根據不同的瀏覽器生成不同的樣式)。這可能就解釋了為什么每條@media 容器僅包裹著一條規則?？赡軐Σ煌拿襟w類型，規則會被標記，而現在樣式表還沒有把可共用于的各種媒體設備的規則分組這樣的邏輯。 (譯者注:據本文的反饋，這是因為Microsoft PocketPC 上的Internet Explorer對于處理@media 的規則存在bug, 僅能解析一條規則，因此要分開書寫。)

Input 按鈕輪廓

不要假定所有的瀏覽器都允許對 input 按鈕進行完全的操縱。如果這樣, 我也受過這樣的苦頭, 你的按鈕最后會變成這個樣子 (在 Safari 中):

IE5/Mac 被忘卻在角落

我不太肯定 MSN.com 在經過更新和改進的MSN for Mac 瀏覽器上看起來會是什么樣 (僅可用于 MSN 訂閱者)，幸好有Tantek 當他還在 時幫忙測試。只需要在IE5/Mac里頭看上MSN.COM一眼, 有一件事情就清楚了: 看來完全沒有在意新的MSN站點在IE5/Mac上看起來會像什么樣子。天啊。

在explanation of benefits of the new MSN 的鏈接里把“更快的加載時間”列為最大的新功能。不太肯定老的那個HTML文件的尺寸是多少, 但如果能比較一下就太有趣了。

更新: Some of you may be interested to know that folks from the MSN team have definitely seen this page, and are aware of the feedback, compliments, and criticism. See Venkat’s comment below for more info, and a link to a new MSDN blog where Venkat provides a few thoughts and asks for feedback.

原文 Posted at 11:00pm in CSS, Web