网站建设与维护

1. 网站建设与维护 第6章 用户体验与网站优化

2. 主要内容

3. 主要内容 • 全站检查 • 网站代码编码的标准性 • 网站的可访问性 • 网站的结构和导航 • 网站的功能单元 • 页面检查 • 页面的标题和内容 • 页面上的功能单元 • 功能单元

4. 一、全站检查

5. 网站代码编码的标准性 标准的代码＝50%的SEO工作 很多潜在机会因为网站设计不标准而流失 用几种浏览器打开网页(IE6, IE7, Firefox, Safari)观察网页可读性

6. 网站代码编码的标准性 很容易看到错误列表并提供给客户 中文站: gb2312或者gbk 英文站: ISO-8859 检查代码标准性(http://validator.w3.org/)

7. 网站的可访问性

8. 网站的可访问性 绝大部分是OK，可以认为是合格。反应时间平均不超过1.00 Sec 测试网站在全世界的反应时间－使用在线工具 http://host-tracker.com/

9. 网站的可访问性 安装Firefox上的YSlow插件就可以看到网页表现报告Yslow -> Components 网站下载速度对客户很重要。加速网站的访问速度，找到软件并检查内容的文件大小和正确性

10. 网站的可访问性 找到网站那些元素访问速度慢(总和大于8000ms)，删除或者修改 察看网站上那些文件较大（超50K），可以推荐客户用gzip进行压缩

11. 网站的可访问性 查看文件大小和下载时间，要求不变：50K和8秒。推荐客户进行压缩 测试网站元素的下载速度，使用工具： http://www.linkwan.com/gb/broadmeter/

12. 网站的可访问性 可访问的多语言的版本 • 网站包含合适的多语言版本 • 标示不应该藏在菜单里面，应该设置在顶栏 • 不同语言的网页版式应该一致

13. 网站的服务器位置 通过检测网站的IP地址找到网站的服务器所在位置。如果是面向国外客户，推荐使用国外的服务器。 使用在线工具：http://www.linkwan.com/gb/broadmeter/

14. 网站的安全可靠 使用Google的恶意软件/代码检查工具 http://www.google.com/safebrowsing/diagnostic?site=google.com

15. 网站的界面整体设计 • 其他网站整体设计原则： • 文字：字体和大小一致性：中文用黑体和宋体，英文用Arial • 多媒体内容都有详细的文字说明，视频不会自动播放 • 所有链接都：用下划线标明，样式统一 • 页面上最主要的主题颜色，不超过3种 • 从主页到产品描述页，不需要超过3次点击，否则网站结构需要修改的更简单 • 每个月至少更新一次网站

16. 网站的结构和导航 • URL规范化 • 使用静态链接(URL中不包含”?”问号)和连字符(“-”)有利搜索引擎抓取 • 但是链接中应该使用相应的英文单词表示页面内容，有利于搜索引擎和用户体验，如改成: • www.wxhthg.cn/HMH-1000-Cantilever-Beam-automatic-submerged-arc-welding-machine

17. 网站的结构和导航 顶栏 侧栏 内容 重要内容 页脚 最基本的网页结构：

18. 网站的结构和导航 顶栏 侧栏 内容 页脚 随时知道自己所在的栏目，并有子栏目。 网站导航 • 顶栏 － 全局导航，清晰明确

19. 网站的结构和导航 顶栏 侧栏 内容 页脚 网站导航 • 侧栏 － 本地导航的侧栏

20. 网站的结构和导航 顶栏 侧栏 内容 页脚 面包屑导航是在网页的顶端放置一行内部链接，使得用户可以随时很容易的回到上一层网页或者主页 网站导航 • 内容 － 使用“面包屑链接导航”，随时可以后退到上一层或更上层

21. 网站的结构和导航 顶栏 侧栏 内容 • 与正文对比区分 • 内容逻辑清晰 • 给用户带来价值但不会过长 页脚 网站导航 • 页脚 － 清晰明确，可以给用户方便

22. 网站的结构和导航 添加网页形式的网站地图，可以有利于搜索引擎和用户找到内容

23. 网站的功能单元 网站功能可用

24. 网站的功能单元 常见问题解答功能可以： • 提升企业服务形象 • 用内容留住客户 • 提高搜索引擎排名和流量 包含必要的内容：公司介绍，联络方式，复杂功能说明，常见问题回答等。

25. 二、网页（广告登陆页）检查

26. 网页内容优化步骤 • 找到最独特的网页主题 • 别的网站或者企业因为资源限制，无法提供的东西 • 与本站别的网页最不同的地方 • 用最简单的语言，将主题写下来。应该是一句话而不是几个词 • 找出该网页最主要的至少3个关键字 • 先检查网页内容是否围绕这个主题展开，是否有分段和逻辑层次 • 最后进入后面的步骤

27. 网页的标题 应强调页面独特内容：“无锡慧特焊割机械有限公司 － HGS系列数控火焰切割机” 创建独特，准确的页面标题 －准备好的主题 • 察看网页源代码，找到<title>后面的内容

28. 网页的标题 应该合理的对网页的内容进行描述，有利于搜索引擎对页面的理解 每页使用描述元标签，描述页面独特内容 • 察看网页源代码，找到<meta>和”content”后面的内容

29. 网页的版式 重点内容在页面角落处，没有突出重点，也没有文字介绍 产品文字介绍详细，重点在页面左上角突出

30. 网页的版式 介绍内容详细，且重点突出 产品介绍详细，重点在页面左上角突出

31. 页面优化在搜索引擎上的作用 都是混乱的文字，根本没有办法参加排名，也无法传递信息

32. 页面优化在搜索引擎上的作用 每一行都完全相同，搜索引擎无法判断网页的内容

33. 页面优化在搜索引擎上的作用 每条描述都不相同，而且强调了页面的主题，可以将信息准确的传递给用户和搜索引擎

34. 网页的标题和内容－最理想的结构

35. 三、页面单元的优化

36. 页面上的功能单元 • 页面顶栏 • 图片 • 注册和提交表单 • 购物车 • 联络我们/联系我们/关于我们

37. 页面顶栏 • 提供站内搜索功能，如果没有推荐使用AdSense for search: • https://www.google.com/adsense/support/bin/answer.py?hlrm=en&answer=17960 • 网站和企业的logo和中文或者英文名称清晰。如果有最好加上一两句公司的口号 • 简要的联络方式，或者购买的方式说明 • 简洁的菜单导航 • 不使用复杂的flash或者动画，影响用户浏览正文

38. 页面顶栏 清晰简单重点突出 菜单不简洁，内容和颜色都混乱

39. 页面顶栏 简洁，有口号: 钻石珠宝教育指南 联系方式清晰，菜单简单

40. 图片的优化 • 针对用户体验的优化 • 图片的周围有针对图片内容的详细说明 • 如果图片是链接的话，应该在旁边摆放文字链接 • 图片的读取时间不会过长 • 使用压缩格式的图片:文件扩展名为jpg, gif, png尽量不用bmp • 源图片文件下载打开，和网页上看到的差不多大小，不会过大 • 针对搜索引擎的优化 • 图片的文件名要有明确的含义，而非类似”1.jpg” • 图片的alt text应该明确的描述图片的内容

41. 图片的优化 文件名: cp-18.jpg 源代码中无alt属性

42. 图片的优化 详细说明 图片的Alt text 详细全面

43. 注册和提交信息的表单优化 • 表格格式整齐，表格的题目和表格都对齐 • 表格的填写内容充足但是不会过多 • (1)写清楚表格每项的题目和填写帮助; • (2)必须填写和选择填写的指示区分; • (3)标明注册和登陆的链接; • 重新检查每一项内容，是否是生意必要的，如: • 收集信息的表单，只需一种联系方式(email) • 注册表单，只需要email和密码 • 对于在线购买的网站，先要求用户简单注册(email地址即可)，具体联络和送货地址在结算时填写

44. 注册和提交信息的表单优化 需要填写的内容过多： 包括email，密码，性别，姓氏，名字，电话，传真，地址，城市，州/省份，邮编，国家！ 购买前的注册其实只需要：email和密码。其余都可以是选择性填写。

45. 购物车的优化 • 尝试购物流程： • 购物流程短，进入购物车到结算付款不超过五步 • 进入购物车不需要用户输入结算信息(姓名地址等) • 每一步都有清晰的标志提示进入下一步 • 购物车的内容可以随时被修改，可以随时跳回产品页面 • 用户在购物流程的每一步行动，应该被准确跟踪。定期挽回购物车流失的客户(发email给折扣等) • 网站上明确的标示银行或者付款方式的图标，以及第三方安全认证的标志(如果有)

46. 购物车的优化 清晰指示下一步内容，购物步骤只有四步 随时回到之前的产品页面 购物车内容可以随时更新

47. 联络我们/联系我们/关于我们 • 有详细的介绍信息，而不只是联络信息 • 在每一页都提供链接可以转到”联络我们”页面 • 使用”表单提交”或者”在线支持”等工具帮助客户简化留言的功能 • 使用链接的形式的email地址(email地址可以点击)