什么是F型浏览习惯？

2006年4月，美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森（Jakob-Nielsen）发表了一项《眼球轨迹的研究》报告。

报告中提出，大多数情况下浏览者都不由自主的以“Ｆ”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。

研究者用了几种不同的页面做眼动仪测试，得到了3张热度图，用颜色来表示浏览者眼光聚集的热度，分为最热（红色）、较热（黄色）、不热（蓝色）和基 本不关注（灰色）4种。其中图3搜索结果页因SERP中网站标题、网页摘要较宽，第二条线会随之加长，但仍然是F形状。

Yahoo!性能工程师Nicole Sullivan写了一篇非常值得一读的分析Reflow和Repaint的文章。

互联网设计不能“一锅端”。在我们的生活中，每天都有数以万计糟糕的设计阻碍老人、残疾人等特殊人群使用互联网。

1. “行为召唤”内容要靠前或居中
2. 让菜单看起来既简洁又亲切
3. 要让用户便于回到主页
4. 别让促销广告抢了你网站的风头
5. 保持搜索功能可见
6. 确保网站搜索结果符合用户预期
7. 使用过滤功能提升网站搜索易用性
8. 指导用户去访问较好的网站搜索结果
9. 不要一上来就让用户在网站上注册
10. 让用户能以访客的身份在你的网站上购物
11. 使用已有信息，最大程度为用户提供便利
12. 对于复杂任务，使用“点击拨打电话”功能
13. 当用户更换不同的移动设备时，确保能够便捷的完成交易
14. 信息输入时做到流线作业
15. 为每一个任务选择最简单的输入方法
16. 在需要选择日期的时候，提供一个可视化日历
17. 通过标签和实时确认，第一时间解决输入错误
18. 设计高效的表格
19. 针对移动终端，整体优化你的网站
20. 不要让用户用手捏放屏幕，去放大或缩小图片
21. 你的产品图像需要支持大图显示
22. 告知用户在哪种屏幕方向上访问网站最舒服
23. 让用户保持在单独一个浏览器窗口里访问你的网站
24. 避免“全网站”标签
25. 你必须要清楚自己为什么需要用户的地址信息

HTML5和CSS3的兴旺，带给用户更炫更好的体验，一些网站不仅在内容，可用性，设计，功能等方面，让人耳目一新；交互设计细节和动画更是与众不同。我们将分享一些模型的经验，分析一下这些简单的模式为什么效果很好。

手机开发火了很久了，各种app玲琅满目，一直开发pc web版的前端人员，怎么转到移动开发上呢？wap站？好老了，现代浏览器，很大的特点是：webkit内核， 支持html5，css3，国内主流的手机浏览器UC、海豚等，因此pc转移动，也就是要会html5、css3,自然js、html4、css2也是必须的。

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。

...

随着html5的广泛应用，为图片链接使用datauri，似乎是一个时髦，有人说，这是为了减少图片的请求数，但是datauri文件增大0.1k; 而且每次都需要解码，消耗cpu;这让手机的芯片情何以堪，为此我们可以考虑缓存这些datauri

在Html5中，可以将图片经过base64编码后直接写在HTML中来展示图片，使用这种方式可以减少Http请求数量，从而可加快页面展示，同时也减少了很多对服务器的压力。

    例: <img src="data:image/png;base64,iVBORw0KGgooCAMAAAC7...（此处略去N个字）...lFTkSuQmCC"/> 

摘要：网站优化的方面：

一、服务器侧优化（包括：添加 Expires 或 Cache-Control 信息头、压缩内容、设置Etags等）  

二、Cookie优化（包括：减小Cookie体积、对于页面内容使用无coockie域名等）

三、JAVASCRIPT 和 CSS 优化（包括：把 CSS 放到代码页上端、避免 CSS 表达式、从页面中剥离 JavaScript 与 CSS、精简 JavaScript 与 CSS、使用 <link> 而不是 @importChoose <link> over @import、避免使用CSS Filter、JS尽量放到页面最下端、页面展现尽量交给CSS完成等）

...