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 {}, 仅仅包含了一条规则, 而不是使用分组来包含所有的手持设备规则。奇怪。看下一点。

动态样式表

使用请求字符串(Query string)来指向他们的样式表，这样做很明显说明动态脚本在背后运作。 动态生成CSS的其中一个副作用就是样式表里几乎所有的空白字符都被去掉。这让它很难使我们读懂, 然而他们还能很容易升级(也可能是因为要根据不同的浏览器生成不同的样式)。这可能就解释了为什么每条@media 容器仅包裹着一条规则。可能对不同的媒体类型，规则会被标记，而现在样式表还没有把可共用于的各种媒体设备的规则分组这样的逻辑。 (译者注:据本文的反馈，这是因为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