在web站点设计中，离不开按钮，所以必须考虑每个细节，虽然它不能引起人们的注意，但是，精心设计出来的按钮，可以在很大程度上引起网站整体上的改观，增加亮点。我们这里收集了40个最流行、也是最有创意的按钮。
GoodBarry
Your Web Job
Aviary
Pixel Crayons
Icon Dock
The Invoice Machine
OH! Media
Games for Her by You
Lifetree Creative
FreebiesDock
Checkout
Gary Nock
Matt Dempsey
Transmissions
Tutorial9
OfficeVP
Aptana
Valley Creek Church
Codebase
Onehub
SEO Group
Wapple
Business Catalyst
Tao Effect
Heart Internet
Zidalgo
W3 Markup
Apple
Chromatic
Spinen
Wake Interactive
DevHub
LightCMS
Mixx
Delicious
Virb
FreeAgent
Resumator
Clearspring
I Wear Your Shirt
Web站点最流行的40个按钮
2009/05/05IE6 死后即将大快人心的10件事
2009/04/18
(http://www.kooxo.com/uploads/a…) 链接快照
很多人以为IE6已经死了，也许只有设计师这样认为，现实世界中IE6的使用者大有人在，不过不会维持很久，IE8已经推出，微软对IE8的推广不遗余力，同时，不少人从IE转到别的浏览器，总有一天，IE6会被弃之如敝履，没有人愿意再提起，那时，有10件事会大快人心。
-
使用 CSS 2 的 child 选择器
不必再写一大堆规则在某个对象的子对象中筛选，CSS2 的子选择器（child selectors）可以选择某个对象下直接的子对象。
-
放心使用 24 位 PNG 图片（透明不再是问题）
不必象以前那样在不同背景方案下设计不同的图片边缘反锯齿方案，使用 PNG 的 Alpha 通道，我们可以用图片实现阴影，眩光以及透明效果。
-
使用属性选择器
不必再写类似 <input class="text" /> 一类的代码，告诉浏览器当前输入框使用什么式样类，CSS2可以直接选择 HTML 对象的属性，如 input[type="text"]，我们甚至可以使用 CSS3 的子字符串匹配属性选择器，匹配我们希望选取的对象，可以在那些使用类似 CSS 类的地方大大减少代码量。
-
可以使用更多 display 类型
可以使用类似 display:inline-block 的代码，这样就不会再出现嵌套的 float:left 一类的混乱，也不必再举棋不定地使用 overflow:hidden 一类的定义。（不过要等到 Firefox 3 出来）
-
使用 min-width 和 max-width
尽管 IE6 对 width 的实现很接近正确的 min-width，但总是不一样。而且没有涉及到 max-width，随着 IE6 的消失，一种新的基于 block 的布局方式将复兴，这种布局将更加灵活。
-
扔掉90%的 CSS Hack
不必再担心诸如幽灵字符，神秘消失的 block，以及令人沮丧的双 margin 一类的 BUG，也不必再为这些 BUG 写专门的 Hack。
-
大胆使用缩写(<abbr>)标签
尽管不是人人用得着这个标签。
-
可以大胆相信 z-index 了
不必再为层间错误的堆叠次序抓耳挠腮，我们并没做错什么，这是IE6堆叠BUG引起的。
-
省钱省时间
那些 IE6 Hack 花了我们不少时间和成本。
-
再次找回 Web 设计的快乐。
写 CSS 将是一种快乐，因为浏览器会按照你想的样子来，不过 IE7 什么时候消失？
有三件事，我们还得等等（直到IE7消失）
-
使用 CSS 计数器
我们不必再使用那个不被推荐的 start 属性。
-
使用
box-sizing属性CSS3 的 box-sizing 在 IE8和其他浏览器都可以使用，最终，我们可以自行选择使用哪种 box 模型。
-
改进的 JavaScript
对 javaScript 我们还有很多改进的空间，一个简单的事件监听机制，对合并后的 CSS 属性的获取（可靠的获取），这些 IE7 还有很多缺陷。IE8 对 JavaScript 引擎做了较大的改进。
IE6 具体消失的日子还很难讲，尤其国内，至少要留出时间让我们的几大银行重新编写 ActiveX 吧 – 译者。
分析：微软或将称霸 Web 3.0
2009/04/11 当MSN不只是一款IM软件，当Hotmail不再是“鸡肋”邮箱，当google API重视企业客户和更针对程序员时，Microsoft用最通俗易懂的方式征服了全世界的网民——不需要懂技术，不需要明白什么是“云计算”，只需要拥有MSN注册ID。 或许Microsoft真的将称霸Web3.0时代，而且，无人能及。
最近Microsoft的频繁动作带给大家一个又一个惊喜，一向被认为不重视互联网的Microsoft一系列产品的推出，让众人大跌眼镜。
先是IE8的推出。自从Windows捆绑了IE浏览器后，这个武器微软打败了众多的竞争对手，成为世界上使用人群最为广泛的网页浏览器。据网站监测机构Net Applications公布的数据显示，目前，微软Internet Explorer浏览器用户群覆盖全球3/4的互联网用户，远超过市场占有率17%的Firefox，和市场占有率6%的苹果Safari浏览器。同时有调查数据显示，人们使用互联网频率最高的工具就是IE，甚至占到了人们总上网时间的80%！
MS的不思进取这里就不说了（IE7五年才推出，而IE8目前还只是测试阶段）。由于IE8目前确实不是很好用，Sonia只是简单的体验了一下就删除了。其中最大的一个感觉是IE8对于RSS功能的强大支持——不但可以像IE7那样订阅整个网站或者某个网页的RSS源，更可以将网页的某一个板块进行“源订阅”：如果你订阅了某个“源”，那么你可以通过IE8时时查看这个板块的更新情况，尤其是针对买卖产品，这个功能非常实用。而且IE8整合的右键菜单里，还增加了像EBAY这样的C2C平台，让用户的网络体验更加倾向于网络消费。
其二是Live Mesh的华丽登场。Live Mesh主要是以互联网作为个人的数据中心，通过网络将用户存储于电脑、手机或其他电子设备上的个人信息实现同步。通过使用这一技术，用户如果用手机拍摄了一张照片，那么其家中的数字相框将很快同步到这些照片，并显示出来。
Live Mesh的主张是“Connect everything”（将一切连在一起），这不单纯是实现了手机、电脑以及多媒体影音播放设备的完全同步，更让“SHARE”变得简单而方便——人们不需要在费力的去注册许许多多社会网络服务网站，不需要再为了让更多人知道自己而既使用twitter又使用Friendfeed，也不需要复杂的去操作“ 上传”、“分享”等等，他想要展示在互联网上的东西便可以轻松的被一个由亿万个网民所组成的“云”平台所共享。而他想要获得东西也可以从这个平台上轻松的取得（Live Mesh现在已经整合了RSS功能）。
Live Mesh似乎消除了用户端和服务器之间的概念：一个由所有用户组成的平台，互相分享，互相链接，存取资料畅通无阻。不论你在使用机还是在使用PC，甚至不论你是否在互联网上，Live Mesh都可以让你随时和世界同步。
只不过目前的Live Mesh版本只是一个“技术预览版”，初期仅对美国的10000名使用微软视窗系统的用户测试用户。Sonia费劲千辛万苦通过一个MS内部人员想得到一个邀请，结果被告知：Live Mesh已经停止用户测试邀请了…
Live Mesh Tech Preview
Thank you all for your interest in Dogfooding Live Mesh. We are currently full and will not invite new dogfooders until we have performed more testing on our services and can increase our quota. Please check here on the SharePoint site for the date we increase the quota to allow more participants in the Live Mesh dogfood.
其三是推出MSN A-list。它是MSN.com的新页面，主要就是每日更新来自 MSN.com 最热门搜索和最热门话题，包括最热门的站点搜索，人物搜索，视频搜索，MSN.com的最热门话题，最热门的电影搜索，DVD 租赁搜索等等。
这个动作其实并不新鲜，许多有着丰富或者独特资源的垂直资讯网站或者综合门户网站都先后推出了这种“聚合式”的新门户页面：
1.所有的内容来自于成千上万个“自媒体”，当然也包括有些平台自有的新闻资讯
2.页面分板块设置，会涵盖不同方面的内容，新闻资讯、博客、相册、论坛等是必不可少的板块
3.能够在该页面显示的链接一定是最热门内容，而“热门”与否的评判标准来源于网民的点击率以及是网民的推荐热情。
Sonia曾经写过一篇文章，讲的是Web3.0的时代是以别人的内容为王的时代。“别人的内容”有两个重要的组成部分，一个是“别人”，这需要网站拥有大量的注册客户群体，并且拥有较高的网站黏性；另一个就是“内容”，也就是说你的用户群体是否有“内容”提供给你，是否愿意把“内容”提供给你，以及他们的“内容”到底是什么形式。而这两者组合都具备的时候，网站自然就会像良性方面发展——人们愿意提供内容，并且希望自己提供的内容被更多的人看到并分享，然后自觉的为内容做推广，并拉拢更多的用户。近期各大风头浪尖上的网站纷纷推出“聚合类”产品，Web3.0的架构也已经初具模型。在众人纷纷抢夺市场的时候，MSN.com此举只是顺应形势那么简单而已么？
Microsoft这三个动作看似不太搭边：
一个是垄断产品的更新换代，RSS方面的升级优化值得严重关注；
一个是不知道多少年之后才能依靠超牛硬件和超快网速才能实现的“互联网世界大一统”平台模型；
一个是代表着Web3.0发展方向的，却并不具备独特竞争力的聚合平台（Microsoft确实在互联网方面并不强势，MSN.com的排名也绝不如yahoo.com）。
仔细琢磨一下，Sonia隐约感到MS蓝图的宏伟及可怕：大家不要忘了Microsoft还有个致命的“杀手锏”——世界上用户最多的IM工具：MSN Live Messager。MSN的使用群体是任何一个网站所无法企及的，它不仅是一个IM工具，更是Microsoft的通行ID。如果把Microsoft的这三个动作结合MSN做一个简单的设想：
Sonia在某地旅游，用手机拍下一张风景秀丽的照片——由于使用了Live Mesh，这张照片同步显示在Sonia的网络文件夹里——Sonia在MSN上的好友瞬间变知道了Sonia最新的动态，并且对这张照片进行了评论和推荐——越来越多的Live Mesh平台使用者以及MSN使用者都看到了这张照片，并加入了评论和推荐队伍——MSN A-list首页上随即出现了这张照片，被更多的人观看和分享——而此时，Sonia还在异国他乡享受着轻松的旅程，没有上传图片，没有写博客，没有到处散播图片，没有用flickr……
很美好的互联网体验，也许即将成为现实，而且通过一向被认为不重视互联网的Microsoft来实现。更最可怕的是，Microsoft甚至不需要费力的去吸引客户和推广他的平台，因为IE和MSN轻轻松松的就帮它完成了——当MSN不只是一款IM软件，当Hotmail不再是“鸡肋”邮箱，当google API重视企业客户和更针对程序员时，Microsoft用最通俗易懂的方式征服了全世界的网民——不需要懂技术，不需要明白什么是“云计算”，只需要拥有MSN注册ID。
或许Microsoft真的将称霸Web3.0时代，而且，无人能及。
来源：CnBeta
10大 Web 应用界面技术应用
2009/04/11当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求，SAAS的模式看起来非常有吸引力。Web应用程序的界面设计，其核心就是网页设计，但它的重点主要是在功能方面。要超越桌面应用程序， Web应用程序必须提供简单、直观和即时响应的用户界面，让他们的用户花更少的精力和时间去完成事情。
以前，我们并没有注意到web应用程序这个方式，但是现在是时候仔细看看一些实用的技术和设计解决方案，让Web应用更友好更漂亮。本文主要介绍的是在现代Web应用程序中，我们对设计模式以及有效设计解决方案进行大量研究并得到结果的第一部分，您可以在下面找到10个收集到的实用界面设计技术以及在许多成功Web应用程序中得出的最佳做法。
你可以提出进一步的看法，第二部分会尽快出版。你也可以阅读以下相关文章：
1、界面元素的需求
在用户界面设计中，简单这个原则是很重要的。在任何时候，你在屏幕上显示越多的控制，您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时，可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的，尤其是如果你不想限制应用程序的功能的时候。
当你点击Kontain搜索框的搜索链接时，会出现一个类似于下拉菜单的层。所以，如果您需要来缩小搜索范围，您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。
隐藏或者掩盖高级功能是使事情更加简单的一种方法。找出最常用的功能，并且把剩下的藏起来。你可以用弹出式菜单和操作来做这件事，这在桌面软件中很常见。例如，如果您的搜索栏拥有高级过滤器，把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这些过滤器，他们只需几下点击便可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务，也会取决于重要性和操作时的频繁程度。
当你点击CollabFinder的搜索链接时你不需要打开不同的页面，相反，搜索框的控制菜单下拉下来，允许你能够直接开始搜索。
2、专门操作
根据情况选择合适的界面控件是很重要的。不同情况下可以用不同的方式处理，而且某些控件会比其他控件能够更好地完成他们的目标工作。
Backpack里有一个紧凑的日历和时间选择器选择提醒日期。
例如，你可以通过一个下拉列表来选择年月日，但是和日历选择器相比下拉列表不是非常高效的，在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份（特别是工作日和休息日），因此能够让你比用简单的下拉列表更快地做出更明智的选择。
MyBankTracker的APY计算器功能，通过使用容易控制的滑块去快速尝试不同的推测结果。
另一个很好的例子是滑块。是的，您可以随时手动输入一个数字，但某些情况下，滑块控件做了更好的工作。不仅由于他们易于使用 —— 只需单击并拖动——而且你也可以看清楚如何在最小和最大的范围之间进行合适地选择。
3、禁用按下按钮
在web应用程序的表单问题中有一个就是提交过程，非常简单的表单，如果你快速地点击两次或者更多次“提交”按钮，这个表单会被多次提交。这显示是个问题，因为它会重复创建相同的项目。防止重复提交的不是很难，而且对于大多数Web应用程序来说做到这一点是非常必要的。
它有两层维护：客户端和服务器端。我们不会通过服务器端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制，去检查被提交的内容是否重复，并且是否需要阻止提交。
在Yammer上，当你的新消息被提交之后，“更新”按钮将被禁止。
客户端则是简单得多。所有您需要做的就是在点击之后禁用“提交”按钮。最简单的方法就是为“提交”按钮添加一段JavaScript，如下所示：
<input type=”submit” value=”Submit” onclick=”this.disabled=true” />
当然，我们会建议您同时还对服务器端进行检查，以确保重复不会获得通过。
4、模拟窗口的阴影
在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。
这种技术来源于传统的桌面软件，帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来，所以阴影帮助他们更接近于读者，因为感觉上窗口似乎是三维地浮在其他页面上。
Digg的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。
为了实现这一效果，设计师往往建立一个透明的容器与PNG图像作为背景，把内容放进容器中——在盒子各边加上等距的边框。另一种选择是使用一个拥有透明边框的背景图像并且通过绝对定位来控制盒子内容的位置。这正是Digg的做法——这是他们正在使用的图片（dialog.png） 。这是他们使用的代码和CSS样式：
(X)HTML:
<div id=”container”>
<div style=”display: block; top: 236px; opacity: 1;” class=”dialog”>
<div class=”body”>
<div class=”content”>
…
</div>
</div>
</div>
</div>
CSS:
.dialog {
position: absolute;
left: 50%;
margin-left: -315px;
width: 630px;
z-index: 100001;
}
.dialog .body {
background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
padding: 40px 13px 10px 40px;
}
或者，你也可以使用基于javascript的lightbox特效库，或者通过使用之间我们介绍过的CSS3属性去模拟阴影，但是你必须意识到现在的IE浏览器将不会支持它。
Basecamp的项目切换窗口有一个大的轻阴影，帮助菜单区域脱颖而出。
5、空白状态告诉你要做什么
当你设计一个Web应用程序时，你不仅需要通过样本数据去测试这个程序，而且最重要的是当什么内容都没有的情况下，你要确保它看起来不错而且是有帮助的。
当在页面或者查询结果没有信息时，告诉你如何才能处理这些空白区域是一条很有帮助的信息。例如，一个项目管理应用程序的网页可能会列出用户的项目，但如果没有项目，你可以提供一个创建项目的链接。即使已经有创建项目的按钮存在在页面上，但一点额外的帮助并不会有损失。
Campaign Monitor 会在你开始建立一个邮件广告时指导你正确的方向。
这种技术实际上鼓励用户试用服务，并在注册之后直接使用这项服务。通过应用程序的单步指导用户能够帮助他/她去了解程序提供的优势以及是否有用。同样重要的是把最重要的操作呈现给用户并且只有这些而已——把所有功能都呈现出来并没有意义。请记住，用户通常希望得到一些或多或少提供给他们的具体构思，但是他们不想要直接跳到详细说明去——他们既没有时间也没有兴趣。
通过空白状态去激励用户和行为，可以大大减少“辍学”，并且帮助您的潜在客户，更好地了解该系统如何工作。
Wufoo的表单页面有很多，当什么都不存在时它会以友好的讯息邀请您创建一个新的表单。
6、按钮的按下状态
许多Web应用程序有自定义的按钮样式。这些都是用自定义图片作为他们背景的锚点或输入按钮。默认输入按钮可能不适合在一些情况下，以及文字链接有时过于渺小。目前的挑战是，当你把你的链接弄得看上去像按钮时，它们的操作也应该和按钮一样——这包括当用户点击它们时会有被“按动”的效果。
这不是一个纯粹的视觉调整。提供即时反馈给用户将使应用程序感觉更有响应性，并且给用户带来更接近于桌面软件的的用户体验。
你可以通过CSS为按钮增加按下的效果。
Highrise的按钮实际上是在你点击的时候显示一个按下的效果，给用户一个非常舒适的反馈感觉。
7、在登陆页面提供注册的连接
一些没有注册你的应用程序的用户将不可避免地停在你的登录页面上。他们想要使用你的应用程序，但是却不能立刻找到注册页面。可能他们已经试过访问一个只提供给注册用户的特定页面。
没有Delicious的账户？没问题，在Delicious的登录页面上提供了一个注册的连接。
Goplan的登陆页面上有个漂亮的彩色按钮指向注册页面。
在你的登陆页面上放上注册的连接会让一切容易很多。如果他们没有账户，他们不应该去寻找注册页面。我们研究证实：在注册页面，有18%的网站有登录表单或者链接到登陆页面的连接。(例如：YouTube, Reddit, Digg, Lulu, Metacafe)
8、上下文关联导航
思考什么是用户期望看到的以及在每个给与的情景中他们需要什么是很重要的。你不需要在每个地方显示同样的导航控件因为在用户可能不是在每个环境中都需要它们。
上下文关联控件的最佳范例之一是最近在微软office 2007中的界面，在它的界面中默认的工具条被带装控件代替。每个标签上有不同控件相关的特定操作，无论是图形编辑，校对或者简单书面形式。web应用程序也可以受益于这种上下文关联的控件，因为这些控件通过只显示用户需要的内容来帮助整洁界面，并非显示所有的内容。
Lighthouse提供一个熟悉的标签导航菜单，但是它在标签正下方有二级菜单。这个层级只显示当前项目相关活动的部分。
9、更加重视主要功能
不是所有控件拥有相同的重要性。例如，在屏幕上创建一个新项目，你可以有两个按钮：“创建”和“取消”。这个“创建”的链接更重要一些，因为是用户大部分时间会去用的操作。只有少数才会去取消。所以如果这些控件挨着排放，你可能不会想要给于相同的重视。
这个Lighhouse的“创建任务”按钮。你可以看到“取消”链接在旁边以纯文本格式。这个按钮不仅具有更重要的操作而且会有较大的点击区域并且容易去点击。
为了让用户的重点转向“创建”链接，我们可以简单地利用不同的样式或者控件形式。一些应用程序的表单输入按钮用来作为创建动作，并且把取消操作作为一个文字连接。这样不仅给与创建按钮更多的点击区域，而且也帮助那些在搜寻内容的用户获得更好的焦点目光。
10、嵌入式视频
当图片和文字作为一种很大的方式去和你的用户沟通并且教育你的用户有关你程序的特点时，如果你有资源去投入，视频甚至可以成为更好的选择。视频在最近几年的web应用上已被越来越受欢迎。对于Web应用程序，视频通常作为展示产品特点的示范影片被用于市场网站中。但是这不是使用视频的唯一方法。
GoodBarry特点是在头版有示范视频去展示产品，它也通过利用示范影片去教育用户如何开始使用。
Mailchimp在管理员面板上嵌入了教程视频指导新用户操作。
一些Web应用程序使用视频嵌入在程序本身教导用户如果使用某些特定功能。视频是一种非常好的方式去快速展示你产品是被怎么使用的，因为它更容易描述超过一页文字的内容，也清楚得多，因为观众可以清楚地看到该怎么办。
原文出自：http://ww.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
Internet Explorer 浏览器的历史发展
2009/04/08Internet Explorer最初是从早期一款商业性的专利网页浏览器Spyglass Mosaic衍生出来的产品。在1996年，微软透过给予季度费用和部分收入从Spyglass中取得了Spyglass Mosaic的授权。虽然Spyglass Mosaic的名字与NCSA Mosaic（首款应用得最广泛的网页浏览器）甚为相似，但Spyglass Mosaic则相对地较不出名以及使用了NCSA Mosaic少量的源代码。
Internet Explorer 3.0及之前版本
1995年8月，Internet Explorer第一个版本发布，但其最初几个版本并不受到广泛的使用，直到3.0版本的发行则开始改写了这个局面。3.0版本于1996年8月13日发布，是首个脱离Spyglass源代码发展的版本（但仍使用Spyglass的“技术”，所以程序的文件记录仍保留了Spyglass的版权资讯），它亦是首个支持CSS技术的主流浏览器。它引进了ActiveX控件、Java Applet、内联网页多媒体以及因特网内容选择平台系统对内容元数据的支持。对比于当时它的主要竞争对手Netscape Navigator，这些改进算是十分具代表性的。3.0版本亦捆绑了Internet Mail and News（为Outlook Express的前身）、NetMeeting及Windows Address Book，它亦缺省在Windows 95 OSR 2中。3.0版本被认为是Internet Explorer首个最受到欢迎的版本，但在发行后的数个月后亦被黑客发现了数个安全性和隐私漏洞。
Internet Explorer 4.0版本
4.0版本于1997年9月发布，它深化了浏览器和操作系统的整合层面，在Windows 95或Windows NT 4上安装4.0版本及选择视窗桌面更新功能可将传统式的Windows Explorer更新成与网页浏览器界面相似的新版Windows Explorer，用户亦可透过Active Desktop将网页浏览功能嵌入于视窗桌面上，可是这样的整合行为亦受到不少的批评（参见United States v. Microsoft案例），这个功能已在后期的版本安装中移除（但预先安装此功能的系统不会受到移除）。
4.0版本引进了群组原则，允许公司设定和锁上浏览器的参数设置。Internet Mail and News被Outlook Express取代，Microsoft Chat和经改良的NetMeeting亦被捆绑在IE中。Windows 98 第一版亦包含了这个版本。
Internet Explorer 5.0及5.5版本
Windows 3.2简体中文版上的Internet Explorer 5.0版本于1999年3月18日发布，随后亦被捆绑在Windows 98 Second Edition和Windows 2000中（Windows 2000捆绑了5.01版本）。这个版本亦是另一个具代表性的发布，它引进了双向文字、旁注标记、XML、XSL及将网页储存成MHTML格式的功能。 5.5版本随后在2000年7月中发布，它改善了打印预览的功能、CSS及HTML标准的支持和应用程序编程接口。这个版本被捆绑在Windows Me中。
Internet Explorer 6.0版本
6.0版本于2001年8月27日发布，距Windows XP正式发布日的数星期前发布。这版本包含增强版DHTML、内联网页框架的内容限制和部分支持CSS level 1、DOM level 1和SMIL 2.0。MSXML引擎会更新到3.0版本。其他新的特征包含一个新版本的IEAK、媒体列和Windows Messenger综合版、错误收集、自动化重整图片大小、P3P和一个新的外观，能配合Windows XP的“Luna”界面。于2002年，Gopher的功能被禁用，7.0版本更取消了对Gopher的支持。
Internet Explorer 7.0版本
Windows Vista Beta 1上的Internet Explorer 7.0 Beta 1在2005年2月15日，微软主席比尔·盖茨于旧金山的RSA讨论会中，宣布新版本浏览器将会发布。推出新浏览器的原因是Internet Explorer的市场估有率逐渐被Mozilla Firefox侵蚀。此外，微软宣布7.0版本只可以用于Windows XP SP2和之后的操作系统中，包括Windows Server 2003 SP1和Windows Vista。Internet Explorer的第一个预览版本于2005年7月27日推出，主要用于技术测试。而第一个向大众的测试版本于2006年1月31日推出，版本是Beta 2 preview。最后的公开测试版本于2006年10月18日推出。7.0版本预期可以保护用户于钓鱼式攻击和其他的恶意软件。用户可以完全控制 ActiveX和更佳的保安架构，包括与Windows系统分开，不像以往般紧密融合，从而提高安全性。另外，新版本包括收复了一些程序中的错误，加强对各网际标准的支持，增进支持HTML 4.01/CSS 2，新加入分页浏览，还有一个支持各搜索引擎的搜寻方块，一个Web-feed阅览器，支持国际化域名，和反钓鱼式攻击过滤器。它甚至可以挡掉一些程序类型，例如Flash电影和Java。
2008年2月12日，微软以“安全原因”将通过Windows Server Update Services把所有Windows系统的浏览器强制升级到7.0版本。
Internet Explorer 8.0版本
北京时间2008年3月6日，微软发布了Internet Exolorer 8的第一个公开测试版本（beta1）。本次测试第一次包涵简体中文（3月27日推出）版本。测试版本仍然是在IE7的架构下改进的。界面除了做一些细微的调整，增加少许实用功能外，并无改进。beta1版本推出了模拟IE7的模式、增加了在线邮件浏览功能、提高了兼容性、反钓鱼功能进一步增强，可以进行网页地址筛选。北京时间8月28日消息，据国外媒体报道，微软周三发布了功能完备的升级版IE8 Beta 2。微软称，IE8 Beta 2的新特性是加强了隐私保护，并提高了使用舒适性及安全性。微软3月份发布了IE8 Beta 1，但目的只是向网络开发者展示这一最新IE版本，Beta 2则旨在向更多用户进行展示。微软没有透露将于何时正式推出IE8，也并未对会有多少用户下载Beta 2作出预测。
CSS纯英文数字自动换行
2009/04/08当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行，如下图 
并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-break
word-wrap用来控制换行
两种取值：
(1)normal
(2)break-word（此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。）
word-break用来控制断词
三种取值：
(1)normal
(2)break-all（是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。）
(3)keep-all（是指Chinese, Japanese, and Korean不断词，一句话一行，可以用来排列古诗哟~）
【解决方法】
可以在CSS中加入
word-wrap:break-word;
word-break:break-all;
让你的设计跟上CSS3（CSS3部分新特性介绍）
2009/04/06Written By Chris Spooner，Translated by Echo
新的CSS中提供了许多令人激动的新特性使得我们在Web设计中得以创造性的应用它们。这些特性包含在即将到来的CSS3中。事实上，在接下来的数年中，你不能将它应用在你日常客户的项目中，但在专为Web设计交流而创建的Blog和Website上，这些特性可以帮助推动现代Web设计发展，为你的设计增光添彩，推动Web产业前进。
下面是取自这些新特性的五个技巧，这些可以用于你日常的Web设计。
1. 圆角边框(Border Radius)
或许现在最常用的CSS3的特性是圆角边框。标准的HTML块元素是90度的直角方形。CSS3样式规则允许圆角边框。
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
角半径也可以对每个角单独地设置。只是，对于-moz和-webkit-，这个语法是不同的：
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;
这支持 Firefox, Safari 和 Chrome。
应用实例：Twitter.
另外请参照：
2. 图片边框(Border Image)
图片边框，顾名思义，允许用图片文件来定义对象边框。这张图片创建的时候，就设计得与对象的每个边有关联，它的每一边适合HTML对象的每个边。这通过以下的语法实现：
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
{border: 5px} 这个属性指定了边框宽度，然后每个图片边框规则定位到这个图片文件，这告诉浏览器图片哪里用于填充这５个像素边框区域。
图片边框也可以对每个边单独定义，甚至可以为每个边指定不同的图片。
border-bottom-right-image
border-bottom-imageborder-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image
支持 Firefox 3.1, Safari 和 Chrome。
应用实例：Blog.SpoonGraphics.
另请参照：
3. 阴影(Box Shadow and Text Shadow)
CSS3中支持投影，你可以扔下Photoshop来构造投影效果了。我们目前见到的这种用法已经添加到了设计中，一个很好的例子是今年的24 Ways website(你可以分别用IE和Safari打开这个网站对比一下效果)。
-webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc;
开始的两个属性定义了阴影相对于元素的偏移量，在这个例子中，x和y坐标偏移为10px。第三个属性设置阴影模糊的级别。最后一个属性设置阴影的颜色。
另外，文本阴影也是可以用的。
text-shadow: 2px 2px 5px #ccc;
支持 Firefox 3.1, Safari, Chrome (仅box shadow) 和 Opera (仅text shadow).
应用实例： 24 Ways.
另请参照：
4. 透明度(Easy Transparency with RGBA and Opacity)
Web 设计中透明PNG图的应用 使得透明成为设计中的一个重要特性。现在，透明度可以在CSS中定义了。
rgba(200, 54, 54, 0.5); /* example: */ background: rgba(200, 54, 54, 0.5); /* or */ color: rgba(200, 54, 54, 0.5);
开始的三个数字分别指红、绿、蓝颜色通道，最后一值定义Alpha通道。这创造了透明效果。
另外，透明度也可以与颜色分开，单独进行设置。
color: #000; opacity: 0.5;
支持 Firefox, Safari, Chrome, Opera (opacity) 和 IE7 (opacity, 但需修正)。
应用实例： 24 Ways (RGBA).
另请参照：
5. 自定义网页字体(Custom Web Fonts with @Font-Face)
以前，我们总是需要使用安全字体，像 Arial, Helvetica, Verdana, Georgia, Comic Sans 等等。现在，@font-face CSS3 规则允许调用在线的字体。由于版权问题，我们仅可以嵌入部分字体。
这个样式可以这样使用：
@font-face {
font-family:’Anivers’;src: url(‘/images/Anivers.otf’) format(‘opentype’);
}
使用该字体的时候，这样设置样式：
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;
支持 Firefox 3.1, Safari, Opera 10 and IE7 (需要大量的修正，如果你有兴趣，可以参照 make font-face work in IE )
应用实例：TapTapTap.
另请参照：
- Fonts available for font-face embedding
- Font-face in IE, making Web fonts work
- Web fonts, the next big thing – A List Apart
虽然CSS3仍在开发中，但列出来的规则很快就已经被一些浏览器支持。Safari 对这些新特性有着广泛的支持。不幸的是，尽管Safari是一款高质量的浏览器，它的用户非常少。所以，单独只是为这少部分人而增加额外的特性不太值得。但随着Apple的Mac电脑深入到日常生活，使用Safari的人数会持续增长。
另一方面，Firefox已经赢得了很大的用户群。而且，即将发布的Firefox 3.1已经添加了对CSS3特性的支持。如果多数Firefox用户能升级版本，那么很大的用户群使用的浏览器将会支持这些特性。
去年发布的Google Chrome基于WebKit引擎，所以这个浏览器的样式表现很大程度上与Safari一样。当Safari在Mac用户中获得了份额的时候，Chrome突然闯入，分享了Windows平台下许多份额。
2008年11月W3的浏览器统计比例显示，Firefox占44.2%，Chrome占3.1%，Safari占2.7%。这意味着，50%的用户能够看到这些新特性。在某些社区，人们有意识地选择浏览器，这个比例会更高。据Blog.SpoonGraphics统计是73.6%。
6. 不利因素(The downside)
你的网站可以包含这一系列的新特性，但有一些不利因素需要考虑：
- Internet Explorer: 46% 的IE用户无法看到这些新特性，所以，不要在设计中的一些重要的部分应用这些特性。要保证有第二选择。例如，有标准和边框替代图片边框，有正常的字体替代@font-face字体。
- Invalid style sheets(不可用的样式): 这些CSS3特性还没有最终确定。对于不同的浏览器，有不同的代码，而且它们有时候可能是不可用的。
- Extra CSS markup(多余的样式标记): 按上一观点，对于不同的浏览器要编写不同的代码，于是，会造成许多多余的样式标记。
- Potentially horrific usage: 潜在问题(时间关系省略吧，呵呵)。
9个Web设计中常见的可用性错误
2009/04/05现在，比较牛的设计师和开发者都认识到了可用性在他们工作中的重要性。可用性好的网站会极大地提高用户体验，并且好的用户体验会让用户更加快乐。用聪明的设计决策取悦并满足您的访客，而不是阻挠和激怒他们。
下面是9个网站经常面临的可用性问题 ，以及对于这些问题的推荐解决方案。 您可能还对下面的文章感兴趣：
- 10 Usability Nightmaters That You Should Avoid
- 30 Usability Issues To Be Aware Of
- 12 Useful Techniques For Good Interface Design
- 10 Useful Web Application Interface Techniques
1. 太小的链接点击区域
设置超文本链接的目的是被点击，确保它们很容易点击才有意义。下面的示例中的链接实在是太小了;点击它们的难度太高。 这些是 评论中的链接，Hacker News 是一个社会新闻的网站。 （点击区域用红色突出显示） ：
下面例子中包含相同的界面元素，链接的评论，但是这个例子中有一个很大的可点击区域：
Newspondcomments link.
为什么我们需要一个更大的点击区域？ 很简单。 因为我们移动鼠标并不是很准确。 一个大号的点击区域使鼠标光标悬停在链接上更容易。如何能有一个大号的点击区域呢？我们可以使整个链接更大，或者使用CSS “padding”属性增加链接周围的空间。 代码如下：
<a href=”http://www.examplesite.com”style=”padding: 5px;”>Example Site<a>
为了使例子简单点，这个CSS样式直接写在代码里了，但在现实生活中您可能是在您的CSS文件中添加一个样式，给这个链接一个class或者是一个id，然后指向它。
在37signals上，你可以阅读到更多关于填充链接以更适用于鼠标点击的文章，的文章棉衣链接的目标 。文章认为，填充为用户提供了 “舒适的感觉。真的非常容易点击链接。感觉链接就像是在配合你工作不是和你对着干你。 ”
2. 错误使用的分页
分页指把内容分为几页。如果需要显示一个很长的内容列表，这是网站上常用的方式；例如，商店中的产品或是相册中的照片。因为这种目的使用分页是有意义的，因为太多的项目显示在一个页面上将会使网页下载和处理速度变慢。
FeedMyApp以正确的方式使用分页：把其海量的应用服务列表以合适的量显示。
但是现在还有人用另一种方式在Web上使用分页。 .内容网页上，比如博客的一篇文章，有时也会分成若干页。 为什么这样做？有什么好处么？不太可能是文章实在太长了，因此需要分页; 在大多数情况下，这样做是用来提高页面浏览量的。因为很多博客和杂志通过广告获得收入，获得更多的页面浏览量（即单独网页的加载数量）来提高他们的浏览统计数据，使他们能够在每个广告上获利更多。
Wired 上的文章《Google的Logo》 分为8页，非常难以阅读。
虽然这可能看起来像是一种简单的方法，让您可以从广告中挤压出更多的钱，但它也带来了两个主要的问题。
首先，这样做真的，真的非常讨厌。 阅读一篇文章不得不加载好几页一点也不好玩。 您给您的访客设置了一个完全没有必要的障碍。
第二个原因是SEO（搜索引擎优化） 。 搜索引擎使用您网页上的内容理解它是关于什么的，然后相应地进行索引。 如果内容分成若干页，内容就被稀释了，每个页面更难理解并且其中和主题相关的关键字也更少了 。 这可能会对文章在搜索引擎中的排名产生不利影响。
3. 重复的网页标题
每个网页上的标题都是非常重要的。网页标题就是HTML代码<head>区段中我们写在<title>标记里面文本。 有时，人们在编写他们网站模板时设定一个通用名称——例如其网站的名字——然后在整个网站反复使用相同的名称。 这样做是错误的，因为为每个页面设置单独的标题有几个关键的好处。
第一个好处是，一个好的标题能向您的访客传达很多信息，解释这个页面的内容是什么。人们可以迅速知道他们是否在正确的地方。请记住，标题不仅仅显示在浏览器窗口顶部，它也显示在搜索引擎结果页上 。 当人们在Google的时候看到一个搜索结果列表，他们会去阅读那些网页标题来了解每个网页的内容。仅仅因为这个，你也应该花一些时间来优化你的网页标题。
第二个好处是SEO。 搜索引擎需要不同的信息来为一次特定的查询排序搜索结果。 网页标题是重要的信息之一，它们用来衡量您的网页与一个特定的搜索关键字的相关程度。这并不意味着你应该在标题里添加许多关键字——这与第一个好处相矛盾——但你应确保每个标题简明扼要地介绍了网页的内容，其中包括几个你觉得人们会用来搜索这篇文章的关键字。 下面是一个好网页标题的例子。这是一个Smashing Magazine网页标题在Safari中浏览的样子：
例子里，我们可以看到文章标题，类别和文章的网站名称。 把网站名称放在最后，更强调的是网页本身的内容 ，而不是网站的品牌。 下面是标记中HTML代码的样子:
<title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title>
Google搜索结果中这个页面的样子：
4. 内容难以扫描
为了确保您的网站易用性，您不仅需要有一个好的设计，你还需要良好的Copy（文案）。 Copy（文案）是一个术语，用来描述网站上所有的文本内容。 是的，好的设计能引导您的访客浏览您的网站，将其注意力集中在重要的事情上，帮助他们理解信息块，但访客仍然需要阅读文字来处理信息。这意味着Copy是你整体网站设计中的一个重要组成部分。
在你能写出一份好的文案之前，你需要了解人们实际上如何浏览你的网站。不要以为你的访客会从头到尾阅读所有的文字。那样当然很好，但是不幸的是，根本事实不是这样滴。人们被Web上的信息狂轰乱炸，而且我们中的大部分人在尽力去消化那些信息。这就导致非常疯狂的浏览行为：我们从一块内容跳跃到另一块，从一个网站网站跳到下一个。人们往往不能从头到尾阅读一个网站；他们从最先吸引他们注意力的那一块内容开始，然后移动到下一个捕获他们兴趣的地方。 这个模式看起来有点像这样：
The Basecamp 的到达页面。
红圈表示访客目光聚焦的区域，数字表示他们看那些元素的顺序。用户的视线在页面上的兴趣点之间跳跃，想要充分利用这种混乱的浏览模式，你需要用一种特定的方法组织你的文案。下面是几个重点：
- 设置几个“关注点”（Points of focus）。这些部分吸引访客的注意力，你可以用粗体，高对比度的颜色和较大的字体来实现这个目的。你也可以使用图片，例如图标，把图标放在文字旁边，给这区域带来更多的视觉吸引力。
- 每个“关注点”应该伴随一个描述性的标题。在进一步阅读文案之前，访客可以了解到一点内容概要。不要做“标题党”，标题应该简单明了。人们希望迅速获得信息，藏着掖着只会惹恼他们。
- 任何文字都应该简短并容易消化。只提供要点，把其余的都删去。在大多数情况下，文案撰写者想补充说明观点的文字只是增加了网站的负载。人们将只阅读小块小块的文字，并且忽视大段的文章。把你的文案删减到不能再减的地步吧。
“为什么你应该使用的 OpenOffice;;; ”网页肯定可以改进。除了顶部的大横幅之外没有设置明确“关注点”；并且，文案聚在一起成了一个大疙瘩，阅读起来相当困难。
Things 软件的功能页，每个功能都是一小段文字，包含一个自己的图标和标题。这使得这个列表非常容易被扫描。为了使文案给人印象更深，列出实际的好处，而不是功能的名字。
5.没有办法取得联系
如果你想建立一个成功的社区，用户参与是非常重要的，并且如果你想建立一个成功的网站或是社会网络软件，社区是非常重要的。此外，如果你想拥有忠实的用户，用户参与同样很重要。迅速回答用户提出的疑问，修复他们遇到的问题并不仅仅意味着你有很好的客户服务——这意味这你在乎他们，并且你的用户和访客会很欣赏这一点。
但是很多网站依旧没有给访客一个方便渠道和公司取得联系。一些网站甚至没有Email地址或是联系方式。
当你点击可口可乐Coca-Cola网站上的“联系我们”链接。显示出来的页面，没有电子邮件，没有电话号码。大部分的链接指向“常见问题”；反馈表需要您的地址和年龄，还有500个字符的限制；“提交一个想法”的表单有两页那么长，还包含一大堆条款。看来可口可乐真的不想你与他们联系。
当然，把你的Email地址放到网站上可能会吸引大量的垃圾邮件，这里有几个解决办法。
Enkoder 是我最喜欢的把Email放到Web上的解决方案。Enkoder是一个软件，有两个版本，一个是基于Mac平台的，一个是免费的网络应用。它可以加密你提交的任何Email地址，生成一串乱七八糟的JavaScript代码，你可以把它放在你的页面上。当网页加载这段代码的时候，你的电子邮件地址就会奇迹般地出现，还是一个可点击的链接。抓取EMail地址的爬虫机器人不能读取你的地址，起码计划是这样的。
你还可以用“联系表单”（contact forms）来避免在网页上显示你的EMail的问题，但是你仍旧会收到一些垃圾邮件，除非你使用一个有效的Captchas，或是其他垃圾邮件保护机制。请记住，像Captchas这样的东西是用户交互的障碍，并且可能会降低用户体验。
论坛救援。在线论坛是一个很好的沟通渠道，是一个不错的和用户联系替代方案。一个公开的论坛比一个简单的“联系表单”或Email更好，因为你的用户在论坛上可以相互帮助。即使你不亲自回应用户，其他的用户可能帮助那个人，解决他的问题。
GetSatisfaction 是一个Web应用程序，它就像一个论坛，用户可以在板块里张贴自己的问题和反馈，用户或是团队成员都可以回复。用户可以添加评论阐述自己的问题。无论你选择GetSatisfaction的托管解决方案或是运行你自己的留言板，这样双向的沟通渠道是一个与用户保持联系的优秀方法。
The GetSatisfaction forum for Apple.
6. 没有办法搜索
大部分人到达一个页面会立即开始寻找搜索框。也许他们知道自己在寻找什么，并且不想花时间学习这个网站的导航结构。Jakob Nielsen 管这些人叫“搜索优势用户”。
我们的可用性研究显示，超过一半的用户是“搜索优势”的，大约五分之一的用户是“链接优势”的，其余则呈现出混合行为。“搜索优势”用户通常进入一个网站时直奔搜索按钮，他们对在网站上逛逛没有兴趣；他们是“任务中心”的，而且想要尽可能快地找到明确的信息。 Jakob Nielsen
无论您运营的是在线商店还是Blog，你都需要搜索框。人们会来寻找一个特定的产品，或是一篇他们记得的文章，他们想要用一个快速搜索找到它。好消息是，如果你还没有在你的网站上设置搜索，这件事其实很简单。
你不必自己写一个搜索功能，Google和Yahoo这些搜索引擎已经索引了你网站的大部分页面（如果不是全部的话），因此，所有你需要做的就是选择一个，然后把搜索框嵌入到你的网站里。
<form action="http://www.google.com/search" method="get"> <fieldset> <input type="hidden" name="sitesearch" value="smashingmagazine.com" /> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> </fieldset> </form>
下面是Yahoo的:
<form action="http://search.yahoo.com/search" method="get"> <fieldset> <input type="hidden" name="vs" value="smashingmagazine.com" /> <input type="text" name="p" /> <input type="submit" value="Yahoo Search" /> </fieldset> </form>
为了让它运转起来，你需要做的只是把“hidden”字段的值改成你网站的域名。这将把Google或是Yahoo的搜索查询范围限制在你的网站内部。你可能还想要修改下提交按钮上的文字，说些你想说的……
7. 太多的功能需要注册
你的网站可能有些内容或者功能要求访客注册才能使用。这很好，但是小心有多少内容被藏在了注册流程后面。深度交互的Web应用，例如EMail，文档编辑和项目管理，其100%的功能都只有注册用户才能使用。其他网站，例如社会化新闻网站，不要这么做。我可以浏览Digg和Reddit上所有的故事而不用登录；用户没必要显示出自己的身份才能享受这些功能。
当你实现一个登录限制的时候，小心不要把那些不需要用户身份认证的功能也锁起来。一些Blog需要人们注册之后才能发布评论。当然这将大大减少垃圾邮件，但也同时大大减低了评论数。
你在网站上设置的限制会影响用户的参与行为，消除那些限制，比如注册什么的，几乎肯定会增加用户的参与程度。事实上，一旦用户开始使用你的网站，他们将更可能注册账号，因为他们其实已经参与进来了。
The GetSatisfaction;;; 的交互界面允许你填入你关于一家公司或是一个产品的评论，然后点击“发布”按钮。之后你看到的却不是你发布的评论信息，而是一个“登录或是注册”的提示。这很扯，用户可能已经被打击到了……
Pixlr是一个在线图片编辑应用，这是Pixlr的到达页面，上面有一个链接名为“Jump in n’ get Started!”，点击后会打开应用。没有试用，没有注册；你现在就可以开始试用这个应用了。
Posterous，一个博客托管网络，使用甚至不要求注册。只是发送一封包含你的文章的Email，你的Blog就创建好了。
8. 老的永久链接指向“不存在”
永久链接（Permalink）指一个链接固定指向一个页面，不会被改变；例如，指向一篇博客文章的链接，就像你现在正在读的。问题出现了，当网站转移到另外一个域，或者结构重组了。那些指向现有页面的老永久链接可能就断掉了，除非你做了点什么。有种东西叫做301重定向。 301重定向是存在你服务其上的几个指令，它可以把访客重定向到恰当的页面素以，如果谁用老链接访问你的网站，他们将不会看到一个404错误页：301重定向会把他们转向正确的地方，只要你设置正确。数字“301”制定重定向的类型：permanent。
Frye / Wiles 404 error.
有各种不同的办法做301重定向。他们是如何实现部分取决于你使用的Web服务器。这里介绍一下301重定向的基本操作，基于目前最流行的Web服务器，Apache。
下面的代码应该在一个名为“.htaccess”的文件里，这个文件应该在你网站的根目录下。是的，文件以一个英文逗号开始。这意味这是一个系统文件，标准文件浏览器会默认隐藏这种文件。因此，如果你不能用你的文件浏览器或者FTP客户端看到它，去把你的 “Display invisble files”选项勾选上。用你的编辑器创建或者（如果文件已经在那里了）编辑这个文件。每当访客到达你的网站上，这个文件中的重定向规则将会被应用。
下面是些简单的301重定向代码：
RewriteEngine on Redirect 301 /oldpage.html /newpage.html
这些代码相当简单明了。如果谁想试着进入 “yoursite.com/oldpage.html,” ，他们会立刻被重定向到“yoursite.com/newpage.html.” 。顶部的“RewriteEngine on”是设置mod_rewrite引擎为开启状态（默认是关闭的）。这就是处理重定向的引擎。
9. 老长老长的注册表单
注册表单是一砣障碍物。因为填写表单很费劲，并且很无聊。人们不得不投入时间和精力去注册，之后还得投入更多的时间和精力去记住他们的用户名和密码！
我们可以降低这种阻碍，通过尽可能缩短注册表单。考虑到所有情况，注册系统的目的仅仅是能够识别每一个用户，所以，伟义的要求就是一个独特的标识（如用户名或是Email地址），还有一个密码。如果你不需要更多信息，就不要问了。让表单尽可能短。
ReadOz的注册表单可长了。仔细研究下，我们发现，一半以上的字段都是可选的。如果这些是可选的，也就是并不真正需要的。这种形式可能会让用户看一眼就跑了。只显示那些人们注册时必需填写的，其余的可以以后再说。
Tumblr(已经被墙了)有一个最短的注册表单。只有三块，电子邮件，密码，你新Blog的地址。
Basecamp 的注册页用了一个聪明的伎俩。页面上除了去首页的链接没有其他任何网页导航。这样可以使用户集中在注册过程中，不会受到任何干扰离开页面。
少过脑子
可用性就是使工具更加容易使用。少让用户过脑子，少让用户受挫折。一个网站应该完成所有的工作，呈现给访客的只是那些他们寻找的东西。可用性还包括人们使用你的网站时的体验，因此，关注细节，在实现页面的呈现和感觉的时候。
好的，如果你有些对这篇文章的想法，或是遇到了任何其他的可用性问题，写在下面的回复部分告诉我吧～
原文链接：http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
关于作者
Dmitry Fadeyev 是 Usability Post blog的创始人, 您可以在那里阅读他关于好设计和可用性的想法。 在Twitter上Follow Dmitry： @usabilitypost.
关于译者
iamsure 是一个搞产品设计的人, 他的Blog是iamsure，他有时候在上边写点有的没的。 同样，也在Twitter上Follow iamsure： @iamsure
转载自：菠菜博 [http://www.bbon.cn]
CSS常见HACK/ie5/ie6/ie7/firefox
2009/04/04一、CSS HACK
以下两种方法几乎能解决现今部分HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.
(注意写法.记得该声明位置需要提前.)
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed */
}
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>”
二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
三、其他兼容技巧(再次啰嗦)
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
@import调用css和link href调用的区别
2009/04/04大家去分析一些大站的css代码时，都会发现调用css有以下两种方法：
方法一：
<style type="text/css">
<!–
@import url("css/main.css");
@import url("css/font.css");
@import url("css/layout.css");
–>
</style>方法二：
<link href="css/tianyi.css" rel="stylesheet" type="text/css" />
那么这两各方法有什么区别和优缺点呢？
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
/*
大致就这几种差别了，其它的都一样，从上面的分析来看，还是使用link标签比较好。
标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print，或者全部all等。
*/
差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样更利于修改和扩展．
提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。
