顶尖CSS Web设计师Andy Clarke访谈

简单介绍IOTBS之后,现在介绍其中一个设计师Andy Clarke,他是Stuff and Nonsense创意总监。Andy是Web专业领域内不可多得的人才。Andy是多才多艺的设计大师、开发人员和作家,自1998年Stuff and Nonsense立项以来,他一直担任该项目的创意总监。创意设计人员占开发团队的一半,他们在Web站点引入如此独特的样式切换方案。Andy欣然接受我们的采访,并就可访问性、高品质设计以及两者的关系回答了我们的问题。
 

Q:Andy,非常高兴能和您进行一次简短的访谈。您是怎么步入Web设计这一行的?

A:哦,说来话长,我简单谈谈吧。大学毕业后(我学的是美术并获得了学位),我从事过不同的工作,但都与艺术和工艺有关。我是英国第一批从事专业数字相机设计的人,在之前从事数字照片润饰,要知道这时还没有PhotoShop!我的艺术背景使我在工作中总是保持着富有创意的眼光,当我有机会成为伦敦的一名广告创意设计代理时,我抓住了这个机会。
 

Q:在Stuff and Nonsense工作室的客户列表中赫然列出了一些世界知名的公司名称,包括(但不限于)Disney Store UK 和 World Wildlife Federation UK。给人印象更深刻的是所有项目设计清晰,而且都是用XHTML/CSS实现的。为什么要采用Web标准?

A:为什么不呢?我没发现Web标准或访问性有什么问题。我相信它们是使工作能“正确”完成的必要部分。与Stuff and Nonsense客户合作中我学到的一件事,就是他们很少关心工作是“如何”完成的。他们所关心的是如何成功地满足目标用户的需求。

您提到Disney Store UK,公平地说,与大多数客户一样,他们并没要求实现一个与标准兼容的站点。但他们希望减少下载时间,同时使购物过程更快。采用与Web标准兼容的技术实现的设计满足了要求,并完美地达到了他们的目标。

Disney Store UK网站是用Karova Store平台(http://www.karova.com)开发的,这个平台不仅使表现层与站点的其余部分分离,而且采用的XML体系结构而不是以数据库为后台。通过XSLT把XML转换为XHTML,最终结果就得到了一个站点。该站点非常灵活,允许Disney Store UK在将来发布新的内容,包括通过RSS的反馈。现在大多数用户关心的不是“工具”,而是提供给他们的解决方案。Web标准提供了更多的解决方案,这就是为什么Stuff and Nonsense只按Web标准开发。
 

Q:你们所设计的东西那么智能那么小巧。我们认为那就是一个样式表切换器。能给我们介绍一下吗?

A:您是指Invasion of the Body Switchers (IOTBS)吧,就是我发表在List Apart杂志上的样式表切换器(http://www.alistapart.com/articles/bodyswitchers)?我不能把别人的荣誉据为己有。IOTBS背后真正的技术天才是我的好朋友James Edwards(http://www.brothercake.com)。他也是项目组成员,他根据我的创意实现了IOTBS。

Web标准的一个重要方面是对设计人员能力的要求,要求设计人员不更改Web页面的相应标记(HTML或XHTML),而通过CSS实现页面的外在表现。这方面没有比Dave Shea's CSS Zen Garden(http://www.csszengarden.com)做得更好的了,通过使用CSS样式表才可能使该网站的同一页面有不同的设计。基于各种原因,样式表切换是必需的。或许客户希望给访问者提供可在固定宽度或充满整个窗口的“流动”布局之间进行切换的能力——设计师和站点构建者Dan Cederholm在站点SimpleBits(http://www.simplebits.com)中就提供了这样的选择。也可以采取给低版本浏览器的用户提供一个“可访问”的设计。这完全是可能的,有时目标和结果是一致的,有时只是一些讨厌的噱头。

服务器端和JavaScript样式表切换器已经出现好多年了。但Invasion of the Body Switchers与众不同的,它具有在屏幕、打印机和其他媒体样式之间独立切换的能力。所需一切仅是一个CSS和JavaScript文件。我为IOTBS感到非常自豪,我希望它能给更多的设计人员带来方便,这些与标准打交道的设计人员可以扩展他们的创意选择。
 

Q:我们发现它被广泛应用在Stuff and Nonsense 站点(http://www.malarkey.co.uk),你们在其他专业的工程中使用过它吗?这对客户很重要吗?

A:对客户越来越重要的是给他们提供选择。像Invasion of the Body Switchers这样的样式表切换器可以用于给不同的用户群提供不同的设计主题。但用CSS的“display属性”也可以隐藏和显示内容。

这在最近几个针对年轻人的项目中发挥了巨大作用。利用CSS和IOTBS,我们不再需要对一个XHTML文档甚至整个Web网站编写三个或更多的版本。这缩短了开发时间,使我们的工作更有效率,最终为用户省了钱。每个人都很愉快。
 

Q:一些设计人员对用户能从根本上修改站点的设计感到不安。您对他们有什么要说的吗?为什么让我们的用户对页面的设计有更大的控制权?

A:作为Web站点的设计人员或开发人员,我们需要记住是在为谁工作。当然是我们的客户,他们是我们的衣食父母,我们的最终工作是由站点的用户来评判的。他们越满意,我们的客户才能更满意,才更有可能给我们提供更多的机会。

Web与任何其他媒体不一样。对于电视,无论屏幕尺寸是多大,图形都会保持得很好。无论是CRT、LCD还是Plasma,是17"便携式还是52"宽屏,图形的显示效果都是一样的。对于Web而言,情况截然不同。对如何传递内容我们要有更多的控制,Web设计人员必须记住:用户的观点远比设计人员自己的观点重要。
 

Q:在网上闲逛了一会后发现,似乎在线发布了很多样式切换器。其中一些依赖客户端的JavaScript(如您们的一样),而其他一些依赖一些后台的编码。两种方案各有什么好处?

A:现在您问到技术细节了。我只是一个粗浅的设计人员。有很多解决方案可以实现样式表切换器。一些是“服务器端”的(依赖后台语言,如PHP);而另一些如Invasion of the Body Switchers则是“客户端”的,采用的是如JavaScript这样的语言。开发人员选择哪种解决方案取决于站点的运行环境和客户的特定需求。

这只是个人偏好,但由于样式表切换是一个“客户功能”,因此我偏向于采用客户端的解决方案。也就是说,我可以给你一个独家新闻,很快就会有Invasion of the Body Switchers的服务器端版本。

因此我冒昧地问一个问题:您的客户端切换器在众多切换器中脱颖而出的原因是什么?

Invasion of the Body Switchers采用新的样式表切换方案。我们的方案不抛弃常规“样式表”和“备选样式表”语法,但不会给我带来麻烦,因为:

(1) 许多浏览器没有实现本地样式表切换。

(2) 它们没有赋予可选择的备选样式表任何持续性。

其他解决方案使用<link/>元素和“样式表/备选样式表”语法,要依赖多个样式表。这带来额外的服务器调用,但更重要的是不能彼此独立地选择不同媒体样式。

Invasion of the Body Switchers使我们可以独立选择不同媒体类型并给站点用户提供一个简单界面。通过这个界面,用户可以选择他们喜爱的样式,所有选择都被保存到cookie直至他们改变了选择。

IOTBS是通过在页面的<body>标签内添加一个或多个唯一的类名来实现的。然后用后代选择符定义样式。最终结果使用户对Web页面的输出有更多的控制。
 

Q:非常有趣,您提到的“媒体类型”指的是什么?为什么了解CSS的Web设计人员需要关心媒体类型?

A:设计人员不仅要知道他们的工作从每个人的视角看是不完美的,而且还要知道人们会通过不同媒体访问Web内容。对从其他媒体转到Web的设计人员来说,要知道这一点有时是很困难的。有时这个媒体是我们的好朋友——计算机显示器;有时是机场的一个Internet小亭;有时是手提电脑、投影仪、甚至是移动电话。有些人发现在屏幕上阅读很困难而愿意打印出来再看。

在过去,要考虑所有这些不同的媒体类型,在成本上是不允许的,如果实在有这样的需求,则需要对不同的浏览设备设计不同的版本。但利用支持通用标准的技术,我们就可以创建只编写一次的内容,然后针对不同的媒体输出进行不同的样式控制,所有这一切都是通过神奇的CSS实现的。
 

Q:话说回来,我们希望了解有关设计过程更详细一些的情况。您通常是如何工作的呢?

A:首先我们要了解客户试图给他的用户传递什么样的信息。我们还要体会到公司的“个性特点”并考虑公司的品牌价值(即使他们自己并没有这样做),这样我们的设计基调才能与公司的个性特点和品牌价值吻合。有效的Web设计能使客户和他们的用户进行有效的交流。这就是在考虑技术或创意问题之前首先要把重点放在交流的内容和如何交流的原因。

我们首先在纸上开发原型设计,用Photoshop 或Macromedia Fireworks完成从草图到布局的设计。这些布局一开始就是一些简单的连线框,从连线框构建标记指南,这一步通常也在纸上完成。我们的开发人员把标记指南作为XHTML的结构。

在之前我为我们的网站开发设计了一套命名约定,为<div>和类指定名称,它们与内容相关而不是与表现相关(#branding而不是#header,等等)。我们严格遵循这些约定,以便整个团队能理解一个特定CSS规则与哪些内容相关。我们还制定了图像命名约定,这也加快了开发过程。

然后把图纸上的布局转变为设计团队所需的产品,很少出现最终的Web页面与图纸布局不十分匹配的情况。每个阶段还必须经客户批准,我们总是按内部约定框架工作,这样保证了开发是尽可能高效的。
 

Q:那创作灵感呢?面对客户的严格基线,您从哪里获得灵感?

A:我是一个对流行文化非常上瘾的人。我喜欢各种侦探小说,比如Mickey Spillane的MikeHammer。我更喜欢漫画和漫画艺术家的作品,如Frank Miller 的Sin City's和Paul Chadwick的Concrete,这些都给我提供创作的激情。

我分析这些例子,发现它们的共同点都是为了激发用户参与而设计的,因此我把它们引入到不同的地方。我再分析其中包含的信息……并回过来分析Web中的主题。
 

Q:与其他人相比,您更经常遇到一些CSS问题吗?您是如何解决这些问题的?

A:对我来说CSS问题已越来越少,当出现某个问题时,通常通过Googling很快就能找到解决方法。很多人远比我聪明,马上就浮现在我脑中的就有Brothercake、Dave Shea (http://mezzoblue.com)、Doug Bowman (http://stopdesign.com/)和John Gallant。他们找到了解决浏览器错误和行为的方法,有些是我永远也想像不出的。当然,我有时也能修复一个或另一个浏览器中的问题,此时我会高兴得大叫:“用表格这将非常非常容易!”。但这样的情况已越来越少。

现在几乎每个CSS问题都能被修复或存在变通的解决办法。当一个未预料的CSS问题出现时,重要的是采取合理的方案,因为有时一个元素和另一个元素组合时会引发问题。

有效性非常重要,就连打开一个CSS文件之前我总是首先要确保自己代码是有效的。如果我的代码和CSS都是有效的而问题仍然出现,我会依次删除页面中的元素,以发现是哪个元素出现了问题。

许多浏览器错误是众所周之的,现在有专门解决这些问题的网站,如John Gallant的网站Position Is Everything (PIE,http://www.positioniseverything.net)。如果在PIE或其他网站上找不到答案,我建议向Eric Meyer (http://www.meyerweb.com)的优秀CSS-D邮件列表 (http://css-discuss.org)中的专家寻求帮助。只要能详细地描述问题,您很可能会找到解决问题的钥匙。
 

Q:您认为一个“成功”网站设计追求的是什么?您有一些特别好的设计原则吗?

A:我认为我不是评判一个设计是否成功的最佳人选,但我能倾听客户和他们的用户的反馈意见。对我来说最重要的是,该项目能给付我报酬的客户带来很好的经济效益。只有这样他们才能再给我项目。

当我回头再来看我所完成的许多设计时,我最喜欢的是那些更清晰、更简单的设计。没有设计的“仙丹”能把一个内容很差的网站转变为一个成功的网站。因此我和客户一起工作,确保把内容放在首位。
内容之外的工作总比试图把一个硬塞在一起的内容变为预期的设计或布局容易。这就是为什么在考虑设计的外观和感觉之前,我会在站点规划和内容上花更多时间的原因。
 

Q:还有什么需要和我们分享的吗?

A:“当我不知道用什么颜色的时候,我选择黑色。黑色有一种影响力:我依靠黑色来简化构造。”实际上这不是我的话,而是Henri Matisse的。

《CSS Web设计高级教程(第2版)》试读电子书免费提供,有需要的留下邮箱。

  • 77
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 70
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 70
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值