Web方面文章推荐与笔记
由于某些问题，个人几乎停止了对网站建设的学习，不过在学习Web知识的过程中，菜鸟遇到了很多良师一般的文章，这里就把他们分享出来。
ALA——A List Apart
ALA是一个关于网站建设的在线杂志。许多的CSS技巧都源自这个网站，许多畅销书的作者同时也为他们写文章。总之，这是一个经典的学习Web的网站。下面是我读过并总结的一些文章。
CSS Design: Taming Lists —— September 27, 2002
本文介绍了如何用CSS来控制HTML中的列表(list)。由于ul经常作为构建导航条的元素，而且在文章中也会反复出现。本文的重要程度不言而喻。
Suckerfish Dropdowns —— November 07, 2003
让你的菜单在保持语义，可访问性，并且符合标准的情况下能够完成DHTML下拉菜单的任务，而且还不用写大段的代码。
Alternative Style: Working With Alternate Style Sheets —— November 02, 2001
一段JS脚本。可以给站点设置替代样式表，让用户可以自己在各个样式表之间随意切换。并且应用了cookie来记录用户的设置。跨浏览器。
The Perfect 404 —— January 16, 2004
讲解如何制作一个提高可访问性的实用404页面。文中的代码将404出现的情况按照有无referrer来分类，有referrer的情况进一步分为是否是搜索引擎。
CSS Design: Going to Print —— May 10, 2002
有了打印机样式表，我们就不再需要单独创建打印版本了。本文中以ALA为例，介绍了一个打印样式表的制作过程。文中提及了Gecko核心浏览器的float打印bug，通用样式表渗透到打印样式表中的问题，背景颜色问题，文字大小，边距，以及打印链接等问题。
The Creative Process —— March 12, 1999
作为一个左撇子，作者建议我们在创新的过程中(例如写文章或做图)抑制逻辑的左脑，怂恿创意的右脑，尽情地、胡乱地、没有停顿的发挥。最后再用逻辑的左脑进行细节修改(拼写、语法、顺序)。
Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 —— January 21, 2008
标题很好的表述了本文的主题：找到一种保证网页向后兼容的方法。
你的网页在IE6中一切正常，宣称更贴近Web标准的IE7到来，却使得你的网站支离破碎。这是谁的错?又是网站开发人员？不！为了避免这种事情再次发生(IE8)，微软已经希望Web标准组织以及熟悉标准的开发者能够“帮帮忙”。本文作者给出的解决方案就是微软提供一种“选择目标浏览器版本”的功能，允许网站开发人员指定浏览器使用特定(老)版本的引擎来解析、显示网站。这样就可以确保新版浏览器的推出不会让bug的修补和新bug影响现有网站。
From Switches to Targets: A Standardista's Journey —— January 21, 2008
Eric对上一篇文章的评论。他的第一反应就是想起过去的“浏览器嗅探”，故而极其反对。当时经过对近年来对Web实情的分析和思考，他认为version target和browser sniffing有一个很重要的不同点——browser sniffing是网站开发者要去适应现在和未来的浏览器，而version target是浏览器设计者要努力去适应网站开发者。当然Eric在对version target的进一步讨论中还是表示了对这种方法是否可用的怀疑。
Invasion of the Body Switchers —— November 19, 2004
切换样式表的的JavaScript代码，实现效果还不错。但是文章对代码的解释基本没用。
Designing For Flow —— December 04, 2007
Flow的感觉就是让用户完全的投入，有遗忘时间，甚至忘我的感觉。要制造这种氛围，要做到如下几点。
- 给用户建立目标。长期目标，渐进的小目标都要有。这样的目标可以帮助用户知道他们在你的网站上最终可以达到什么目的，要花多久，费多大力气。
- 快速的响应。用户做出一个动作，尽快让他们看到反应。
例如Wufoo用户对表单做出修改的时候，预览同时也会改变。
再如Flick的照片上传功能，用户可以看到每一张照片的上传进度。这样就不会有面对传统上传方式时的较早与恐惧。 - 提高效率，不让用户有停顿的感觉。
例如Google Reader的无限滚动，完全颠覆了传统的分页概念。点击Email链接发送给好友，也完全不会丢失现在的位置，没有给用户造成停顿的感觉。
再如BackPack在用户填写日期的时候提供了“最近两周”之类的模糊选项，不强迫用户费心地去想出一个特定的日期。 - 要有惊喜，发现。
例如内容网站，要在侧边栏提供热门内容，推荐阅读等。以后更改在想想有没有其他的惊喜。
Elastic Design —— January 09, 2004
适当地使用弹性布局可以给网站的用户体验和可用性加分。文中提到了以下几点：
- 弹性的文本。可以通过ALA介绍过的alternative stylesheet实现。但是最好使用%加em的方式。
- 弹性布局。em搭配max-width就可以实现。或者使用液体布局。
- 弹性图片。裁剪。
How to Size Text in CSS —— November 20, 2007
如何设置文本相关的CSS呢？本文通过在各个浏览器平台上测试不同的字体CSS组合，得到了文字和行高的CSS的最佳实践：在各个浏览器上显示效果一致，可以调整大小，符合排版要求。
缺点：相对的em使得实际值不好计算。不过可以通过从外形内定义的CSS和良好的注释解决这个问题。
Who Needs Headlines? —— May 29, 2007
标题是用户判断网站内容是否相关的第一要素，好的标题能够吸引访客，让用户确信站点拥有他们正在寻找的信息。
常见的标题书写标题技巧：
- Reveal facts 揭示事实数据
85% of cigarette smoke is invisible - Use “How To” phrases 使用“How to”句型
How to…, 10 reasons why…, and 50 top tips for… - Lead with popularity 领先的流行程度
Over one million people rely on Realline Web Hosting - Ask a tantalizing question 问令人着急的问题
Do you make these mistakes in English? - Focus on the product’s unique selling point (USP) 第一无二的卖点
A USP can be a fact about the product (such as sales history, brand reputation, or product origination)…
The original Swiss muesli
…It can be a product feature (something the product has that no other product has)…
Color like no other (advertising TVs)
…Or a USP can be a benefit (something a product does that no other product does)…
At last, a coursebook that puts you in control of your lessons - Announce something new, free, first, forbidden
- Be controversial 引起争论
There’s nothing fair about fair trade - Break expectations 出乎意料
Heard the one about women drivers? They got cheaper car insurance.
正文部分：
- 把重要的内容放在最前面。直入主题。
- 文本应该是尽量针对个体，或者说是细化之后的群体。
Better Writing Through Design —— July 31, 2007
互联网的本质就是交流，而交流的主要媒质就是文本。因此网站的内容应该是“说”出来的，而不是“显示”出来。
Personas：写作之前先问问自己：
- 谁在访问我的网站？
- 他想知道什么？
- 他想做什么？
然后再用Personas创造“故事”中的人物，可能还要加入其他的角色。
Narrator —— You
人们为什么会先换一个故事？他从故事中看到了一个影子——过去的或者是未来的自己、亲人、朋友……。现在就创造一个影子吧：
- 我希望用户有怎么的感受呢？
- 如何开始一个面对面的交流呢？
More
做站，做人，做专家。让用户(遇到麻烦或者有需求时)希望回来询问你的意见，让用户渴望从你这得到信息和激励。
Your About Page Is a Robot —— August 22, 2006
本文吧网站的about page比作一个机器人，分析了常见的错误，给出了优秀的about page应该具备的要素。
About页面的基本作用：
- 给用户在站点其他位置找到的信息提供一个整体的背景。
- 让你的组织从相似组织中脱颖而出。
- 给用户一个理由，让他们做你希望他们做的事情(例如联系销售商，参加活动，汇款，购买一个小工具)。
常见错误：
- 没有公司的概述
- 大量无关紧要的信息(用户不想知道的都是无关紧要的)。
指导：
- Personas(智慧和体贴)
将可能的访客分类，确定他们想要的，当about页面文本过长的时候可以考虑将写给某一个群体的内容分为独立的页面。 - Human(独特的性格)
谈及组织的组成和服务对象。引用，照片都是很好的手段。别忘了对文本进行调整，要当作一次人与人之间的对话。 - Achievement(激光枪)
使用可以用某种标准来检验的数据或者是简明扼要的事实来证明您的组织的成就。例如通过获得奖项、用例、数据。
Sliding Doors of CSS —— October 20, 2003
Sliding Doors of CSS, Part II ——October 30, 2003
CSS滑动门，著名的CSS技巧，应用十分广泛。其核心思想就是利用两张背景图片叠加到一起，通常是其中比较窄的一张在另一张宽图片上滑动。
Super-Easy Blendy Backgrounds ——November 13, 2006
技巧的核心思想：制作一张有白色(背景色)过度到透明的渐变图片，这样就可以通过仅仅改变CSS实现不同颜色的渐变背景。不过文中的代码有待简化。
CSS Sprites: Image Slicing’s Kiss of Death —— March 05, 2004
核心思想：利用CSS的背景图片定位，使用一张图片来造成多张图片的“假象”。很像Pixy Rollover。这样就再也不需要切片了。需要注意的是不规则图形之间可能有重叠问题，文中使用了三种子状态的方法，个人认为可以把距离拉大。
Reviving Anorexic Web Writing —— July 31, 2007
- 区分Copy和Content
- 利用footer
本文提倡在Web中一定要注重文本质量。文中有很多内容都不能总结，值得再读一遍。
Mountaintop Corners —— April 30, 2004
山顶角，著名的CSS技巧。也是一个限制思维的名字，应该叫Hole Digger或者是Shape Digger。
Faux Columns ——January 09, 2004
Faux栏(列)，同样是著名的CSS技巧，起初是为了实现两栏固定宽度的等高CSS布局，但是现在应经演化成可以制作两栏、三栏的液体等高布局。
In Search of the Holy Grail ——January 30, 2006
三栏等高布局，侧边栏固定宽度，中间栏液体。
Multi-Column Layouts Climb Out of the Box ——February 06, 2007
三栏等高布局，侧边栏固定宽度，中间栏液体。不需要图片。
Never Use a Warning When you Mean Undo —— July 13, 2007
能用undo的时候就不要用没有效果的警告。例如删除邮件，文件。
Paper Prototyping ——January 23, 2007
使用纸来作为制作原型(Prototype)的工具。我个人很同意本文作者的观点，纸更利于解放灵感，而且完全不懂网页代码的人也可以参加进创意的过程。
优点：
- 可以让更多的人参与
- 省力：丢掉几小时的代码是大损失，丢掉几分钟的涂鸦呢?
- 省钱：毫无疑问。
- 文档化更方便。
How to Grok Web Standards ——January 09, 2007
掌握Web标准的含义：
- 内容(Think like a writer)
- 结构
- 美观
CSS Design: Creating Custom Corners & Borders ——December 04, 2003
一篇介绍用CSS制造文章圆角效果的文章。还不错，但是需要添加额外的标签。
Accesskeys: Unlocking Hidden Navigation ——June 16, 2003
一篇讨论给网页的元素设置快捷键，以及如何提示快捷键的文章。
Much Ado About 5K ——May 12, 2000
一次网页设计比赛，内容是把HTML + CSS + JavaScript + 图像等一切相关文件压缩到5K以下。结果产生了众多超乎想象的优秀的作品。
所以我们要竭尽全力地压缩网页的大小。正如作者所：“说条件上的限制正是创意的土壤。”
How to Read W3C Specs —— September 28, 2001
本文介绍了如何阅读W3C的规约。规约的对象是那些想要实现具体技术的程序员(例如浏览器的开发者)。如果你仅仅是想要使用一项技术，那么最好的选择是“用户手册”或者是“参考”。不过如果你想使用最前沿技术的话，你可能就不得不阅读参考了(很可能还没有手册参考)。
Typography Matters —— October 19, 2001
宣传Web排版重要性的文章，文中主要讨论了准确的标签符号的重要性。
Findability, Orphan of the Web Design Industry —— March 25, 2008
We should pay attention to findability.
Night of the Image Map —— December 12, 2003
用语义的XHTML加CSS代替image map的方案。内有解决IE Bug的方法。
CSS Design: Custom Underlines —— February 02, 2004
用CSS制作个性下划线。
Designing for Context with CSS —— February 20, 2004
打印的时候显示独有的信息，要给“打印用户”特殊照顾，通常这些用户都比较重要。
CSS Drop Shadow
使用CSS制作图片(段落)投影效果，需要图片，麻烦。
CSS Drop Shadows II: Fuzzy Shadows
阴影改善版。
CSS Design: Creating Custom Corners & Borders Part II
圆角框2(下载代码)多余标签太多。
Zebra Tables
用JS+DOM实现斑马纹表格。
主要介绍了addEventListener(“event name”, functionName, Bool useCapture),true表示从外层节点到内层节点，else则相反。还简要地介绍了DOM的节点结构。
A Backward Compatible Style Switcher
代码很简洁的样式切换方法，值得研究，有改善空间。
“新窗口打开”的JS代码，谈到了行为与代码分离的问题。(那个库也挺有意思)，等能上网之后要看看。
利用自定义CSS打印网页的方法(需要FireFox)
其它
本文介绍了作者在向CSS Zen Garden所提交的一个设计的整个设计流程。
- 确定目标。
- 分析已经存在的方案。必然发现相似之处与创意所在。
- Paper Prototype。从小到大。
- 排版，字体。将所有的字体放在一页中。
- 图片，从图片素材中照。切出其中的一部分。汗……
- 组合。
- 代码实现。
一篇比较全面的Web标准综述。主要内容包括Web标准的简介，历史，组成，为什么要使用Web标准等等。具体的技术细节包括了XHTML、CSS、可用性以及URL。
Packaging Design for Web-based Products
网络产品需要优秀的包装，文中列出了以下几点包装建议：
有意义的叫卖：叫卖是为了吸引注意力，大字体和颜色鲜艳的按钮是典型案例。吆喝的同时要注意：
- 与众不同：让产品与众不同，却又可以让消费者分类。
- 吸引了：有说服力的内容，交互，美观。你只有几秒钟的时间来吸引人。
- 品牌：字体，布局，内容和颜色。
背面的包装：用示例来讲明产品都可以如何使用。可以是图文并茂，也可以是视频文件。
拆开包装：Google视频的注册过程就是一个表格，而Jumpcut却会建议用户拍摄一段视频。就好像第一次打开苹果的笔记本，他会给你拍摄一张照片，如此个性。给用户拆开包装的过程花点心思是值得的，会让用户记住你，印象深刻。
- 按钮要大，横竖要平衡。
- 常用按钮比其它按钮要大一些。
- 无穷大按钮问题，可以网站没有这个优势。(屏幕边缘的按钮)
了解了人机交互。