微格式?


首先为人设计,其次才是机器,微格式是建立在既存的、被广泛使用标准基础上的一系列简单、开放的数据格式。并不是为取代现存机制,微格式希望解决类似适应现在的行为和使用范式等首要问题(如 XHTML,blogging)。
它是:
对数据的一种看法;
针对格式的设计原则;
与语义化的 XHTML 高度相关;

它不是:
一种新的语言;
无限扩展和漫无边际的;
一种新的方法摈弃既有的工作机制;

微格式的本质:
解决一个特定问题;(如大家都用同一种标签格式写简历)
尽可能简单地开始;
设计先考虑人,其次才是机器;
重复利用广泛适应标准的建造组块;
模块化/可植入;
能够并鼓励分散的开发、内容和服务。
比如,wordpress 中右下角一般默认的有 XFN,就属于微格式的范畴。更多介绍:http://microformats.org/about/

标签:

By sike On 2006年10月6日 星期五 At 00:17 | 0 Comments

Q 标签的跨浏览器问题

由于 IE 无法识别 q 标签,如果你想通过类似 <q>“所有你说过的话,你正在说的话,和你打算说的话,别人都已经说过了”</q>的方法来显示引用别人的话,并让它在多数浏览器下表现一致,可以在 CSS 中定义:
q:before, q:after {
content: "";
}
这样,较聪明的类似 firefox 之类的浏览器就不会输出引号,和 IE 下表现一样了,参考文章
用 css 做网页的过程就像搭积木,而解决跨浏览器的问题就像“打鼹鼠游戏”。

标签:

By sike On 2006年9月29日 星期五 At 00:38 | 0 Comments

读后感

DMMT看完了,刚好另外几本有关可用性的书也看过,就把有关可用性与易用性方面的想法总结一下。在国外,现在一个可用性方面的工作人员,工资一般比设计师高,它隐含的逻辑可能是:会做什么本身并没有什么了不起的,关键的是知道不去做什么。
好看和好用并不矛盾,好用是属于 must to have,好看则属于 nice to have。
关于把屏幕上的文字去掉一半再去掉一半,这让我想起以前看梁实秋的散文,他提到自己的中文老师在教他们写作时的建议:当你不知道一个句子是否该去掉的时候,说明它已经该去掉了。
此外是书中提到的一些东西,比如下拉框无法很好的分组的问题,其实可以通过optgroup这个标签分组,只不过很少用到。另外关于那家已经倒闭了的 etour,现在 Firefox 有个类似的插件和它的功能相似:stumbleupon,会向你推荐一些好玩的站点。然后是 css 方面的,撇开加快了下载速度,事实上 css 在使网页变得更易使用方面所做的贡献并不明显,而诸如 label、accesskey、alt、title 等 html 标签(或属性)在使网页变得更友好方面所起的作用更大。
提高网站的可用性,尽量不让用户多加思考,并不是把用户想像成白痴(比如,想一下他们正在上大学,接受教育,尽管之前受过高考的摧残),而是多考虑人的弱点(这种弱点有很多,比如同一时间,人的关注点只能有一个,现在我写这篇文章的时候,我的关注点就全部在光标闪烁、文字录入的地方,关于人为什么同一时间只能有一个关注点,心理学上有具体研究。其中一个假设是进化的产物,想一下连体婴儿或双头动物,当遇到危险时,即想往左跑又想往右跑情况会有多糟糕)。或许正如 Jef Raskin 所说的:有时候,让人适应电脑比让电脑适应人相对简单些。
有时候,为了可用性,你可能要把一个链接去掉;而有时候,出于商业考虑,为了 PV,你又想保留这个链接。这得平衡。
改善用户体验,不止在界面上做文章,也包括服务器后台方面的工作,想一下一个经常挂掉、暂停服务的网站,能说它的用户体验好吗?
以上所有这些都在说,维护好一个网站不容易。
最后,感谢代序老大买的书。

标签: ,

By sike On 2006年9月7日 星期四 At 22:26 | 0 Comments

HTML Emails

htmlemail_toodou关于HTML Emails是否有必要,每个人的看法不一样,而关于HTML Emails如何制作,在HTML Emails - Taming the Beast一文中,作者列出了一些自己的看法:
例如:
1. 在邮件的上方或左侧包含展示自己、引起其它人兴趣的东西,可以是邮件的内容摘要甚至企业、组织的名称。
2. 在发出邮件后,检查报告,看人们对哪部分最感兴趣,让它在下次邮件中的预览框就可见。
3. 确保内容是文本为主,所以默认是所有接收者都可以看到。
而邮件内容布局是以 css 还是 table 为主,最好的解决办法是在不同的邮件服务端测试,可以参考这篇文章:A Guide to CSS Support in Email
同时,在邮件中最好包括:
1. 退订的链接,让接受者尽可能容易地退掉不想要的东西,推荐一键式的退订;这一点我收到的 uuzone,toodou, donews的邮件中都没有做到,而且都不是主动订阅的,注册默认接收,其中 toodou的邮件在 gmail很难看,只好把它 spam 。
2. 公司的名称和地理位置

标签:

By sike On 2006年6月11日 星期日 At 16:25 | 0 Comments

表单大全

http://www.formassembly.com 收集了许多关于表单的模板与资源,表单是网页设计中很重要的一部分,国内做的较好的如支付宝,确实是State-of-the-Art。尽管 css 可以让表单千百万化,但在一些隐私的信息的填写上,还是保持表单原来的样子好一些,因为用户已经习惯了表单就是那个样子,尽管看起来丑了点,太炫了只会扰乱用户的填写。

标签: ,

By sike On 2006年6月8日 星期四 At 22:34 | 0 Comments

别忽视了title属性

原文在:http://www.mondaybynoon.com/2006/04/10/dont-neglect-the-title-attribute/
我们一般会嫌title过于麻烦而省略掉,作者从usabilitySEO的角度谈了这个问题。

还有这个也值得一看:Top 10 CSS Tutorials,先收藏了。

另:继上次有女生问我“听说,你胸口上有颗痣?”后,又有人说我最近写的东西一点也不好看,有点心智不清而且有打肿脸冲胖子的嫌疑,明明没读几本书还要在那文绉绉,我承认,因为最近在做的事与毕业要做的基本没什么关系,而我却还得为此抓狂。或者说,blog是个屁,谁都别装b。那这句话本身呢?

标签: ,

By sike On 2006年4月17日 星期一 At 11:05 | 0 Comments

Msn spaces 的与众不同------纯粹从网页制作的角度

摈弃其它元素不谈,比如与msn挂钩等等。spaces在纵多的BSP(blog服务提供商)中的设计无疑是最专业的,如果你浏览过5个以上的spaces就会发现,它们有一个布局上的原型(或者叫共同点):圆角的使用,就如我上一篇翻译的文章中提到的,这种圆角的大量应用,在视觉上使内容分块,这一块是照片,那一砣是简介,下面一砣是友情链接。这种泾渭分明感使观众能很快找到相应的内容。这一点我想可能受到传统排版业中的"格式排版"(grid systems)的影响。
而spaces又是如何在差不多只用一种布局方式的情况下做到不使页面显得单调、呆板的呢?聪明的你一定猜到了:颜色。每一类颜色对应一类形容词,不管你扮深沉也好,装可爱也好,还是假装清纯也罢,spaces基本都能满足你想要的感觉,当然,这些感觉都是由颜色派生而来的。
此外,为了消除单调感,spaces中也大量运用背景图,其中分两种:一种是无缝拼接,一种是整张的大图(在实现这种背景上,css显得易如反掌,就如flash在视频方面的优势一样)。背景图与前景色的搭配,哇靠,spaces的模板设计人员想得真绝,像我以前提到的“巴纳姆效应”,想想看,一种设计原型包含了让所有人都喜欢的成份,这是多么可怕,又是多么聪明,特别是在blog这种多用户模板上。大小通吃啊。而这对设计人员来说也是一种福份,修改起来很容易,这与程序设计中的面向对象观点(oop)也是相一致的,把一些共有的特点归入父类(在这里表现为布局),而把一些特有的,个体表现不一样的特点归入子类(在这里表现为颜色)

更新:一直很好奇,为什么没有像样的wordpress做为后台的BSP?毕竟wordpress是一个出色的,自由度很高的blog程序。而那些已有的不是不稳定就是太过吝啬,如wordpress.com,donews。

标签: ,

By sike On 2006年1月16日 星期一 At 09:57 | 0 Comments

我们为何钟爱圆角

原文地址
作为一个界面和图形设计人员,我们都为圆角着迷。网页开发人员则 更远,籍由CSS的创造性应用(有时是javascript),他们很容易做出特定的圆角。在CSS3规范的提议中,更包括了圆角的属性(Firefox已经支持它)。
那为何我们会如此迷恋圆角?我尝试从美学的角度来解释,并希望有所延伸。
首先,我想我们会被以按自然界有机规律形成的东西所吸引。以iPod为例,类似产品的工业设计会给我们提供一条清晰的线索,指明它是如何而来的。Apple发了很多精力来创造一种产品,使它看起来更像是由树上长出来的而不是在工厂里组装而来的。他们不惜重金努力隐藏产品身上的“机器”特征(比如,螺丝钉)。这导致一种顺滑的感觉,同时没有生硬,或是棱角感。这种“顺滑感”不仅实现了可用性,同时在人与产品之间建立一条情感纽带。我们的一些早期记忆依赖于那些并不完美、普遍地带有直角的事物上。边角像在说“滚”,伴随着"hoaky"的声音;平滑,圆角则更像在说“抓紧我”。
除了物体,传达信息和使信息在一个更有组织的上下文关系中也有同样的诉求,不仅仅是盒子和直角。当我们介绍一系列复杂的内容,特别我们对此还不熟悉时,我们首先做的就是浏览全文,并尽可能联系上下文。“这砣内容和那个标题有关。这组按钮显然和那块内容相关。”等等。
作为内容建构和交互设计人员,我们的许多作品致力于使用户对内容建立一种认识并会控制它们。换句话说,我们提供给用户视觉上的线索引导他们顺着眼前的界面提示应用上下文关系。圆角则非常适合干这种事。圆角是一个清晰的线索,使杂乱的内容泾渭分明。当设计人员使有纯色时,上下文关系会更明朗:由颜色重量和体积衍生的幻想。
所有的解释(我上面的胡说八道)有一个共同的特征:它们在我们常识,我们在物理世界中如何与物体相协调并使用它们,起到杠杆作用。世界是由一系列离散的、拥有自身完整性、同时与其它事物截然分开的物体组成的(以一个大充汽球为例,它明显是特有的、与其它事物无甚瓜葛。)有些物体甚至有可控制部分允许你掌握它们。烤面包机上的把手,附属于你的烤面包机,很明显用来控制你的烤面包机而不是冰箱。
圆角被证明是一项“专门技术”,我们支配与使用它与周围世界交互。我确信这不仅仅是美学上的需求。当我们合理利用时,通过这类设计可以创造出直观的体验。

补充:以前老抱怨课本上一些翻译而来的文章不说"人话",自己去做,才知道要说"人话"挺难的。

标签: ,

By sike On 2006年1月15日 星期日 At 04:31 | 0 Comments

quirksmode.org

QuirksMode.org is the personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands. It contains more than 150 pages with CSS and JavaScript tips and tricks, and is one of the best sources on the WWW for studying and defeating browser incompatibilities.

quirksmode.org

标签:

By sike On 2006年1月12日 星期四 At 11:25 | 0 Comments

把源码渲染成图形的firefox插件

sh(点击图片下载)这里有关于html标签的一篇文章,结构化的标签利于阅读,便于修改。

补充:还有一点,语义明确的标签为搜索引擎所喜爱的。如果你看过《战争之王》,可能会记住这样的话:军火生意有三种,一种是白色的,一种是黑色的,还有一种是灰色的,我最喜欢灰色的。
类似的,SEO(搜索引擎优化)也有两种,一种是黑色的,一种是白色的(xhtml+css),而黑色的,你当然知道我在说哪一种。
06.1.16

标签: ,

By sike On 2006年1月6日 星期五 At 11:02 | 0 Comments

为什么要"web 标准"的十条理由

1,让你看起来更专业
其它的开发人员和潜在客户看到你的作品,知道你紧跟技术的步伐,确信你的知识和技能是当下的。这使你看起来更像搞网页的专业人士。
2,让你的客户看起来更好
使用网页标准联合为了易用性而做的最好实践,让你的客户有机会谈论他们是如何迎合所有人,同时意识到所有人都可以找到有关他们产品信息的重要性。
3,使潜在的访问用户最大化
4,快速下载减少代宽占用
5,提供基本的可访问性
虽然不能让所有身体有不便的人都能访问,但这是开始。
6,提高搜索引擎队列
搜索引擎喜欢组织结构良好的网页
7,使你的代码更易维护
这点好像引来最多的争论
8,前瞻考虑
谁也不能保证今天我们创建,储存的电子内容在100年后还是可读的?甚至50年后都不能。但是如果你用现在的网页标准使内容与表现分离,那你已经尽力使你的内容在你走后可以被别人阅读。
9,很好的商业体验
更多用户,更快速度,更多被搜索引收录,潜在的更好的公众形像。
10,这是正确的做法
原文--->
延伸阅读:
1,原文评论
2,大家对 Web 标准的认识和我的不同

标签:

By sike On 2005年12月7日 星期三 At 02:47 | 0 Comments

css拥趸VS flash牛人

在过去几年里,我注意到,像我一样搞网站开发的同道中人被一个问题所困扰。许多开发者如此注重css的合规还有开发了很酷的flash但却忘了为什么要建立这个站点。我之所以指出这两组开发人员,是因为,css拥趸和flash牛人(FWA-Bombshock-School-of-Heavy-Flash developers ) 面对同样的情况:狭隘的眼光。这两组开发人员都倾向于管中窥豹,把目光放在了工具上,而不是最终用户。

先从css拥趸们谈起
如果你曾经和这样的人探讨网页设计,他们立马会让你有这样的感受:除非你的站点吮吸了“符合标准”的精髓,不然,它们将是低劣的,呈现缓慢的,因为你的代码是“发福”的。谈话的中心也会转移到找出适当的方法使那些被打入冷宫的浏览器正确地显示css规则上。他们的信条(这一信条通常会改变)是,内容与设计的分离是现阶段最好的实践。尽管我也认为使开发团体朝网页标准的方向发展很重要(请不要误解我的意思)。我更认为这一发展方向是许多人变得过分注重代码而忘了为谁而建立站点的诱因。让我们看清楚,实际上,一个用css的页面呈现出来比用表格的快了0.23秒对于普通用户(Joe-consumer)是无关痛痒的。当我的母亲到一个站点查看天气的时候(顺便说一下她已过耳顺之年),她是不会查看源代码然后想------嘿,这些老古董,他们是用表格建了这个网站。不,她不关心这个当她知道了明天是否要下雨。现在对开发者来说,维护一个全表格建成的站点或许更难了,但这对用户来说去无所谓。css拥趸们需要回到现实中来,更多地关注最终用户而不是代码。没有什么比那些使用网站的人更重要的事了。没有!我们是为了人们可以使用那个网站才发钱建立它们的。在我们做出一个站点如何设计,如何编写代码的决定之前,我们首先应该回答一个问题:这些决定会使站点对用户更好吗?

再看flash牛人
现在我不得不承认我自己也陷入了这一类之中。我过去因为制作了冗长的,带动画的flash内容而为人们所熟知。我敢保证以后我会继续做许多这种“出彩”的东西。惟一的区别是:现在我获取flash内容的方法与过去不同。现在我在flash内容上的决定是由我的目标受众的需要驱动的。我不会制作为了flash而flash这种鸡肋似的flash。是的,有一些特别的项目需要我制作下载动画和燃烧的图标,仅当目标受众是想要这一类的东西之时(比如:游戏站点,广告宣传,艺术片段等)。flash开发者与css拥趸受到同样问题的困扰。在项目建立之前,从不考虑目标受众想要什么。许多获得 Ultrashock BombShock Award或FWA奖的站点极其难以使用的,同时就算在宽带的条件下也会让人等到花儿也谢了。难道最终用户真的愿意下载一个600k的打开门的3D动画?然后再经由此门打开或进入导航界面?我想对许多类似的问题说不。这很糟糕,许多flash开发者没有意识到这个问题。就像我们的css拥趸一样,我觉得他们迷失在自己狭小的世界里。在这个世界里,他们动用“很酷的原材料”做着有背商业逻辑以及不符"地球人都知道"的常识东西。

我的建议:
有人曾经跟我说过,建议就像马屎,经常放出来,却鲜有人要。这个建议可能也会受到同等的待遇。但好的网页设计师们至少要这样:

对于css拥趸:
伙计们,摈弃标准情节,多考虑一下用户的感受吧。发40%或更多的时间在一个项目上仅仅是为了让它在老版本的Opera上能正确显示它真的能使最终用户感到高兴吗?或许当用户刚好用Opera的时候会,但这并不多见,如果仅仅在公司内部,IE6.0就是标准了。运用常识,在觉得对你的最终用户有意义的时候使用css,而不是为了你自己。

对于flash牛人:
是时候长大成人了,毕竟,你“可以”并不意味着你“一定要”。每当你在flash中制作了一个搞怪的下载动画或是先锋的界面时,你需要想一下这是否必要。最终用户会受益于此吗?如果不会,那你在很早之前,当这个项目还在准备阶段就应把那一部队剔除出去。每段动画和出彩部分应该为整个项目和最终用户带来某种价值。

最后的想法:
我想那些设计团体需要出去透一口气。或许每人都该放一周假,考虑一下,他们为谁而建的网站?你是为20几岁的年青人而建吗?你的目标受众是小孩吗?我不清楚,但你却要。然后开始为他们而不是你自己设计项目。

来自flash99%good,原文,转载请注明出处,:P

标签:

By sike On 2005年10月11日 星期二 At 03:17 | 0 Comments