页面重构不可忽略UED、WPO和SEO的工作(转)

wbj0110

浏览: 1613096 次
性别:
来自: 上海

最近访客更多访客>>

一往无前bhz

ninja2006

loginboot

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

页面重构

页面重构

今天看了迅雷UED团队黄杠杠写的《页面重构做什么》，很不错的一篇文章，节选片段如下：

一般来说，接到一个新的需求，以简单的少页面需求为例，流程上可以简单分为几大阶段：

1. 查看设计稿，阅读需求文档、原型图；
2. 查看并分析设计稿，在脑中整理出粗略解决方案；
3. 切图、合并图片；
4. 书写HTML代码、CSS代码；
5. 检查浏览器兼容性；
6. 对比设计稿，检查还原度；
7. 开发联调修改，测试解bug，上线后再确认一遍页面无bug。

上面提到的5，对比浏览器兼容性，通常我们考虑IE Chrome FF三种浏览器。IE6在国内仍然有1/4市场，设计中需要加以考虑。在国外IE6用户则可以忽略不计。上面提到的6，对比设计稿，检查还原度，则经常被忽略。因为切图合并的过程中，可能会丢失重要的细节。

除了以上两点，页面重构的过程还应该考虑WPO和SEO的因素，当然需要和SEO、WPO专家配合工作。

要点包括：

1. WPO方面：使用css sprite技术，将常用的小图片合成到一幅大图中，减少图片请求次数。

2. WPO方面：将所有图片的主机名，定义为 img1.domain.com的形式，增加平行下载通道。

3. WPO方面：考虑CSS和JS的位置，CSS置入<head>区，JS尽可能放到页面底部。

4. WPO方面：考虑对外部JS脚本异步加载。

5. SEO方面：对于页面重点文字，加<h1><h2>标签，并使用css美化。

6. SEO方面：页面底部每个页面都有的链接，做消噪音处理。

7. SEO方面：对图片和链接，设置alt或title标签，可以预先留空

8. UED方面：设置favicon.ico文件

9. UED方面：手机访问测试。

10. UED方面：多种分辨率下的测试。800*600的分辨率可以不考虑。

11. WPO方面：所有图片都需要做无损压缩，定义图片的width和height

如果上述SEO WPO和UED的工作，在页面重构中完成，后续改动和优化工作就会很省力了。

作者: 谭砚耘@用户体验与可用性设计-科研笔记

http://www.webusability.cn/html-page-construction-with-seo-wpo-ued-1567/

如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠

分享到：

大型在线应用更快响应时间的实现方法——来 ... | linux 下安装、使用 redis

2014-05-01 13:05
浏览 767
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论