本人参考了国内外的一些大型网站，整理了网页最常用的ClassName集合，共有100+个。希望对前端小朋友们有那么一点帮助。:) Continue reading
最常用的100个ClassName集合
3
只言片语
本文收集一些大师们关于Web用户体验的观点。可能是设计方法、设计资讯、设计原则等等。也欢迎大家帮忙提供来源。
心智模型图（漫画）
在做网站或者APP的时候，我们往往一丝不苟地编写HTML和CSS，做精确到像素的完美设计，把内容放到我们认为正确的地方。我们目的只有一个，设计更好的用户体验。但是，我们如何知道用户真正想要的是什么呢？
其中的一个方法是，了解用户的行为动机。心智模型图就是为此而生的——深入挖掘用户的行为目的，然后提供对应的解决方案。
收藏和分享-2012年5月
Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More
来自德克萨斯州的UX设计师Theresa Neil，收集了在 iOS, Android, BlackBerry, WebOS, Windows Mobile 和 Symbian applications 上的400多个例子，总结了70多种移动UI设计模式。 Continue reading
收藏和分享-2012年4月
Google HTML/CSS Style Guide
代码风格的一致性很重要，看看Google的HTML/CSS向导如何定义吧。该文档说明了HTML和CSS的格式规则，旨在改善团队协作，提升代码质量。有了统一的向导，写代码的时候，就不需要再去适应一个完全不同的代码风格，而是能够更加关注代码内容。 Continue reading
XFN：是什么和如何做
微格式包括：XFN（描述社交关系）、hCalendar （描述事件）、hCard（描述联系信息） 、hNews （ 描述新闻内容） 、hProduct（ 描述商品）、XOXO（ 描述列表和大纲）等。
上一篇文章我介绍了如何快速入门微格式，使用的是微格式hCard，本篇文章将带你认识一下XFN。
5分钟开始你的微格式
使用微格式非常简单，不信你试试吧。
微格式大体上通过Class（有时会用id，title，rel或者rev属性）来添加信息到网站上。Class名非常富于语义化，并描述它所包含的内容。
使用微格式让你的网站数据标准化，这样，数据可以用于检索、搜索，还有利于一些操作如下载联系人信息或者添加事件到日历等。
5分钟内使用微格式，超简单！5分钟内你能学会在你的网站使用微格式。下面三步教你如何在你的网站上使用hCard——你的在线商务名片。
多设备的Web布局模式
通过灵活的栅格和Media Queris，响应式Web设计能够让页面布局适应不同的屏幕尺寸。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。下面我列出了一些比较热门的适应多设备的布局模式。
按钮是灵感激发的UI Hack，但是现在我们有更好的选择
Josh Clark 谈论了关于触摸屏等新型UI设计的未来。
如果你见过小孩玩iPad，你会感受到触摸屏的强大。这会不会意味着将来我们使用触摸屏而不是点击按钮？我联系了Josh Clark (@globalmoxie)， Global Moxie 的创始人和”Tapworthy”的作者，访问了他对未来的触摸和电脑交互的见解，还有按钮是否会面临消亡。Clark认为基于触摸屏的UI更加的直观。他同时说，触摸只是刚刚开始——语音识别、面部表情、手势开始出现，我们需要开始思考在这些场景中内容。
语义化的类名是如何炼成的？
（译者注：你是否还在用”layout-985″”redBg”的类名？你是否很纠结定义什么类名？ Chris Coyier提出了”描述而非定义”。他举例了一些常用的类名，是否语义化，给出了自己的判断和理由。但是在某些场景，如大公司，考虑到简洁和方便维护，语义化要做一些牺牲。）
语义总是个火热的话题。有些人时时刻刻在追求语义化，有些人教条地执着于它，而有一些人不知道这究竟是什么。
我认为语义像标签、类、ID、属性（描述而不是定义内容）一样和HTML密切相关。我们用典型的例子来描述。