采访日期：二零零四年一月九日。
几个月前，当 Lee Jeans 的 onetruefit.com 刚刚出现在人们的眼前，就立刻引起了我们的关注。我们对采用 Web 标准的众多技术站点已经司空见惯，但这第一个采用 Web 标准打造的时装网站还是让我们惊喜不已。多谢 Ryan Carver，节后不久(2004.01.09)，我们采访了他。
Ryan, 你在 onetruefit.com 的创建中担当什么角色？
网站的所有平面设计和编程。
是你说服了 Lee Jeans 采用基于标准的设计方案的吗？你是怎么做到的？
这个网站的主要目的是为新款牛仔裤做宣传，因此搜索引擎排名显得至关重要。初稿出来以后，我面临很大的压力，为了能更好地与“搜索引擎兼容”，就必须要做些改变。之所以强调这点是因为必须要把一些图片文字转变成真正的文字（这会破坏原来的布局），还要给图片加上 alt属性。
说服工作当然要做，此外我还演示了怎样让针对搜索引擎做了高度优化的网页，仍然保持原来的设计风格。我解释了语义清晰的网页带来的好处，并且让内容出现在页面代码的上方和 CSS。一旦他们相信可以做到两全其美以后，唯一的难点就是如何兼容各种浏览器。
从前 Lee 公司的网站都是兼容4.0版浏览器的，但是现在使用这些浏览器的越来越少，大概只有1%左右。虽然 1% 的用户看到无样式内容（仍然绝对可用），但相比之下，我们认定搜索引擎带来的好处更为重要。
“... 你一定要从商业利益的角度向他们解释。”
简而言之，“你如何说服他们”的答案就是，你要向他们解释这种设计可以带来的商业利益，对我来说就是搜索引擎。如果不讲清楚额外的好处，谁也不会在乎你的代码是如何简洁，他们只在乎 1% 的用户看不到你的设计。
那么你是怎么做的？ 你的努力是否在 Google 搜索结果上得到了回报？
我没有做过正式统计，但我知道站点发布几天以后，我们的排名非常高。之前我们有个临时站点，也许有助于排名的上升速度。不过对最终的排名结果还是感到非常惊喜。更不用提我们在“sexy women's jeans”关键词搜索上不可动摇的稳固地位。
这是可以预料的。我们听说起初 Google 索引指向的是无样式的网页，这可不太好吧。从技术的角度上你是如何解决的？怎么向老板交待？
是的，此事有些颇费周折。我首先试过用参数来控制“无样式”页面，起初是?css=false 后来改成了 ?style=false。幸好这个链接没有持续多长时间。其次我在无样式的页面加了一个meta 标签，告诉搜索引擎不要为它建立索引：
<meta name="robots" content="noindex"/>
注意我没有指定 nofollow，因为这个网页上的各个链接还是可以建立索引的，他们并没有包含样式参数。没过几天，Google 就把主页的 URL 改过来了，一切都很酷！
至于老板，在人们还没觉察并告诉他们之前，我就已经悄悄把它修好了。
站点的艺术取向确实很棒，真正抓住了商业站点的感觉。能否透露些幕后的制作过程？
多谢。站点的商业性一直是我的努力方向。新款牛仔裤的品牌推广要经过几个阶段，商业运作是最重要和最后的工作。更有趣的是，我们没有在网站上使用其他商业运作时的照片的权利。呵呵，站点上的每一幅图片都是原始录像带的屏幕截图。（编者：痛苦！）
说到艺术取向，我的主要目标有：
- 展示牛仔裤，
- 与商业站点相匹配，
- 通过营造一种牛仔裤是为真人而做的感觉，很好地平衡了站点的商业气氛。简单的投票和使用感想功能对此有不少帮助。
刚开始使用图片替换，尤其是图片轮换技术的人，都曾有过被 IE6 的闪烁问题困扰的经历。你是如何对付的？
“... 对大多数人来说，这大概算不上什么问题。”
这个问题是由于手工将缓存设置改为“每次访问页面”时都检查更新所引起的，幸好这对你这样的普通用户来说关系不大，而对设计者的影响较大一些。对于 onetruefit.com，我也尽了最大努力，最终还是放弃了，事实上这对大多数人并没什么影响。
最近我对这个问题的原因有了更多的了解。简要地说，闪烁是由下面三个因素之一所造成的：
background-repeat被设置成其他，而不是repeatbackground-color被设置成其他，而不是transparent- 设置了
background-position
如果元素的 width x height 小于2500像素就会引起闪烁，如果图片是透明的 GIF 也会闪烁。这个问题很容易克服，更多信息参见我的站点上的
the gory details。
我们注意到你在站点的所有页面上的 body大量使用了id 和 class，为什么要这样做？
为 body 指定 id 和 class 可以将样式应用到特定页面的任何元素，甚至覆盖整个页面的样式。
我一般用 body 来定义网页的类型（如"home", "internal", "popup"），用 的 id class 定义子类型（如 "products", "contact" 等）。有人可能会觉得应该反过来，因为 id 应当是唯一的。但是请看下面使用多个 class 的例子。
例如，网站内部的每个页面都有 id="internal"，但是 class 是唯一的，就像 class="commercials" 。这样就可以在同一个样式表中将首页和 Commercials 以及 Buy 页面上的 h2 区分开来。
body#home h2 {
/* only the homepage */
}
body#internal h2 {
/* all internal pages */
}
body#internal.commercials h2 {
/* only the commercials page */
}
body#internal.wheretobuy h2 {
/* only the where to buy page */
}
实际上，为避免无谓的下载，首页和内部页面使用了不同的样式表。我还为所有内部页面上的 h2 (大标题) 指定了内联样式来避免下载多余的图片，因为某些浏览器会下载样式表中的所有图片，而不管是否真的用到。
Commercials 页面的弹出窗口是个很有意思的例子，它的 body 标签大概是这样的：
<body id="commercials" class="happyplaceb high">
id="commercials" - 表示网页的特殊性，与 "home" 和 "internal" 不同。
class="happyplaceb" - 当前的促销广告的名字，我用它来找到网页的标题，并且在右边显示缩略图的鼠标经过效果图片。
body#commercials.happyplaceb
#header h2 {
background-image:
url(title_happyplaceb.gif);
}
body#commercials.happyplaceb
#navigation a.happyplaceb {
background-image:
url(thumb_happyplaceb_over.jpg);
}
class="high" - 表示所选影片的质量（高低），我用它来寻找带宽选择按钮，并突出当前的选择。
所以只须对 body 标签作很少的改动，而不用更改别的代码，就可实现很好的动态页面。
你的内容管理系统是如何和代码配合工作的？是否采用了特殊的技巧？
很幸运我能同时编写 CMS 和网站内容，所以这不成问题。采用 CSS 来表现内容使得 CMS 的编写非常容易，同时还可做到模块的复用。
例如，Sweepstakes 广告和 "10,400 Women love their jeans..." 的代码是在同一个地方定义的，但是因为应用了样式，在首页和内部页面上的效果完全不同。通过恰当的 div 容器和 id 以及 class，你可以把代码放在页面的任何地方，然后设置样式。
当然在现实中，如果采用的是流动式布局，必须考虑源代码的顺序和浮动元素。不过你知道该怎么办了。
和 Todd Dominey 的 重建 PGA.com 一样，你也好不容易才把 Flash 与符合标准的代码整合在一起。有什么指导意见？
大多数人认为这是互相矛盾的。通过使用 Javascript 写入 Flash （或者当 Flash 不可用时写入图片）的内容，并且将同样的图片放在<noscript> 标签内，我们就可得到合格的代码以及最佳的用户体验。至于用 Javascript 写入的不合格代码是否还算作合格的网页，你可以有自己的看法，但这确实管用。
你的团队有几个人？
三个：创意总监，制作人和我自己。
是否还有由于某种原因想做而没有做到的？
我本来想把站点的亲和力设计得更好一点。几乎已经接近完美了，不过这对站点的目标对象不是非常必要，我也没有太多的时间。毕竟没有费多大事，就得到了这么好的效果。
对了，我想应该可以修复那个可恶的 IE6 闪烁的毛病。
多谢你抽时间回答我的提问，Ryan。
Ryan Carver 是一位交互设计师，住在密苏里州的堪萨斯城。目前他正在制作充满创意的站点 fivesevensix.com，而且一直想到更有趣的地方玩玩。